提高网站速度，分析工具page speed中文教程

1、网站的加载速度，即用户打开网站的速度，该方面的用户体验是首当其冲的，用户首先打开了网站才能去体验网站的内容，试想一下在网速正常的情况下，一个打开速度很慢的网站如何能够吸引用户，所以网页的加载速度的优化是很重要的。

2、页面的设计，即网站的美观度，这就需要网站的美工设计人员能够具备大众审美观，才能吸引住用户。

3、内容的质量，即网站提供的内容对用户是否有价值。

4、合理的布局，网页的整体布局合理，不会出现杂乱无章的现象，能够合理的引导客户对网站页面的访问。

本文所分析的重点是网页的加载速度，其它三个方面的优化可能要贯穿到网站的一个长期发展中，比如内容质量是网站发展中一直要重视的方面。56K猫上网的情 况已经不复存在，网速已经不是互联网快速发展的瓶颈，所以要想提高用户体验就必须从自身的网站进行优化，把该简化的网页内容简化了，才能有效加快网页的载 入速度。

对于网页加载速度的分析，Google提供了page-speed工具，可以提供详细的网页加载速度的优化报告，下面将以这个工具的对齐鲁人才网的分析报告为依据，说明网页速度优化的内容。

一、工具的准备

1、电脑需安装浏览器Firefox;

2、安装Firefox的组件：Firebug和page-speed。

二、工具的使用

1、用Firefox打开齐鲁人才网首页;

2、选择“工具”-“firebug”或者使用快捷键F12，弹出firebug工具，如下图：

3、点击“Analyze Performance”对网页性能进行分析，得到如下图的分析结果：

三、对报告的说明分析

1、“Page Speed Score：83/100”

说明：本页面的性能分数为83分，总分100分。

2、报告内容图标的说明：

（1）“红色叹号”为没有进行过优化的内容，需要进行优化的内容：

a、“Leverage browser caching”：浏览器缓存文件

说明：列表中的内容（如图片）没有定义缓存过期时间，只有设置了缓存过期时间，等文件过期后才会重新进行缓存，所以该项内容需要进行优化，对图片的缓存过期时间进行设置。

b、“Specify image dimensions”：指定图片的尺寸

说 明：列表中的图片都没有在代码中设置图片的大小，比如代码中的<img src=“/images/1new/city_ico_2.gif” />，没有添加width=“15” height=“13”的属性，浏览器在加载的时候就要计算图片的尺寸，增加了加载时间。所以优化方式为：对网页中的图片指定尺寸。

c、“Parallelize downloads across hostnames”：平衡文件的下载主机来源，也就是将文件分配到不同的服务器上，分摊压力。

说明：这方面可以通过增加独立服务器才能实现，。

（2）“黄色三角”为需要进一步优化的内容

a、“Combine external JavaScript”：合并外部的JS文件

合并JS文件，降低浏览器对JS文件的读取，有效的减少http的请求数量。

b、“Enable compression”：启用压缩，这里提到时启用gzip格式的压缩

说 明：该列表中详细提供了这些资源通过gzip压缩后能够节省多少时间成本。下面是对gzip的解释：所谓gzip压缩是一种开发的压缩算法，目前的主流浏 览器与主流服务器 （Apache， Lighttpd， Nginx）均对其有很好的支持。gzip压缩是通过HTTP 1.1协议中的Content-Encoding ： gzip来进行标记说明，其可以明显减少文本文件的大小，从而节省带宽和加载时间。

c、“Remove unused CSS”：移除不用的CSS代码

说明：在网站的CSS文件中可能会存在一些用不到的代码，这项工作应该在网站的发布之前对CSS，JS文件进行检查，删除没有用到的代码，该列表中详细的列出了没有用到的CSS代码。

（3）“绿色对勾”为已经进行过优化，暂不需要优化的内容。

附：网易的首页的性能分析：

网易首页需要优化的内容比较少，性能分数也比较高，网页加载速度比较快。

以下是对page speed鸟语的规则解释：

最近一直在看Google Page Speed中介绍的Web Performance Best Practices以及Yahoo！的
Best Practices for Speeding Up Your Web Site， 并且浏览了很多其他叙述有关WEB性能优化的文章后有一点感悟：当新技术新思想引进国内的时候，国外已经发展相对比较或者绝对成熟、研究有一定深度而且最 主要的是理念已经被广为传播开来并为大家所熟知。而联想到国内当前的技术环境和理念创新方面，还是有待提高的。下面是我在浏览了众多有关WEB性能优化方 面的论述后的一个总结，因为内容比较多，而且翻译总结时间比较长点，所以初步打算是逐步逐步共享一下自己的心得，后续的将会陆陆续续推出，说的有不正确的 地方，欢迎指正~

