雅虎十四条：网站前端网页优化的14条原则

内容再丰富的网站，如果慢到无法访问也是毫无意义的；SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭；UE设计的再人性化的网站，如果用户连看都看不到也是空谈。

所以，网页的效率优化绝对是最值得关注的方面，那么，我们该如何才能提高一个网页的效率呢？对此，我今天就在马海祥博客上为大家分享一下雅虎网页优化的14条原则，也被称为：雅虎十四条，而这些原则也是我们作为一名SEO人员所必须了解的。

1、减少HTTP请求次数

据统计，有80%的最终用户响应时间是花在前端程序上，而其大部分时间则花在各种页面元素，如图像、样式表、脚本和Flash等的下载上，减少页面元素将会减少HTTP请求次数，这是快速显示页面的关键所在。

一种减少页面元素个数的方法是简化页面设计，但是否存在其他方式，能做到既有丰富内容，又能获得快速响应时间呢？以下是这样一些技术：

Image maps组合多个图片到一张图片中，总文件大小变化不大，但减少了HTTP请求次数从而加快了页面显示速度（具体可查看马海祥博客《提高网站速度的6种网站前端优化方法》的相关介绍），该方式只适合图片连续的情况，同时坐标的定义是烦人又容易出错的工作。

CSS Sprites是更好的方法，它可以组合页面中的图片到单个文件中，并使用CSS的background-image和background-position属性来现实所需的部分图片。

Inline images使用data:URL scheme来在页面中内嵌图片，这将增大HTML文件的大小，组合inline images到你的（缓存）样式表是既能较少HTTP请求，又能避免加大HTML文件大小的方法。

Combined files通过组合多个脚本文件到单一文件来减少HTTP请求次数，样式表也可采用类似方法处理，这个方法虽然简单，但没有得到大规模的使用。

据马海祥博客收集的资料显示：国外10大网站每页平均有7个脚本文件和2个样式表，当页面之间脚本和样式表变化很大时，该方式将遇到很大的挑战，但如果做到的话，将能加快响应时间。

减少HTTP请求次数是性能优化的起点，这最提高首次访问的效率起到很重要的作用，据Tenni Theurer的文章Browser Cache Usage - Exposed描述，40-60%的日常访问是首次访问，因此为首次访问者加快页面访问速度是用户体验的关键。

对此，马海祥的建议是：将首页的几十个小图标合并为一个，通过CSS控制它们的显示，减少了HTTP请求数。

2、使用CDN(Content Delivery Network，内容分发网络)

用户离web server的远近对响应时间也有很大影响，从用户角度看，把内容部署到多个地理位置分散的服务器上将有效提高页面装载速度，但是该从哪里开始呢？

作为实现内容地理分布的第一步，不要试图重构web应用以适应分布架构，改变架构将导致多个周期性任务，如同步session状态，在多个server之间复制数据库交易，这样缩短用户与内容距离的尝试可能被应用架构改版所延迟或阻止。

我们还记得80-90%的最终用户响应时间花在下载页面中的各种元素上，如图像文件、样式表、脚本和Flash等，与其花在重构系统这个困难的任务上，还不如先分布静态内容，这不仅能大大减少响应时间，而且由于CDN的存在，分布静态内容非常容易实现。

CDN是地理上分布的web server的集合，用于更高效地发布内容，通常基于网络远近来选择给具体用户服务的web server。

一些大型网站拥有自己的CDN，但是使用如Akamai Technologies、Mirror Image Internet或Limelight Networks等CDN服务提供商的服务将是划算的，在Yahoo!把静态内容分布到CDN减少了用户影响时间20%或更多，切换到CDN的代码修改工作是很容易的，但能达到提高网站的速度。

对此，马海祥的建议是：目前还没用到，不过据客户反映，广东山东等地网络情况比较差，如果可以将占据主要带宽的静态资源通过CDN发布，相信可以大大缓解目前网站访问速度的问题。

3、增加Expires Header

网页内容正变得越来越丰富，这意味着更多的脚本文件、样式表、图像文件和Flash，首次访问者将不得不面临多次HTTP请求，但通过使用Expires header，您可以在客户端缓存这些元素，这在后续访问中避免了不必要的HTTP请求，Expires header最常用于图像文件，但是它也应该用于脚本文件、样式表和Flash。

