pagespeed-20条衡量规则.doc

先来看界面吧 和YSlow一样，“Page Speed”也是一个基于firebug附加组件的FireFox插件。虽然听起来有点拗口，但是意思很容易理解：如果你想用“Page Speed”，那么你就要安装firbug，而firebug是FireFox的一个附加组件，所以你也必须按照FireFox浏览器。同时另外一个意思是：IE！NO！Sorry！“Page Speed”有两个面板，分别是“Page Speed”面板和“Page Speed Activity”面板。 “Page Speed”面板 Page Speed附加组件的Page Speed面板 和YSlow使用Yahoo的14条标准来衡量网页的综合速度一样，Page Speed通过Google指定的20条标准来衡量网页的综合速度。而Page Speed面板就是用来展现你的网页在Google20条标准上的得分。“Page Speed”通过分析你的网页加载、呈现速度，用20条标准来衡量，最终告知你的网页速度如何、哪种标准得分多少、问题所在、如何改进等信息。 “Page Speed Activity”面板 Page Speed附加组件的Page Speed Activity”面板 “Page Speed Activity”面板用于展现你的网页加载各种元素的所用时间，这样，你就可以更明确的知道到底是谁在浪费、占用大量的时间，从而更有针对性的进行改进。不同的阶段占用的时间，用不同的色块进行表示，恩，真是贴心的设计。 如果你对YSlow比较熟悉的话，那么一定会知道YSlow用于衡量网页速度的14条标准，而“Page Speed”有20条衡量标准，那么他们之间的到底有什么不同呢？Google又会给我们带来什么新的观点呢？补充一下：如果你对YSlow的14条衡量标准不熟悉的话，您可以阅读一下，我以前写的两篇文章，分别是《如何提高网页的效率（上篇）——提高网页效率的14条准则》和《如何提高网页的效率（下篇）——Use YSlow to know why your web Slow》，文章较为详细的介绍了YSlow这个工具的使用，以及YSlow的14条衡量标准。这两篇文章同时也被收录到了《博客园精华集-web标准之道》一书当中。 继续补充：如果你想非常详细的了解YSlow的14条衡量标准的超详细讲解，那么你可以购买一本书，书的名字叫做：《高性能网站建设指南》，书的封面是一条经常出现在《人与兽》一类电影中的那种狗狗。 高性能网站建设指南 OK，不扯那么多了，让我们回到正题：“Page Speed”的20条衡量标准到底是什么呢？ Put CSS in the document head 将你的CSS样式表文件放在整个页面的头部。没有什么难理解的。css先下载下来，就能更快的渲染网页效果。从而让人们感觉网页速度很快。 更多关于Put CSS in the document head的更多详细解释，请看官方文档。 Use efficient CSS selectors 使用效率更高的CSS选择符。举个很简单的例子：尽量不要使用*号选择符： *{padding:0;margin:0} 像这样的得分会很低，正确的办法应该是只对你想设置的标签元素进行设置，例如： html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; } 如果你对本条有更多的兴趣，可以去看Use efficient CSS selectors官方文档的详细解释。 Leverage proxy caching 代理缓存。这个名词听起来好像很屌的样子，以至于我也是查了资料才知道：所谓proxy cacheing，就是一种公共缓存，用于静态资源，允许浏览器从最近的代理服务器上，而不是从远程的原始服务器，下载这些静态资源。这些代理服务器，通常而言就是有ISP，接入服务商所提供的。 这样的代理服务器缓存可以让通过同一ISP接入服务的用户共享这些静态