因为总结是写在word文档里的，所以就顺便保存了一份pdf格式的文件，需要的童鞋可以自行下载：《WEB性能优化系列一》。

1. Serve resources from a consistent URL：使用一个确定的URL来引用资源
2. Serve scaled images：衡量图片的大小缩放
3. Optimize images：优化图片
4. 拆分初始化负载
5. Minify HTML
6. Minify CSS
7. Minify JavaScript
8. Remove unused CSS：删除无用的CSS
9. Enable compression：允许压缩
10. Minimize request size：最小化request请求头信息的大小
11. Serve static content from a cookieless domain：减小静态资源的cookie的大小
12. Optimize the order of styles and scripts：优化js和css文件的加载顺序

1. Serve resources from a consistent URL：使用一个确定的URL来引用资源
这个主要是避免不必要的资源重复下载和DNS查询。这种情况主要是当同一个资源（尤其是图片）在几个页面或者几个站点之间重复使用的时候，特别是公司内的 各个站点，比如：a.example.com和b.example.com中同时引用了example.png这个图片，所以现在就要把这个图片放在a或 者b域名下，而不能既放在a又放在b，这样会造成不必要的重复下载同一个图片，而且也增加了DNS的查询时间，造成性能问题。
同时还有一点需要指出的是：相对URL和绝对URL的问题。如果是在同一个站点内，/images/example.gif和 www.example.com/images/exampl.gif是一样的，站内页面之间可以使用相对地址来引用图片，从而减少页面的大小。但是在站 点之间的时候，就会有一个问题：图片所在的站点使用相对URL/images/example.gif来引用资源，而另外站点通过 www.example.com/images/example.gif来引用的时候，IE和FF下都能够很好的处理，无论在哪一个站点访问了这个图片， 在另外一个站点就可以在浏览器的缓存里读取图片，可是在Chrome下却不会，即使是一个相同的URL页面，不同的Tab下浏览都会重新下载资源。测试页 面：http://www.ilovejs.net/lab/domain.html，http://www.webairness.com/apps/domain.html。
因此：将想要共享使用的资源（图片、CSS，JS等等）存放到一个唯一的站点里，其他站点都引用这个唯一的URL。

2. Serve scaled images：衡量图片的大小缩放
我们都知道页面中的图片最好能明确的通过HTML标签属性或者CSS来声明它实际的尺寸，而不要强制声明的尺寸跟图片实际尺寸不符合。但是有种情况是：在 一个页面中需要显示一个图片的好几个不同的尺寸，而不想下载几个尺寸不同的图片。比如一个250×250的图片，需要在页面中显示一个缩略图是10×10 尺寸的，这种场景经常在一个Tab组件中见到。Google Page Speed提到，如果图片的实际尺寸跟页面中几个尺寸中至少一个尺寸相符，并且是最大的那个，比如这里的是250×250，那么这对性能会有所提高。
对于上面提到的情况：到底是使用一个图片并在页面中强制声明缩放图片尺寸，还是加载几个尺寸不同的图片，从而在页面中显示不同尺寸但是内容相同的图片？我写了两个测试页面：http://www.ilovejs.net/lab/scale-img/test1.html，http://www.ilovejs.net/lab/scale-img/test2.html。
从对上面两个页面测试中发现：当时第一次浏览空缓存的时候，两个页面的渲染速度没什么差别，而总的加载时间是有缩放图片的页面快；当有缓存的时候，这就排除了HTTP请求数的影响，此时页面的渲染速度明显是几个尺寸不同的图片快。因此：这就需要一个衡量的事情。
附：在Google Page Speed中关于这个有一句En文不明白意思“However, if you serve an image that is larger than the dimensions used in all of the markup instances, you are sending unnecessary bytes over the wire.”希望懂的人指明一二~