浏览器（和代理）使用缓存来减少HTTP请求的次数和大小，使得网页加速装载，Web server通过Expires header告诉客户端一个元素可以缓存的时间长度。

如果服务器是Apache的话，您可以使用ExpiresDefault基于当期日期来设置过期日期，如：ExpiresDefault “access plus 10 years”，设置过期时间为从请求时间开始计算的10年。

请记住，如果使用超长的过期时间，则当内容改变时，您必须修改文件名称，在Yahoo!我们经常把改名作为release的一个步骤：版本号内嵌在文件名中，如yahoo_2.0.6.js。

对此，马海祥的建议是：在Apache配置了JS,CSS,image的缓存，如果静态资源需要更新，则采用修改文件版本号的方案确保客户端取得最新版本。

4、压缩页面元素

通过压缩HTTP响应内容可减少页面响应时间，从HTTP/1.1开始，web客户端在HTTP请求中通过Accept-Encoding头来表明支持的压缩类型，如：Accept-Encoding: gzip,deflate.

如果Web server检查到Accept-Encoding头，它会使用客户端支持的方法来压缩HTTP响应，会设置Content-Encoding头，如：Content-Encoding: gzip。

Gzip是目前最流行及有效的压缩方法，其他的方式如deflate，但它效果较差，也不够流行。通过Gzip，内容一般可减少70%；如果是Apache，在1.3版本下需使用mod_gzip模块，而在2.x版本下，则需使用mod_deflate。

Web server根据文件类型来决定是否压缩，大部分网站对HTML文件进行压缩，但对脚本文件和样式表进行压缩也是值得的，实际上，对包括XML和JSON在内的任务文本信息进行压缩都是值得的，图像文件和PDF文件不应该被压缩，因为它们本来就是压缩格式保存的，对它们进行压缩，不但浪费CPU，而且还可能增加文件的大小。

因此，对尽量多的文件类型进行压缩是一种减少页面大小和提高用户体验的简便方法。

对此，马海祥的建议是：600多K的ext2包，是人都会想到要去压缩它，压缩后的效果还不错，只有150多K，另外，JS、CSS、HTML也尽量压缩（在此也推荐一种压缩CSS代码的简单工具：http://www.mahaixiang.cn/zyxz/zxgj/cssys.html），要知道我们的很多客户还在使用1M的ADSL。

5、把样式表放在头上

无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的，所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染，这样就不会出现，页面结构光秃秃的先出来，然后CSS渲染，页面又突然华丽起来，这样太具有“戏剧性”的页面浏览体验了。

我们发现把样式表移到HEAD部分可以提高界面加载速度，因此这使得页面元素可以顺序显示。

在很多浏览器下，如IE，把样式表放在document的底部的问题在于它禁止了网页内容的顺序显示，浏览器阻止显示以免重画页面元素，那用户只能看到空白页了，Firefox不会阻止显示，但这意味着当样式表下载后，有些页面元素可能需要重画，这导致闪烁问题。

HTML规范明确要求样式表被定义在HEAD中，因此，为避免空白屏幕或闪烁问题，最好的办法是遵循HTML规范，把样式表放在HEAD中。

对此，马海祥的建议是：目前还没有碰到把样式表放在文档后面的情况吧？

6、把脚本文件放在底部

与样式文件一样，我们需要注意脚本文件的位置，我们需尽量把它们放在页面的底部，这样一方面能顺序显示，另方面可达到最大的并行下载。

浏览器会阻塞显示直到样式表下载完毕，因此我们需要把样式表放在HEAD部分，而对于脚本来说，脚本后面内容的顺序显示将被阻塞，因此把脚本尽量放在底部意味着更多内容能被快速显示。

脚本引起的第二个问题是它阻塞并行下载数量，HTTP/1.1规范建议浏览器每个主机的并行下载数不超过2个，因此如果您把图像文件分布到多台机器的话，您可以达到超过2个的并行下载，但是当脚本文件下载时，浏览器不会启动其他的并行下载，甚至其他主机的下载也不启动。

在某些情况下，不是很容易就能把脚本移到底部的，如，脚本使用document.write方法来插入页面内容，同时可能还存在域的问题，不过在很多情况下，还是有一些方法的。

