日期:2014-05-17  浏览次数:20696 次

HTML优化工具Page Speed和YSlow插件的安装及使用

目前,HTML优化已经越来越引起Web前端开发的重视。页面优化是SEO优化工作中必不可少的一项任务,这里我向大家推荐我目前用的谷歌Page Speed插件YSlow插件

        Page Speed是谷歌推出的一个网页优化建议插件,它并不能独立允许。而是要依托火狐或谷歌浏览器,且火狐浏览器必须安装了一个名为Firebug的插件,才能正常的使用Page Speed对网页进行分析。所以首先我们必须安装火狐浏览器,应该每个站长电脑上都安装了火狐浏览器吧,但有些人却没有安装page speed插件,这里我就简单介绍下安装和使用方法吧。

第一步:打开火狐浏览器,左上角进入菜单选项,选择附加组件进入组件界面搜索firebug,搜索结果中的第一个就是了,点右边的安装按钮进行安装。

第二步:安装好后下载pages speed进行安装。下载地址:https://developers.google.com/speed/pagespeed/download?hl=zh-CN

第三步:下载到电脑上后直接安装,有提示选是就可以了。安装好后火狐工具栏上会多出一个蜘蛛小标识。

第四步:打开你的网站页面等加载完后点击这个蜘蛛标识点击分析按钮即可对网站进行分析。Page Speed会根据web performance best practices (网页性能最佳实践)进行逐项打分。然后根据重要程序和优先级对每项进行排列。


Speed Page插件一般都是英文版,Firefox也有中文版本,但缺乏详细解释。这里先把主要检测事项的中英文对比出来,内容如下:

Parallelize downloads across hostnames 通过不同主机并行下载资源

Leverage browser caching 使用浏览器缓存

Enable gzip compression 启用gzip压缩

Specify image dimensions 指定图片大小

Minify JavaScript 压缩 JavaScript

Inline small CSS 内嵌小型CSS

Optimize images 优化图片

Combine external JavaScript 压缩外部的JavaScript

Minify HTML 压缩 HTML

Remove unused CSS 删除没用的CSS

Minify CSS 压缩 CSS

Specify a Vary: Accept-Encoding header 请指定一个“Vary: Accept-Encoding”标头

Prefer asynchronous resources 首选异步资源

Minimize redirects 尽量减少重定向

Enable Keep Alive 启用HTTP Keep-Alive

Use efficient CSS selectors 使用高效的CSS选择符

Avoid bad requests 避免出现错误的请求

Combine external CSS 压缩外部的CSS

Inline small JavaScript 内嵌小型 JavaScript

Put CSS in the document head 将CSS 放在文档标头处

Minimize DNS lookups 减少DNS查询次数

Minimize request size 尽量减少请求的数据量

Optimize the order of styles and scripts 优化样式表和脚本的排列顺序

Remove query strings from static resources 将查询字符串从静态资源中删除

Serve resources from a consistent URL 由同一网址提供资源

Serve scaled images 提供压缩后的图片

Specify a cache validator 请指定缓存验证工具

Specify a character set early 请指定字符集

Avoid CSS @import 避免在CSS中使用import

Combine images using CSS sprites 将图片组合为CSS 贴图定位

Yslow是雅虎开发的基于网页性能分析浏览器插件,自从我使用了YSlow后,不仅提升了网页的打开速度,改变了大量冗余代码,这款插件还帮助我分析了不少其他网站的代码。安装YSlow的方法与Page Speed的安装方法一致,下载地址是:http://developer.yahoo.com/yslow/ 安装好YSlow插件后,打开要检测的网站,打开Firebug,点击 Run Test 运行Yslow,也可以点击 Grade, Components, 或Statistics选项开始对页面的分析,如果在 Autorun YSlow each time a web page is loaded 上打上对勾,它将自动对以后打开页面进行评分。

Grade(等级视图)—Yslow的第二个选项卡

Yslow给出的网站性能评分,从F~A,A是最好的。此选项卡内容是提示http请求次数、css表达式、缩小javascript和css等各种需要优化的提示。