3. Optimize images：优化图片
优化图片方面主要是利用好三种图片格式：PNG（又分为PNG8，PNG24）、GIF、JPG/JPEG。这三种格式各有用途，而总得来说：PNG用在 Sprites背景图片、修饰页面的icon以及渐变图片中；GIF虽然也可以用在一些背景图片，视情况而定，主要就是因为GIF图片格式相对其他两种来 说文件大小会小很多，适合用于一些清晰度要求不高的图片中；JPG/JPEG格式的文件大小一般都是最大的，因为它的色素高，适合展示相片之类对清晰度要 求高的图片。
除了选择好了图片格式之外，还得利用工具来压缩图片，对于JPG/JPEG格式的图片，可以使用jqegtran和jpegoptim这两个工具；对于PNG，则可以使用OptiPNG和PNGOUT。
同时，在HTML编写方面，需要明确的指定图片的尺寸（显式声明width、height属性），避免浏览器不必要的渲染性能消耗。

4. 拆分初始化负载
随页面一起加载的Javascript中，有些函数是用于在加载页面的同时就起作用的，但是还有一部分的代码是在页面加载的过程中不会执行或者用不到的， 如果让这部分代码连同需要执行的函数代码随页面一起加载的话，将会阻塞后续资源的加载，造成更多的时间延迟。所以我们需要将需要立即执行的代码和在页面 onload之后才有可能出发的代码拆分开来，而这个拆分的平衡点就是：那些需要在页面的onload事件触发前需要执行的以及哪些是在onload之后 才有可能执行的。 将那部分不会立即执行的代码通过onload事件来动态的加载，减小页面加载的总时间。

5. Minify HTML
Minify HTML文档的内容（包括行内脚本和行内样式），这样就可以减小页面的大小，更快的加载HTML页面、渲染和Layout文档。
Minify HTML文档跟缩小JS、CSS一样会得到非常多的好处：减小网络延迟、增进压缩、更快的加载和渲染。而且HTML经常会包含行内脚本和行内样式，压缩它 们也都非常有必要。举个简单的例子：行内脚本使用script标签来引入，页面内只需要写script，而不需要写language和type属 性，style标签也一样，不需要写明type属性，浏览器发现这些没写明的话，会采取默认的执行方式。
同时对于HTML标签的写法，也有几点建议：

1. 对于属性用单引号还是双引号的问题。建议统一使用单引号或者双引号，或者在DOCTYPE允许的情况下，省略掉。
2. 对于属性的顺序问题。比如a标签，应该把href属性放在最前面来声明，其他属性根据字符顺序排序来声明：<a href=”#” alt=””title=””>link</a>。
3. 在标签于标签之间，去掉不必要的空格和\t\r\n等等，例如可以看看http://www.ilovejs.net 站点的HTML源码。
4. 对于CSS的key-value的编写方式建议按照字母顺序a-z来组织。

6. Minify CSS
Minify CSS代码（移除不必要的空格、注释、换行符等等）可以节省字节数、加快下载、渲染和执行时间。
有几个工具可以用来实现压缩CSS：YUI Compressor、 cssmin.js。
同时，对于Minify CSS在编写代码方面尽量保持简写和归类的方式，这样一来容易维护，二来在性能上也会有所提高。比如：
简写：background:url(example.png) no-repeat 0 0;
归类：#test1,#test2,…#testN{background:url(example.png) no-repeat;}

7. Minify JavaScript
Minify Javascript代码（移除不必要的空格、注释、换行符等等）可以节省字节数、加快下载、渲染和执行时间。
Minify Javascript之后有三个好处：

1. 如果有些行内脚本和外部脚本不想要缓存的时候，文件越小网络延迟加载的时间就越短。
2. Minify Javascript之后可以更加增进外部脚本代码的压缩以及HTML内的行内脚本。
3. 更小的文件可以更快的被浏览器加载和执行。

有几个工具可以用来压缩Javascript代码：JSMin，YUI Compressor，Closure Compiler，Dojo Shrinksafe。

8. Remove unused CSS：删除无用的CSS
删除或者推迟加载一些当前文档用不到的样式规则，可以避免不必要的下载字节数以至于让浏览器更快的开始渲染页面。
在浏览器开始渲染页面之前，它必须要下载和解析全部的用于布局页面的样式表。即时一个外部的样式表已经存在于缓存中，页面渲染也都会被阻塞直到浏览器从缓 存中加载了全部的样式表。另外，一旦样式表被加载下来，浏览器的CSS引擎就会执行每一条样式规则，从而确定每一条声明的样式规则对当前文档是否得到应 用。但现实中的情况是很多网站从始至终在网站的每一个页面中都使用同一个样式表，而不管样式表中有些规则是否会被当前文档用到。
所以，最好的方式就是最小化由样式表加载和解析所造成的延迟时间，而解决方案就是移除或者延迟加载那些不被当前文档使用到的样式规则。
对此，Google Page Speed做如下建议：