一个备选方法是使用延迟脚本（deferred script），DEFER属性表明脚本未包含document.write，指示浏览器刻继续显示，不幸的是，Firefox不支持DEFER属性，在IE中，脚本可能被延迟执行，但不一定得到需要的长时间延迟。

不过，从另外角度来说，如果脚本能被延迟执行，那它就可以被放在底部了。

对此，马海祥的建议是：这点之前大家可能都没有意识到，不过在我们的XCube XUI中我们已经实施了这条法则，相信可以进一步提升页面的访问性能。

7、避免CSS表达式

CSS表达式是功能强大的(同时也是危险的)用于动态设置CSS属性的方式，IE从版本5开始支持CSS表达式，如backgourd-color: expression((new Date()).getHours()%2?”#B8D4FF”:”#F08A00”)，即背景色每个小时切换一次。

CSS表达式的问题是其执行次数超过大部分人的期望，不仅页面显示和resize时计算表达式，而且当页面滚屏，甚至当鼠标在页面上移动时都会重新计算表达式。

一种减少CSS表达式执行次数的方法是一次性表达式，即当第一次执行时就以明确的数值代替表达式，如果必须动态设置的话，可使用事件处理函数代替，如果您必须使用CSS表达式的话，请记住它们可能被执行上千次，从而影响页面性能（具体可查看马海祥博客《资深Web前端开发工程师教你如何优化CSS框架》的相关介绍）。

对此，马海祥的建议是：目前CSS的维护工作主要由UI人员负责，他们已经尽量在避免这种情况了。

8、把JavaScript和CSS放到外部文件中

上述很多性能优化法则都基于外部文件进行优化，现在，我们必须问一个问题：JavaScript和CSS应该包括在外部文件，还是在页面文件中？

在现实世界中，使用外部文件会加快页面显示速度，因为外部文件会被浏览器缓存，如果内置JavaScript和CSS在页面中虽然会减少HTTP请求次数，但增大了页面的大小。

另外一方面，使用外部文件，会被浏览器缓存，则页面大小会减小，同时又不增加HTTP请求次数。

因此，一般来说，外部文件是更可行的方式，唯一的例外是内嵌方式对主页更有效，如Yahoo!和My Yahoo!都使用内嵌方式，一般来说，在一个session中，主页访问此时较少，因此内嵌方式可以取得更快的用户响应时间。

对此，马海祥的建议是：ext2的代码作了很好的引导，目前前端开发人员都非常注意客户端模块的封装、重用，尽量以外部JS的方式提高代码的重用度，当然也要注意不要引入过多的外部资源，因为这违反了法则1。

目前CSS的封装也不错，但是主要是针对IE系列的解决方案，可以考虑引入YAML、blueprint等CSS框架，轻松解决浏览器兼容性问题。

另外，马海祥要提醒大家一点：把JavaScript和css文件放到外部，并不内嵌于网页，同时可以考虑把样式表放到头上把脚本文件放到底部。需要注意的是尽量不要使用css的表达式，他很容易让浏览器出现假死。

9、减少DNS查询次数

DNS用于映射主机名和IP地址，一般一次解析需要20～120毫秒，为达到更高的性能，DNS解析通常被多级别地缓存，如由ISP或局域网维护的caching server，本地机器操作系统的缓存（如windows上的DNS Client Service），浏览器，IE的缺省DNS缓存时间为30分钟，Firefox的缺省缓冲时间是1分钟。

减少主机名可减少DNS查询的次数，但可能造成并行下载数的减少，避免DNS查询可减少响应时间，而减少并行下载数可能增加响应时间，一个可行的折中是把内容分布到至少2个，最多4个不同的主机名上。

对此，马海祥的建议是：为了绕开浏览器对下载线程数的限制，我们对静态资源启用了多域名，但是这么做违反了该法则，不过，对windows IE来说，DNS的缓存可以缓解该问题。

10、最小化JavaScript代码

最小化JavaScript代码指在JS代码中删除不必要的字符，从而降低下载时间，两个流行的工具是#JSMin和YUI Compressor。

混淆是最小化于源码的备选方式，象最小化一样，它通过删除注释和空格来减少源码大小，同时它还可以对代码进行混淆处理，作为混淆的一部分，函数名和变量名被替换成短的字符串，这使得代码更紧凑，同时也更难读，使得难于被反向工程，Dojo Compressor (ShrinkSafe)是最常见的混淆工具。

最小化是安全的、直白的过程，而混淆则更复杂，而且容易产生问题，从对国外10大网站的调查来看，通过最小化，文件可减少21%，而混淆则可减少25%（具体可查看马海祥博客《推荐一种测试javascript执行性能和性能比较的方法》的相关介绍）。

除了最小化外部脚本文件外，内嵌的脚本代码也应该被最小化，即使脚本根据法则4被压缩后传输，最小化脚本刻减少文件大小5%或更高。

对此，马海祥的建议是：我们没有直接使用JS压缩，但是我们用的许多组件例如ext2、jquery等，已经在为我们实践该法则。

11、避免重定向

重定向功能是通过301和302这两个HTTP状态码完成的，如：

HTTP/1.1 301 Moved Permanently
　　Location: http://mahaixiang.cn/newuri
　　Content-Type: text/html

浏览器自动重定向请求到Location指定的URL上，重定向的主要问题是降低了用户体验。

一种最耗费资源、经常发生而很容易被忽视的重定向是URL的最后缺少/，如访问http://www.mahaixiang.cn/astrology将被重定向到http://www.mahaixiang.cn/astrology/，在Apache下，可以通过Alias，mod_rewrite或DirectorySlash等方式来解决该问题。

经验丰富的SA已经为我们考虑了这个问题，对此，马海祥的建议是：大家可以看看线上环境的Apache配置文件：httpd.conf。

12、删除重复的脚本文件

在一个页面中包含重复的JS脚本文件会影响性能，即它会建立不必要的HTTP请求和额外的JS执行。

不必要的HTTP请求发生在IE下，而Firefox不会产生多余的HTTP请求，额外的JS执行，不管在IE下，还是在Firefox下，都会发生。

一个避免重复的脚本文件的方式是使用模板系统来建立脚本管理模块，除了防止重复的脚本文件外，该模块还可以实现依赖性检查和增加版本号到脚本文件名中，从而实现超长的过期时间。

对此，马海祥的建议是：旧版本的Xplatform中这个问题比较严重，不过相信新版的XCube不会重蹈覆辙。

另外，提醒大家一点：一些javascript框架、javascript包一定要慎用，至少要问一下：用了这个js kit到底给我们多少方便，提高了多少工作效率，然后，再与它因为多余的、重复的代码带来的负面效果比较一下。

13、配置ETags

Etag（Entity tags）实体标签，这个tag和你在网上经常看到的标签云那种tag有点区别，这个Etag不是给用户用的，而是给浏览器缓存用的。

Etag是服务器告诉浏览器缓存，缓存中的内容是否已经发生变化的一种机制，通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上重新下载，这和“Last-Modified”的概念有点类似，很遗憾作为网页开发人员对此无能为力，他依然是网站服务器人员的工作范畴。

ETags是用于确定浏览器缓存中元素是否与Web server中的元素相匹配的机制，它是比last-modified date更灵活的元素验证机制。

ETag是用于唯一表示元素版本的字符串，它需被包括在引号中，Web server首先在response中指定ETag：

HTTP/1.1 200 OK
　　Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
　　ETag: "10c24bc-4ab-457e1c1f"
　　Content-Length: 12195

后来，如果浏览器需要验证某元素，它使用If-None-Match头回传ETag给Web server，如果ETag匹配，则服务器返回304代码，从而节省了下载时间：

GET /i/yahoo.gif HTTP/1.1
　　Host: mahaixiang.cn
　　If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
　　If-None-Match: "10c24bc-4ab-457e1c1f"
　　HTTP/1.1 304 Not Modified

ETags的问题在于它们是基于服务器唯一性的某些属性构造的，如Apache1.3和2.x，其格式是inode-size-timestamp，而在IIS5.0和6.0下，其格式是Filetimestamp:ChangeNumber。

这样同一个元素在不同的web server上，其ETag是不一样的，在多Web server的环境下，浏览器先从server1请求某元素，后来向server2验证该元素，由于ETag不同，所以缓存失效，必须重新下载。

因此，如果您未用到ETags系统提供的灵活的验证机制，最好删除ETag，删除ETag会减少http response及后续请求的HTTP头的大小，微软支持文章描述了如何删除ETags，而在Apache下，只要在配置文件中设置FileETag none即可。

对此，马海祥的建议是：自定义ETag的生成策略，以尽量减少探头规则的生成次数，由于不是采用服务器默认的ETag，不存在该问题，如果以前没有关注过的，赶快检查一下Apache中的配置。

14、缓存Ajax

现在的Ajax好像有点被神话了，好像网页只要Ajax了，那么就不存在效率问题了，其实这是一种误解，拙劣的使用Ajax不会让你的网页效率更高，反而会降低你的网页效率。

在马海祥看来，Ajax的确是个好东西，但是请不要过分的神话它，使用Ajax的时候也要考虑上面的那些准则。

另外，性能优化法则同样适用于web 2.0应用，提高Ajax的性能最重要的方式是使得其response可缓存，就象“法则3增加Expires Header”讨论的那样，以下其他法则同样适用于Ajax，当然法则3是最有效的方式。

马海祥博客点评：

网页设计和SEO技术结合是网络技术发展对网页设计师的新要求，95%的SEO技巧很简单，而最重要的5%是“经验”、“创意”和“人脉”，需要在工作中根据实际情况不断做出调整策略，并持之以恒地把SEO优化坚持下去。

本文为马海祥博客原创文章，如想转载，请注明原文网址摘自于http://www.mahaixiang.cn/znseo/1056.html，注明出处；否则，禁止转载；谢谢配合！

前端的性能对于一个Web应用来说非常重要，如果一个Web应用的页面加载速度非常快、对于用户的操作可以及时响应，那么产品的用户体验将会极大地提升。下图显示了页面加载速度对于用户体验的影响。

你的Web页面的速度是否已经足够快了？其实可能还有很多可以提升的地方。Google和雅虎也提出了一些Web应用的前端优化建议，并发布了一些工具，你可以逐一检验你的Web应用，以便达到更高的性能。

这些优化不仅仅可以给用户提供更好的体验，从开发者角度来说，进行优化还可以减少页面的请求数、降低请求所占的带宽、减少资源的浪费。

下面来看看Google和雅虎提供的Web页面优化最佳实践。

一、Google的Web优化最佳实践

1.  避免坏请求

有时页面中的HTML或CSS会向服务器请求一个不存在的资源，比如图片或HTML文件，这会造成浏览器与服务器之间过多的往返请求，类似于：

• 浏览器：“我需要这个图像。”
• 服务器：“我没有这个图像。”
• 浏览器：“你确定吗？这个文档说你有。”
• 服务器：“真的没有。”

如此一来，会降低页面的加载速度。因此，检查页面中的坏链接非常有必要，你可以通过 Google的PageSpeed工具 来检测，找到问题后，补充相应的资源文件或者修改资源的链接地址即可。

2.  避免CSS @import

使用 @import方法引用CSS文件可以能会带来一些影响页面加载速度的问题，比如导致文件按顺序加载（一个加载完后才会加载另一个），而无法并行加载。

你可以使用 CSS delivery工具 来检测页面代码中是否存在@import方法。比如，如果检测结果中存在

[css]  view plain copy

1. @import url("style.css")  

则建议你使用下面的代码来替代。

[html]  view plain copy

1. <link rel="style.css" href="style.css" type="text/css">  

3.  避免使用document.write

在JavaScript中，可以使用 document.write在网页上显示内容或调用外部资源，而通过此方法，浏览器必须采取一些多余的步骤——下载资源、读取资源、运行JavaScript来了解需要做什么，调用其他资源时需要重新再执行一次这个过程。由于浏览器之前不知道要显示什么，所以会降低页面加载的速度。

要知道，任何能够被document.write调用的资源，都可以通过HTML来调用，这样速度会更快。检查你的页面代码，如果存在类似于下面的代码：

[js]  view plain copy

1. document.write('<script src="another.js"></script>');  

建议修改为：

[html]  view plain copy

1. <script src="another.js"></script>  

4.  合并多个外部CSS文件

在网站中每使用一个CSS文件，都会让你的页面加载速度慢一点点。如果你有一个以上的CSS文件，你应该将它们合并为一个文件。

你可以通过  CSS delivery工具 来检测页面代码中的CSS文件，然后通过复制粘贴的方式将它们合并为一个。合并后记得修改页面中的引用代码，并删除旧的引用代码。

5.  合并多个外部JavaScript文件

大部分情况下，网站往往会包含若干个 JavaScript文件，但并不需要将这些文件都独立出来，其中有些是可以合并为一个文件的。

你可以通过 resource check工具 来检测页面中所引用的JavaScript文件数，然后可以通过复制粘贴的方式将多个文件合并为一个。

6.  通过CSS sprites来整合图像

如果页面中有6个小图像，那么浏览器在显示时会分别下载。你可以通过CSS sprites将这些图像合并成1个，可以减少页面加载所需的时间。

CSS sprites需要有两个步骤：整合图像、定位图像。比如你可以通过下面的代码来分别定位下面图像中的上下两部分。

[css]  view plain copy

1. .megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}  
2. .smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}  

