YSlow!如何提高网页的效率（上篇）――提高网页效率的14条准则

日期：2013-12-16 来源：攀枝花惠康网络公司

网站最根基的工具是什么？

网站最根基的工具是什么？
Wait：0.117s
――内容？seo（seo）？UE（用户体验）？都不合错误！是速度！
内容再丰硕的网站，如不美观慢到无法访谒也是毫无意义的； seo做的再好的网站，如不美观搜索蜘蛛抓不到也是空费； UE设计的再人道化的网站，如不美观用户连看都看不到也是空口说。
所以网页的效率绝对是最值得关注的方面。若何才能提高一个网页的效率呢？Steve Souders(Steve Souders的资料http://www.oreillynet.com/pub/au/2951)提出的提高网页效率的14条准则，而这些准则也将是我们下篇中介绍到的YSlow工具的理论基本：

Make Fewer HTTP Requests
Use a Content Delivery Network
Add an Expires Header
Gzip Components
Put CSS at the Top
Move Scripts to the Bottom
Avoid CSS Expressions
Make JavaScript and CSS External
Reduce DNS Lookups
Minify JavaScript
Avoid Redirects
Remove Duplicate Scripts
Configure ETags
Make Ajax Cacheable

这里我们将一一的讲解这些准则,对其中开发者慎密亲密相关的准则我将具体讲解。小弟小我手艺其实有限，错误和蒙昧在所难免，还请高人指点。

首先来讲讲什么是Etag吧。Etag（Entity tags ）实体标签。这个tag和你在网上经常看到的标签云那种tag有点区别。这个Etag不是给用户用的，而是给浏览器缓存用的。Etag是处事器告诉浏览器缓存，缓存中的内容是否已经发生转变的一种机制。经由过程Etag，浏览器就可以知道此刻的缓存中的内容是不是最新的，需不需要年夜头年夜处事器上年夜头下载。这和“Last-Modified”的概念有点近似。很遗憾作为网页开发人员对此力所不及。他依然是网站处事器人员的工作规模。如不美观，你对此有乐趣，可以咨询贵公司的网站处事器打点员。

第十四条：Make Ajax Cacheable 膳缦沔的准则也合用Ajax

80%的用户响应时刻都是华侈在前端。而这些时刻首要又是因为下载图片、样式表、JavaScript剧本、flash等文件造成的。削减这些资本文件的Request请求数将是提高网页显示效率的重点。
这里仿佛有个矛盾，就是如不美观我削减了良多的图片，样式，剧本或者flash，那么网页岂不是光秃秃的，那多灾看呢？其拭魅这是一个曲解。我们只是说尽量的削减，并没有说完全不能使用。削减这些文件的Request请求数，当然也有一些技巧和建议的：

1：用一个年夜图片庖代多个小图片。

这简直有点倾覆传统的思维了。以前我们一向觉得多个小图片的下载速度之和会小于一个年夜图片的下载速度。可是此刻操作httpwatch工具的对多个页面进行剖析后的结不美观剖明事实并不是这样。
第一张图是一个巨细为40528bytes的337*191px的年夜图片的剖析结不美观。
第二张图是一个巨细为13883bytes的280*90px的小图片的剖析结不美观。

一个巨细为40528bytes的337*191px的年夜图片的剖析结不美观（点击图片可以查看完全年夜图片）

我以前犯了一个错误，你在看我《样式表的组织与规划》的系列文章中会知道。那时，我为了便利组织和规划样式表，将用于分歧用途的样式表文件分分开来，形成分歧的css文件。然后在页面中按照需要引用多个css文件。按照“尽可能的削减HTTP的Request请求数”准则我们知道，那样简直是不合理的，因为那样会发生更多的HTTP的Request请求数。年夜而降低网页的效率。所以，年夜提高网页效率的角度上而言，我们仍是应该将所有的css写在统一个css文件中。可是问题又来了。那么怎么来很好的组织和规划样式表呢？这简直是个矛盾。我此刻的做法是采用两套版本。编纂版和发布版。编纂版仍然使用多个css文件以便于规划和组织。而等到发布的时辰，再将多个css文件合并到一个文件中去，年夜而达到削减HTTPRequest请求数的目的。

3：合并你的javascript文件。

Wait：0.163s

所以如不美观可能仍是使用年夜图片来替代过多的琐碎的小图片吧。这也是为什么翻转门的效率要高于图片替代实现的滑动门的原因。

第一张年夜图片破耗时刻为：
Blocked：13.034s
Send：0.001s
Receive：4.596s
也恰是这点，我提醒巨匠一些，一些javascript框架、javascript包必然要慎用。至少要问一下：用了这个js kit 到底给我们若干好多便利，提高了若干好多工作效率。然后，再与它因为多余的、一再的代码带来的负面效不美观斗劲一下。

第十三条：Configure ETags 设置装备摆设你的实体标签

TTFB：0.164s
NetWork：4.760s
功耗时：17.795s
真正用于传输年夜文件破耗的时刻为Reveive时刻，即4.596s，年夜都的时刻是用来检索缓存和确定链接是否有用的Blocked时刻，供破耗13.034s，占总时刻的73.2%。

第二张小图片破耗时刻为：
Blocked：16.274s
Send：小于0.001s
Receive：0.397s
TTFB：0.118s
鉴于这个不是我们开发人员力所能及的准则，所以这里也就不多言了。

NetWork：0.516s
功耗时：16.790s
真正用于传输文件的破耗时刻是Reveive时刻，即0.397s，这简直要比适才年夜文件的4.596s小良多。可是他的Blocked时刻为16.274s，占总时刻的97%。

如不美观这些数据还不够说服你的话，让我们看看下面这张图。这里列出了某个网页中所有图片中的破耗时刻示意图。当然，琅缦沔的图片有年夜有小，规格纷歧。

文章来源：攀枝花惠康网络公司

惠康网络，是一家专业从事攀枝花网站建设，攀枝花网站制作，攀枝花网站设计公司，提供网站建设一条龙服务（网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广），惠康网络立足攀枝花，辐射全中国，攀枝花惠康网络的客户已经遍布国内各地大中小城市，我们高效优质的网站建设服务深受用户好评。