1. 在行内样式中删除掉任何不为当前页面使用的样式规则。
2. 如果你的站点中在几个页面中都引用了同一个样式文件，考虑下将样式文件拆分为更小的文件来为特定的页面特定的样式。
3. 如果一些样式规则在页面加载的时候不需要使用，最好将他们放置到另外一个文件里，在页面的onload事件里加载它。
4. 如果使用Javascript来动态生成样式规则时，确保那些会生成当前页面不需要的的样式规则的Javascript函数不会被执行。

上面提到的四点对于清除无用的CSS是比较良好的解决方案和建议。口碑网现在加载页面的样式表同样使用了Minify的方式，因为头部和底部是全部 页面都通用的，所以页面统一都加载了base.css和header.css。但是口碑网站中包括了许多中不同样式的头和底部，base库里也会有非常多 的样式不能在全部的页面中都使用上，所以就造成了在当前页面非常多的无用的CSS规则，这一来影响了CSS文件的加载，二来影响了CSS引擎的解析。
所以，更理想的方式是将Minify的方式更加的颗粒化，将base.css和header.css更加的细分，真正做到按需加载。

9. Enable compression：允许压缩
用Gzip或者deflate来压缩资源可以减少大部分的网络传输数据量，这点是毋庸置疑的。可以压缩HTML文档内容、CSS文件、Javascript文件等等来使得页面加载速度更快。
当前主流浏览器都支持使用gzip/deflate来压缩HTML文档、CSS和Javascript文件，从而使得从服务端发送回来的数据量比原始大小 减少了许多（通常在50%上下），这是非常可观的。Gzip压缩的原理非常简单，就是将指定的文件类型在服务器端打包压缩，在发送回浏览器解压，这个过程 是服务器和浏览器会自动处理的，我们只需要正常的使用普通的方式链入CSS、Javascript文件即可。
但是我们也知道，这个压缩和解压的过程，是需要消耗CPU和内存的，所以gzip压缩一般只在压缩大文件的时候才能显示出它的优势。Google Page Speed经过测试发现：当使用gzip来压缩一个大小在150到1000 bytes的文件时，实际上会使他们更大，体现不出gzip的优势了。所以尽量保持在只对1000 bytes大小以上的资源进行gzip压缩。
同时还有一点需要指出的是：不要对图片或者其他的二进制的文件（比如：PDF，video，ppt等等）进行gzip压缩，因为它们已经进行过压缩了。如果对它们使用了gzip压缩之后，不仅不会带来应有的好处，还会实际上使它们更大。如果要压缩图片，可以查看上面的：Optimize images：优化图片。

10. Minimize request size：最小化request请求头信息的大小
尽量保持request请求头信息的短小能确保HTTP的request请求可以通过发送一个数据包就可以完成请求信息的传输。
理想的情况下，一个HTTP请求尽量不要超过一个数据包来发送到服务器。当前大部分的在使用的网络对一个数据包大小的限制是在1500 kytes左右，所以当你限制每个请求的头信息的大小在1500 bytes以内，你就可以减少发送请求头的时间总开销。而HTTP请求头信息一般包括：

1. Cookies。如果请求一些资源必须要发送cookie的时候，尽量保持cookie的大小尽量的小，来确保HTTP请求头信息的总大小在限制 的范围内。因此，发送的每一个cookie尽量保持在1000 bytes以内。建议是每个域名下发送的全部的Cookies的平均值在400 bytes以下，将没用的或者是重复的Cookies给删除掉。
2. 浏览器自动设置的信息。许多头信息都是由用户代理自动地设置的，这部分是无法控制的。
3. 请求的URL（GET或者Host头）。如果URL设置了很多参数的话，这会无疑的增加了HTTP请求头总体的大小。所以尽量保持URL的大小越小越好，建议是至少是在几百bytes之内。
4. Referer URL。有时候请求头中会包含referer头指定的URL，这个URL跟第三点就有相同的要求了。

因此，尽量保持HTTP请求头信息总大小在限制的范围内，对提高页面加载速度，还是有效果的。