7. 延迟JavaScript的加载

浏览器在执行JavaScript代码时会停止处理页面，当页面中有很多JavaScript文件或代码要加载时，将导致严重的延迟。尽管可以使用defer、异步或将JavaScript代码放到页面底部来延迟JavaScript的加载，但这些都不是一个好的解决方案。

下面是Google的建议。

[js]  view plain copy

1. <script type="text/javascript">  
2. function downloadJSAtOnload() {  
3. var element = document.createElement("script");  
4. element.src = "defer.js";  
5. document.body.appendChild(element);  
6. }  
7. if (window.addEventListener)  
8. window.addEventListener("load", downloadJSAtOnload, false);  
9. else if (window.attachEvent)  
10. window.attachEvent("onload", downloadJSAtOnload);  
11. else window.onload = downloadJSAtOnload;  
12. </script>  

这段代码的意思是等待页面加载完成后，然后再加载外部的“defer.js”文件。下面是测试结果。

8.  启用压缩/ GZIP

使用gzip对HTML和CSS文件进行压缩，通常可以节省大约50％到70％的大小，这样加载页面只需要更少的带宽和更少的时间。

你可以通过这个 Gzip压缩工具 来检测页面是否已经经过Gzip压缩。

9.  启用Keep-Alive

HTTP协议采用“请求-应答”模式，当使用普通模式（非KeepAlive模式）时，每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）；当使用 Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive功能避免了建立或者重新建立连接。

