Yslow使用方法

Yslow是雅虎开发的基于网页性能分析浏览器插件，从年初我使用了YSlow后，改变了博客模板大量冗余代码，不只提高了网页的打开速度，这款插件还帮助我分析了很多其余网站的代码，以前我还特地写了提升网站速度的秘籍，就是经过这款插件分析得出的。网络上已经有很多Yslow使用说明了，本文我想介绍下我使用Yslow的方法和一些别人没提到的小技巧。

Yslow的安装方法

如今Yslow已经有不少版本了，本文介绍的是3.0.4最新版，打开Yslow官网就能看到有四个版本可供选择：火狐（firefox）浏览器、谷歌（chrome）浏览器、欧朋（opera）浏览器和移动版。

安装Yslow要先安装 Firebug（本地址以火狐为例），两种方法启动Yslow：一、打开Firebug窗口，选择Yslow选项。二、直接点击火狐右下角的Yslow启动按钮。

（图1：Yslow的启动界面）

点击 Run Test 运行Yslow，也能够点击 Grade, Components, 或Statistics选项开始对页面的分析，若是在 Autorun YSlow each time a web page is loaded 上打上对勾，它将自动对之后打开页面进行分。

注意图中的红框，这里是规则集，YSlow （V2）包含了全部22个测试的规则，YSlow （V1）包含原始13规则，小网站或博客-这个规则集包含14个规则，适用于小型网站或博客，建议对号入座。

雅虎评估网站性能的23条军规

雅虎曾经针对网站速度提出了很是著名34条准则：《Best Practices for Speeding Up Your Web Site》。而如今将34条精简为更加直观的23条，并针对每一条给出从F~A的评分以及最终的总分。

而如今23条网站性能优化建议在YSlow的官网首页就能看到，固然也能够不看，在使用Yslow后，在控制面板里就会给你评分提示，和改进建议。

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

（图2：Yslow给出的网站性能评分）

Yslow给出的网站性能评分，从F~A，A是最好的，经过测试卢松松博客来看，网站有4处得分最低，例如图2中的最低分提示：我博客的HTTP请求太多。其中应用了14个外部JS、3个CSS文件（以前我已从6个合并为3个）、14个CSS背景图片。

Yslow的建议是让我合并这些，至于合并CSS引用图片我在“提升网站打开速度的7大秘籍”中介绍过。

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

（图3：经过Components考验查看网页各个元素占用的空间大小）

经过Components考验查看网页各个元素占用的空间大小，例如我博客某个页面，有236个images（图片），占用了489.2K，经过详细查看，发现来自gravatar（评论头像）的引用图片很是大，在加上我博客本省评论量就打，每一个头像就占用几K，几百个就占用了整个网页50%的大小，并且图片仍是引用的，加载就更慢。

因此，我得出的结论是：gravatar虽然加强了互动性和个性，但也结结实实影响了网站速度。

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

（图4：Yslow的统计信息视图）

左侧图表显示是页面元素在空缓存的加载状况，右侧为页面元素使用缓存后的页面加载状况。从图中能够直观的看出（尤为是我标的红框），这个网页263个HTTP请求，网页的大小达到773.9K，意味着打开没打开一个页面几乎须要下载1M的东西，而经过使用缓存后咱们能够看到效果图片基本靠缓存，而网页的总大小压缩到43.2K。

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

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

（图5：Yslow提供的小工具）

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：这个是打印用的，部门开会、前端设计师讨论、向老板汇报时估计用的上。

来源： <http://lusongsong.com/reed/362.html>

、23条军规

1. 减小HTTP请求次数

合并图片、CSS、JS，改进首次访问用户等待时间。

2. 使用CDN

就近缓存==>智能路由==>负载均衡==>WSA全站动态加速

3. 避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL做为它们的属性值，从而把页面的内容加载进来做为它们的值。测试

4. 为文件头指定Expires

使内容具备缓存性。避免了接下来的页面访问中没必要要的HTTP请求。

5. 使用gzip压缩内容

压缩任何一个文本类型的响应，包括XML和JSON，都是值得的。旧文章

6. 把CSS放到顶部

7. 把JS放到底部

防止js加载对以后资源形成阻塞。

8. 避免使用CSS表达式

9. 将CSS和JS放到外部文件中

目的是缓存，但有时候为了减小请求，也会直接写到页面里，需根据PV和IP的比例权衡。

10. 权衡DNS查找次数

减小主机名能够节省响应时间。但同时，须要注意，减小主机会减小页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。因此新浪会搞N个二级域名来放图片。

11. 精简CSS和JS

12. 避免跳转

同域：注意避免反斜杠 “/” 的跳转；

跨域：使用Alias或者mod_rewirte创建CNAME（保存域名与域名之间关系的DNS记录）

13. 删除重复的JS和CSS

重复调用脚本，除了增长额外的HTTP请求外，屡次运算也会浪费时间。在IE和Firefox中无论脚本是否可缓存，它们都存在重复运算JavaScript的问题。

14. 配置ETags

它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具备弹性，例如某个文件在1秒内修改了10次，Etag能够综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减小Web应用带宽和负载

15. 可缓存的AJAX

“异步”并不意味着“即时”：Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。

16. 使用GET来完成AJAX请求

当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，而后才发送数据。所以使用GET获取数据时更加有意义。

17. 减小DOM元素数量

是否存在一个是更贴切的标签可使用？人生不只仅是DIV+CSS

18. 避免404

有些站点把404错误响应页面改成“你是否是要找***”，这虽然改进了用户体验可是一样也会浪费服务器资源（如数据库等）。最糟糕的状况是指向外部 JavaScript的连接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分看成JavaScript代码来执行。

19. 减小Cookie的大小

20. 使用无cookie的域

好比图片 CSS 等，Yahoo! 的静态文件都在主域名之外，客户端请求静态文件的时候，减小了 Cookie 的反复传输对主域名的影响。

21. 不要使用滤镜

png24的在IE6半透明那种东西，别乱使，淡定的切成PNG8+jpg

22. 不要在HTML中缩放图片

23. 缩小favicon.ico并缓存

来源： <http://baike.baidu.com/link?url=e0ASP9bIv5BjvnMfJVJQPHg25n1hnx-HOMwN_KcY9P5t6X4Vh_rGW9r-H6DZre4egAnC2PtpXI36WF-c1AxCL_>