11. Serve static content from a cookieless domain：减小静态资源的cookie的大小
通常如果在一个域名下（比如www.example.com）的HTML页面在发送请求的时候设置了cookie，那么在页面中的一些静态资源的请求头中 也会发送这些cookie，而服务器对于静态资源发送的cookie是毫无作用的，反而是徒增了HTTP请求头的大小。所以，确保静态资源的HTTP请求 头中不发送这些cookie来减小HTTP请求头信息的大小。
解决这个问题的方案是：创建一个子域名或者购买一个新域名来映射静态文件，跟当前域名隔离开来。
比如：你的域名是www.example.com，你就可以创建一个子域名static.example.com来映射静态文件。但是，如果你是将 cookie设置到最高级的example.com域名下，那么子域名下的静态资源也都会发送cookie，这个时候，你就不得不花钱购买一个新的域名来 映射这些静态资源。
同时，移除静态资源的cookie的另外一个好处是避免一些代理对静态资源拒绝缓存的情况，因为一些代理会拒绝缓存一些HTTP请求头中包含cookie信息的静态资源。所以从这方面出发，避免静态资源的HTTP请求头中包含cookie信息，益处是颇大的。
还有一点需要说明的是，对于Javascript文件，如果它一定要放置在head里并需要在页面中即时加载，最好将这个Javascript文件放置到 跟HTML文档同一个域下，因为反正Javascript文件的加载都会阻塞页面其他资源的加载和阻塞页面的渲染，所以就没有必要将这个 Javascript文件放置到其他域下，增加DNS查找的延迟时间。

12. Optimize the order of styles and scripts：优化js和css文件的加载顺序
正确对外部的样式表文件和脚本文件或者行内脚本进行排列加载，会得到更好的并行下载数和加快浏览器渲染页面。
这个主要是因为Javascript代码可能会改变页面的内容和布局，所以浏览器在遇到script标签的时候，会延迟渲染页面任何内容，直到脚本下载并 执行完毕。而还有一点就是加载脚本会阻塞后续任何资源的加载，这个是最致命的。但是另一方面，在页面的加载队列里，如果在脚本文件的前面已经存在有另外的 文件需要加载，那么脚本文件将会跟这些文件并行加载。
所以这就有几种情况：

1. 当js文件穿插在css文件中来加载。这样的后果就是每到加载js文件的时候，就会阻塞后续的js或者css文件的加载，这无疑就没有利用好浏览器的并行加载的机制。
2. 当js文件都放在css文件的最末尾来加载。因为css文件的加载不会阻塞后续资源的加载，而且还可以跟其他资源并行加载，所以前面的样式表和样式表后的第一个js文件可以并行加载。这比第一点就快速多了，具体图示可以浏览《Optimize the order of styles and scripts》。

这里还有一种情况需要说明的是：当行内脚本紧跟在样式表后面的时候，将会阻塞后续资源的加载（这里我提一点：是当script标签紧跟在样式表link标签后面的时候，也将会阻塞后续资源的加载，测试页面：http://www.ilovejs.net/lab/script-after-styylesheet.html）。 当行内脚本紧跟在样式表后面的时候，浏览器要在样式表完全下载之后才开始执行行内脚本，如果行内脚本又需要执行比较长的时间，这可能还会更糟。这是因为行 内脚本有可能含有依赖于样式表中样式的代码，比如HTML5中的getElementsByClassName方法。浏览器按顺序下载样式表和执行行内脚 本是为了保证一致的结果。

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接入服务的用户共享这些静态资源，而节省原始服务器的带宽，以及下载速度也会大大提高，特别是对于局域网 的用户有特别的好处。

关于“Leverage proxy caching”的文档资料，请看官方文档的详细解释。

Minify JavaScript

最小化JavaScript脚本。这个貌似没有什么好说的，压缩一下你的JavaScript脚本吧。

关于“Minify JavaScript”的更多文档资料，请看官方文档的详细解释吧。

Optimize images

优化图片，其实最经常使用的就是css script了，也有翻译为“css精灵”的，虽然翻译的很美好，但是其实很简单，就是将多个图形，放在张图片文件中。这样，可以有效的减少http请求 的数量。

如果你对“Optimize images”有更多的兴趣，可以看这个。一个css cript的示例： 《【CSS翻转门】技术实例讲解（附源码下载）》。

Minimize cookie size

最小化你的cookie。cookie的确是个好东西，他可以让你在用户的客户端保存一些东西，但是，千万不要什么都往用户口袋里面塞。原因很简 单，cookie大小有限，有最大限制，而且cookie过大会减慢网页呈现的速度。另外为了安全性考虑，也不要把所有的什么破铜烂铁都塞到cookie 里面。

