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

Dear 丶 2022-08-21 01:18 211阅读 0赞

内容再丰富的网站，如果慢到无法访问也是毫无意义的；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][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]将被重定向到[http://www.mahaixiang.cn/astrology/][http_www.mahaixiang.cn_astrology 1]，在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][http_www.mahaixiang.cn_znseo_1056.html]，注明出处；否则，禁止转载；谢谢配合！

[http_www.mahaixiang.cn_zyxz_zxgj_cssys.html]: http://www.mahaixiang.cn/zyxz/zxgj/cssys.html
[http_www.mahaixiang.cn_astrology]: http://www.mahaixiang.cn/astrology
[http_www.mahaixiang.cn_astrology 1]: http://www.mahaixiang.cn/astrology/
[http_www.mahaixiang.cn_znseo_1056.html]: http://www.mahaixiang.cn/znseo/1056.html