在HTTP 1.0中Keep-Alive默认是关闭的，需要在HTTP头中加入“Connection: Keep-Alive”，才能启用Keep-Alive；在 HTTP1.1中Keep-Alive默认启用，加入“Connection: close”可关闭。目前大部分浏览器都是用HTTP 1.1协议，也就是说默认都会发起Keep-Alive的连接请求了，所以是否能完成一个完整的Keep- Alive连接就看Web服务器的设置情况。

10.  将小的CSS和JavaScript代码内嵌到HTML中

如果你的CSS代码比较小，可以将这部分代码放到HTML文件中，而不是一个外部CSS文件，这样可以减少页面加载所需的文件数，从而加快页面的加载。同样，也可以将小的 JavaScript脚本代码内嵌到HTML文件中。

[html]  view plain copy

1. <style type="text/css">  
2. <!--CSS代码-->  
3. </style>  
4.   
5. <script type="text/javascript">  
6. <!--JavaScript代码-->  
7. </script>  

11.  利用浏览器缓存

在显示页面时，浏览器需要加载logo、CSS文件和其他一些资源。浏览器缓存所做的工作就是“记住”已经加载的资源，让页面的加载速度更快。

12.  压缩CSS代码

不管你在页面中如何使用CSS，CSS文件都是越小越好，这会帮助你提升网页的加载速度。你可以通过 Minify CSS工具 来压缩你的CSS代码。