关于“Minimize cookie size”的更多文档资料：看这里。

Enable gzip compression

使用gzip压缩。详细这个大家应该已经比较熟悉了。说白了就是服务器向浏览器发的是经过压缩的页面，这样传输的字节就会大大减少，速度自然也就快 了。

这幅图说明了gzip技术的工作原理欲了解更多的“Enable gzip compression”资料，请看官方文档。

Combine external JavaScript

合并外部的JavaScript文件。道理很简单，依然是为了少读取.js文件，从而有效的减少http请求数量。

合并外部的JavaScript文件可以有效的减少http请求数量更多的关于“Combine external JavaScript”的文档，可以看这个。

Minimize DNS lookups

最小化DNS查询。详情请看这个：Minimize DNS lookups规则详情。

Optimize the order of styles and scripts

优化样式表和脚本的顺序。如果你要是看过老赵的《挣脱浏览器的束缚》系列的话（本系列也已经收录到《博客园精华集-web标准之道》 一书中）。就知道IE浏览器对同一个域名下的文件，同时只能下载2个文件。所 以，到底先让哪些样式表先下载下来，让哪些脚本先下载下来，这个顺序就非常重要了。所以，如果有可能，请重视一下样式表和脚本的顺序吧。推荐的做法是：将 css放在js文件上面，让css文件先被加载，这样就可以先让网页渲染出来，从而加快浏览者的感知速度。

IE浏览器对同一个域名下的文件，同时只能下载2个文件关于“Optimize the order of styles and scripts”更多详情，请看这个。

Serve resources from a consistent URL

相同的资源，使用相同的url地址。道理很好理解，如果是相同的一张图片，就不要东方一下，西方一下，然后引用的时候使用不同的url地址。为什么 要这样做，道理也很简单，因为——缓存！

更多“Serve resources from a consistent URL”详情，请看这里

Avoid CSS expressions

避免CSS表达式。这个我在《如何提高网页的效率（上篇）——提高网页效率的14条准则》一文中也有讲到。现在需要补 充的是：IE8已经不再支持css表达式功能。

关于“Avoid CSS expressions”，更多详情看这里。

Parallelize downloads across hostnames

通过不同的主机同时下载网页资源。这个的道理已经在“Optimize the order of styles and scripts”这一准则中讲述过。道理依然是老赵的《挣脱浏览器的束缚》提到的原因：IE浏览器对同一个域名下的文件，同时只能下载2个文件。

更多关于“Parallelize downloads across hostnames”的详情，可以看这个。

Combine external CSS

合并外部的css文件。这条和“Combine external JavaScript”准则的道理一样。还是为了减少http请求数量。

关于“Combine external CSS”的更多详情，可以看这个。

Specify image dimensions

明确的指明图片的高度和宽度。很久很久以前，long long ago。一个同学问我：“明确的指明图片的宽度和高度，是否能加快页面的渲染速度？”当时我的答案是：“这个应该没有关系吧！”。看来，当时的我是误人子 弟了。明确的指出图片的高度和宽度，能够有效的加快浏览器在渲染图片周围布局和绘制呈现时的速度。

更多关于“Specify image dimensions”的详情，可以看这里。

Minimize redirects

尽量避免重定向。道理很简单，你从A地点到你的同事B先生家，到了那里，他的邻居告诉你，B先生已经搬家了，搬到了C地点，于是，你又跑到C地点， 然后C地点有个人告诉你，B先生现在又搬家了，已经搬到了D地点。于是你又跑到了D地点，才找到了这个B同事。而这个装B的B同事，告诉你，你如果直接就 来D地点，就不用那么麻烦了，而且速度也会更快一些。网页的跳转和重定向的道理是一样的。

关于“Minimize redirects”的详细文档，可以看这里。

Defer loading of JavaScript

延期加载JavaScript。这个听起来真是个高科技的东西呀。其实这玩意还真是非常的有效呀。不仅可以延期加载脚本，像一些大的图片、 flash也都可以延期加载。其实实现原来也不是很难，就是先不加载一些比较大的东西，当页面加载完毕后，再加载那些东西。

关于“Defer loading of JavaScript”的更多详情，请看这里。

转载于:https://www.cnblogs.com/dragontappi/archive/2012/03/20/2407486.html