网站页面加载性能测试工具

网站页面加载性能测试工具

 

1、Yahoo:Yslow(为什么慢?)

     门户网站页面加载性能测试工具---YSLOW

【转自】http://www.blogjava.net/lijun_li/archive/2009/06/21/283458.html

目前我知道的用于测试B/S结构,页面加载性能测试的工具有如下两个:

Ø         来自雅虎的---YSLOW

Ø         来自google---- Page Speed

我更倾向于用雅虎的,因为它对于我来说感觉更专业、更标准,下面是YSLOW工具介绍。

Ø         工具名称:YSLOW

Ø         工具用途:网站页面加载性能测试

Ø         安装的前提条件:浏览器Firefox2.0

Ø         运行的环境:在Firefox下安装组件firebug才可运行使用

Ø         下载官方网址:http://developer.yahoo.com/yslow/

Ø         帮助学习文档地址:http://developer.yahoo.com/yslow/help/

下面是我用YSLOW测试工具测试后,形成的测试报告模板,供大家参考学习。
             
XXXX页面加载性能测试报告

测试项目概述

项目名称

 

版本

 

开发负责人

 

测试负责人

 

测试时间

 

测试工具

YSLOW

测试目的

xxxxxxx

测试内容

测试项功能模块

具体测试页面

页面URL

xxxxx

xxxx

xxxx

xxxx

xxxx

XXXXX改版前后页面加载性能测试结果数据对比

具体测试页面

改版前页面加载性能级别

改版后页面加载性能级别

XXXXX

 

 

XXXXXX

 

 

测试结论

xxxxxxxxx

XXXXXX测试数据结果

具体测试页面

测试结果

测试结果页面加载各项性能参数指标

参数指标测试结果

XXXXXX

XXXX

Make fewer HTTP requests

 

Use a Content Delivery Network (CDN)

 

Add Expires headers

 

Compress components with gzip

 

Put CSS at top

 

Put JavaScript at bottom

 

Avoid CSS expressions

 

Make JavaScript and CSS external

 

Reduce DNS lookups

 

Minify JavaScript and CSS

 

Avoid URL redirects

 

Remove duplicate JavaScript and CSS

 

Configure entity tags (ETags)

 

Make AJAX cacheable

 

Use GET for AJAX requests

 

Reduce the number of DOM elements

 

Avoid HTTP 404 (Not Found) error

 

Reduce cookie size

 

Use cookie-free domains

 

Avoid AlphaImageLoader filter

 

Do not scale images in HTML

 

Make favicon small and cacheable

 

         

 

2、Google:Page Speed (怎么快?)

相关介绍-http://code.google.com/intl/zh-CN/speed/page-speed/docs/rules_intro.html

 

 Page Speed分析结果:

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过页面性能测试概念+页面加载过程+页面性能指标+页面性能测试工具的学习,可以学到如下内容:①WEB网站页面性能的指标(白屏时间、首屏加载完成时间、FP、FCP、DCL、CLS、FPS等);②WEB网站页面性能测试策略;③WEB网站页面加载过程(前端基础语言:HTML+CSS+JavaScript,DOM、CSSOM、渲染树、布局、绘制);④WEB网站页面性能测试工具的实际操作和功能介绍(开发者工具:控制台、网络、性能、Lighthouse、FPS渲染统计等);⑤WEB网站页面性能测试报告编写。⑥WEB网站页面性能测试步骤和实际操作。课程内容:第一章:课程简介1、课程介绍2、课程大纲第二章:页面性能测试1、页面性能测试概念2、页面性能测试专业术语3、页面性能测试策略第三章:页面加载过程1、HTML概念,HTML5实例,HTML5文档2、CSS概念,CSS实例,CSS文档3、JavaScript概念,JavaScript脚本实例和作用4、DOM和CSSOM理解5、HTML5渲染引擎理解6、HTML5页面内容渲染的过程,HTML渲染树第四章:页面性能测试工具1、页面性能测试具体工具2、Chrome开发者工具介绍第五章:页面性能测试工具-控制台:window.performance1、控制台:window.performance介绍2、window.performance.timing执行结果加载字段理解3、window.performance.timing执行结果属性对应页面阶段理解4、window.performance页面性能参数计算5、window.performance页面性能关键指标计算第六章:页面性能测试工具-网络面板1、Chrome-开发者工具-网络面板介绍2、Chrome-开发者工具-网络-瀑布流指标第七章:页面性能测试工具-性能面板1、Chrome-开发者工具-性能面板-使用方法2、Chrome-开发者工具-性能面板介绍3、Chrome-开发者工具-性能面板-控制按钮区域4、Chrome-开发者工具-性能面板-Overview区域5、Chrome-开发者工具-性能面板-火焰图区域6、Chrome-开发者工具-性能面板-内存图区域7、Chrome-开发者工具-性能面板-统计汇总区域8、Chrome-开发者工具-性能面板-统计汇总区域-摘要内容9、Chrome-开发者工具-性能面板-统计汇总区域-事件时长、调用、发生顺序第八章:页面性能测试工具-FPS监控1、Chrome-开发者工具-FPS监控-FPS介绍、FPS视觉效果、FPS查看方法第九章:页面性能测试-Lighthouse面板1、Chrome-开发者工具-Lighthouse介绍、操作方法、运行的生命周期2、Chrome-开发者工具-Lighthouse报告指标分析3、Chrome-开发者工具-Lighthouse的报告优化建议第十章:页面性能测试工具-Performance insights面板1、Chrome-开发者工具-Performance insights操作方法2、Chrome-开发者工具-Performance insights分析报告第十一章:网速调研1、全国网速的调研和本机网速测试第十二章:页面性能测试总结1、页面性能测试指标采集方式2、页面性能测试报告3、页面性能测试-操作步骤​
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值