压缩前：

[css]  view plain copy

1. body  
2. {  
3. background-color:#d0e4fe;  
4. }  
5. h1  
6. {  
7. color:orange;  
8. text-align:center;  
9. }  

压缩后：

[css]  view plain copy

1. body {background-color:#d0e4fe;}  
2. h1 {color:orange;text-align:center;}  

13.  尽量减少DNS查询次数

当浏览器与Web服务器建立连接时，它需要进行DNS解析，将域名解析为IP地址。然而，一旦客户端需要执行DNS lookup时，等待时间将会取决于域名服务器的有效响应的速度。

虽然所有的ISP的DNS服务器都能缓存域名和IP地址映射表，但如果缓存的DNS记录过期了而需要更新，则可能需要通过遍历多个DNS节点，有时候需要通过全球范围内来找到可信任的域名服务器。一旦域名服务器工作繁忙，请求解析时就需要排队，则进一步延迟等待时间。

因此，减少DNS的查询次数非常重要，页面加载时就尽量避免额外耗时。为了减少DNS查询次数，最好的解决方法就是在页面中减少不同的域名请求的机会。

你可以通过 request checker工具 来检测页面中存在多少请求，然后进行优化。

14.  尽量减少重定向

有时为了特定需求，需要在网页中使用重定向。重定向的意思是，用户的原始请求（例如请求A）被重定向到其他的请求（例如请求B）。

但是这会造成网站性能和速度下降，因为浏览器访问网址是一连串的过程，如果访问到一半而跳到新地址，就会重复发起一连串的过程，这将浪费很多的时间。所以我们要尽量避免重定向，Google建议：

• 不要链接到一个包含重定向的页面
• 不要请求包含重定向的资源

15.  优化样式表和脚本的顺序

Style标签和样式表调用代码应该放置在JavaScript代码的前面，这样可以使页面的加载速度加快。

[html]  view plain copy

1. <head>  
2. <meta name=description content="description"/>  
3. <title>title</title>  
4. <style>  
5. page specific css code goes here  
6. </style>  
7. <script type="text/javascript">  
8. javascript code goes here  
9. </script>  
10. </head>  

16.  避免JavaScripts阻塞渲染

浏览器在遇到一个引入外部JS文件的<script>标签时，会停下所有工作来下载并解析执行它，在这个过程中，页面渲染和用户交互完全被阻塞了。这时页面加载就会停止。

谷歌 建议 删除干扰页面中第一屏内容加载的JavaScript，第一屏是指用户在屏幕中最初看到的页面，无论是桌面浏览器、手机，还是平板电脑。

17.  缩小原始图像

如果无需在页面中显示较大的图像，那么就建议将图像的实际大小缩小为显示的大小，这样可以减少下载图像所需的时间。

18.  指定图像尺寸

当浏览器加载页面的HTML代码时，有时候需要在图片下载完成前就对页面布局进行定位。如果HTML里的图片没有指定尺寸（宽和高），或者代码描述的尺寸与实际图片的尺寸不符时，浏览器则要在图片下载完成后再“回溯”该图片并重新显示，这将消耗额外的时间）。

所以，最好为页面中的每一张图片都指定尺寸，不管是在HTML里的<img>标签中，还是在CSS中。

更多信息： https://developers.google.com/speed/docs/insights/rules

二、雅虎的Web优化最佳实践

1.  内容优化

• 尽量减少HTTP请求：常见方法包括合并多个CSS文件和JavaScript文件，利用CSS Sprites整合图像，Image map（图像中不同的区域设置不同的链接），内联图象（使用  data: URL scheme 在实际的页面嵌入图像数据）等。
• 减少DNS查找
• 避免重定向
• 使Ajax可缓存
• 延迟加载组件：考虑哪些内容是页面呈现时所必需首先加载的、哪些内容和结构可以稍后再加载，根据这个优先级进行设定。
• 预加载组件：预加载是在浏览器空闲时请求将来可能会用到的页面内容（如图像、样式表和脚本）。当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度。
• 减少DOM元素数量：页面中存在大量DOM 元素，会导致JavaScript遍历DOM的效率变慢。
• 根据域名划分页面内容：把页面内容划分成若干部分可以使你最大限度地实现平行下载。但要确保你使用的域名数量在2个到4个之间（否则与第2条冲突）。
• 最小化iframe的数量：iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。
• 避免404：HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应（例如404没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。

2. 服务器优化

• 使用内容分发网络（CDN）：把你的网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
• 添加Expires或Cache-Control信息头：对于静态内容，可设置文件头过期时间Expires的值为“Never expire（永不过期）”；对于动态内容，可使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求。
• Gzip压缩
• 设置ETag：ETags（Entity tags，实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。
• 提前刷新缓冲区：当用户请求一个页面时，服务器会花费200到500毫秒用于后台组织HTML文件。在这期间，浏览器会一直空闲等待数据返回。在PHP中，可以使用flush()方法，它允许你把已经编译的好的部分HTML响应文件先发送给浏览器，这时浏览器就会可以下载文件中的内容（脚本等）而后台同时处理剩余的HTML页面。
• 对Ajax请求使用GET方法：当使用XMLHttpRequest时，浏览器中的POST方法会首先发送文件头，然后才发送数据。因此使用GET最为恰当。
• 避免空的图像src

3. Cookie优化

• 减小cookie大小：去除不必要的coockie，并使coockie体积尽量小以减少对用户响应的影响
• 针对Web组件使用域名无关的Cookie：对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放静态组件是一个好方法，或者也可以在Cookie中只存放带www的域名。

4. CSS优化

• 将CSS代码放在HTML页面的顶部
• 避免使用CSS表达式：CSS表达式在执行时候的运算量非常大，会对页面性能产生大的影响
• 使用<link>来代替@import
• 避免使用Filters：IE独有属性AlphaImageLoader用于修正IE 7以下版本中PNG图片的半透明效果，但它的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。

5. JavaScript优化

• 将JavaScript脚本放在页面的底部
• 将JavaScript和CSS作为外部文件来引用：在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。
• 缩小JavaScript和CSS
• 删除重复的脚本
• 最小化DOM的访问：使用JavaScript访问DOM元素比较慢
• 开发智能的事件处理程序

6. 图像优化

• 优化图片大小
• 通过CSS Sprites优化图片
• 不要在HTML中使用缩放图片
• favicon.ico要小而且可缓存

7. 针对移动优化

• 保持组件大小在25KB以下：主要是因为iPhone不能缓存大于25K的文件（注意这里指的是解压缩后的大小）。
• 将组件打包成为一个复合文档：把页面内容打包成复合文本就如同带有多附件的Email，它能够使你在一个HTTP请求中获取多个组件。

更多信息：http://developer.yahoo.com/performance/rules.html（中文翻译）

三、一些工具

1.  Google PageSpeed

Google提供了 PageSpeed工具，这是一个浏览器插件，可以很好地应用上文中Google所提到的Web优化实践——帮助你轻松对网站的性能瓶颈进行分析，并为你提供优化建议。

• 在线分析你的网站
• 安装浏览器插件（ Chrome、 Firefox）
• 通过 Insights API在应用中嵌入PageSpeed功能

2.  雅虎 YSlow

YSlow是雅虎推出的一款浏览器插件，可以帮助你对网站的页面进行分析，并为你提供一些优化建议，以提高网站的性能。

• Firefox插件
• Chrome插件
• YSlow for Mobile/Bookmarklet
• 源码

3. 其他分析优化工具

• 蜘蛛模拟器：这个工具可以分析你的页面，并提供一些优化建议。
• 图像SEO工具：这个工具可以检查图片的alt标签，并提供一些优化建议。
• 请求检查器：找出页面中需要加载哪些资源和服务。
• 链接检查器：检查页面中内部、外部和无效链接。
• HTTP头检查：显示网页或资源的HTTP响应头。
• 社交检查器：检查页面中的社交组件，比如Google+、Facebook、Twitter、Linkedin和Pinterest。
• If modified检查器：检查页面是否接受 If-Modified-Since HTTP头。
• Gzip检查器：检查页面是否经过了Gzip压缩。
• CSS delivery工具：检查页面中所使用的CSS文件。
• 面包屑工具：可根据你输入的信息提供面包屑导航的代码。
• CSS压缩工具：用于压缩CSS代码。

通过以上的优化建议和优化工具，可以轻松找到影响你的Web页面性能的瓶颈，轻松实现Web页面性能的提升。如果你也有Web优化方面的经验，欢迎分享。

本文为CSDN编译整理，未经允许不得转载，如需转载请联系market#csdn.net(#换成@)