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等各种需要优化的提示。

Components（组件视图）—Yslow的第三个选项卡

通过Components考验查看网页各个元素占用的空间大小。

Statistics（统计信息视图）—Yslow的第四个选项卡

Statistics这个统计信息视图工具和Components（第三选项卡）一样，只是效果更直观，如果要获得性能优化建议还是要看Grade（第二选项卡）的详细建议。

[b]Tools（辅助工具）—Yslow的第五个选项卡
[/b]

JSLint是一个强大的工具，它可以检验HTML代码以及内联的Javascript代码，通过JSLint发现了google analytics上的一个js错误。

ALL JS：查看你这个网页上一共引用了多少JS。

All JS Beautified：把所有JS放在打开的页面中，利用站长统一检查（我感觉作用不大）。

All JS Minified：同上，但它显示的是压缩过的js代码，如果你要JS优化，它已经给你优化好了，来过来直接用。

All CSS：显示你网页所有CSS文件。

YUI CSS Compressor：显示网页压缩后的CSS文件，也是拿过来可以直接用的。

All Smush.it™：图片在线优化网站，点击它后会自动跳到smushit网站上给你自动优化CSS图片，该网站提供了优化前与优化后的对比，点击直接下载优化后的图片，在覆盖到自己网站上就可以了，强烈推荐。

Printable View：这个是打印用的，部门开会、前端设计师讨论、向老板汇报时估计用的上。