网站访问优化之-内容篇-减少HTTP请求 一

最小化HTTP请求

最终用户响应时间的80％用于前端。大部分时间都是在下载页面中的所有组件：图像，样式表，脚本，Flash等。减少组件数量又减少了呈现页面所需的HTTP请求数量。这是加快页面访问的关键。

减少页面中组件数量的一种方法是简化页面的设计。但是，有没有办法构建更丰富的内容页面，同时实现快速的响应时间？以下是一些减少HTTP请求数量的技术，同时还支持丰富的页面设计。

组合文件是一种通过将所有脚本合并为一个脚本来减少HTTP请求数量的方法，同样将所有的CSS合并到一个样式表中。当脚本和样式表因页面而异时，将文件组合起来更具挑战性，但是使这部分发布过程改进了响应时间。

CSS精灵是减少图像请求数量的首选方法。将您的背景图像组合成单个图像，并使用CSSbackground-image和background-position属性来显示所需的图像片段。

图像映射将多个图像组合成单个图像。整体大小大致相同，但减少HTTP请求的数量加速了页面。如果图像在页面中连续存在，则图像地图才起作用，例如导航栏。定义图像映射的坐标可能很乏味且容易出错。使用图像地图进行导航也无法访问，所以不推荐。

内嵌图像使用data:URL方案将图像数据嵌入到实际页面中。这可以增加您的HTML文件的大小。将内嵌图像合并到缓存的样式表中是减少HTTP请求并避免增加页面大小的一种方法。所有主流浏览器都不支持内联图片。

减少页面中的HTTP请求数量是开始的地方。这是提高首次访问者性能的最重要的指导方针。正如Tenni Theurer的博客文章“ Browser Cache Usage – Exposed！，您的网站的每日访问者的40-60％进来一个空的缓存。让您的页面快速访问这些首次访问者是更好的用户体验的关键。

使用内容交付网络

用户与Web服务器的距离对响应时间有影响。在多个分布在不同地理位置的服务器上部署您的内容将使您的网页从用户的角度更快加载。但是你应该从哪里开始呢？

作为实现地理上分散的内容的第一步，不要尝试重新设计您的Web应用程序以在分布式架构中工作。根据应用程序的不同，更改架构可能包括艰巨的任务，如同步会话状态和跨服务器位置复制数据库事务。尝试缩短用户与内容之间的距离可能会延迟或不能通过此应用程序体系结构步骤。

请记住，80-90％的最终用户响应时间用于下载页面中的所有组件：图像，样式表，脚本，Flash等。这是性能黄金法则。而不是从重新设计应用程序体系结构的艰巨任务开始，最好先分散您的静态内容。这不仅实现了响应时间的更大缩短，而且由于内容交付网络的缘故，这更容易实现。

内容传送网络（CDN）是分布在多个位置的网络服务器的集合，以更有效地向用户传送内容。选择用于将内容递送给特定用户的服务器通常基于网络邻近度的度量。例如，选择网络跳数最少的服务器或响应时间最快的服务器。

一些大型互联网公司拥有自己的CDN，但使用CDN服务提供商（如Akamai Technologies，EdgeCast或level3）是具有成本效益的。对于创业公司和私人网站来说，CDN服务的成本可能会很高，但是随着目标受众的规模越来越大，变得更加全球化，CDN是实现快速响应的必要条件。在雅虎，将静态内容从其应用程序Web服务器移到CDN（如上所述的第三方以及雅虎自己的CDN）的属性将最终用户的响应时间提高了20％甚至更多。切换到CDN是一个相对简单的代码更改，将显着提高您的网站的速度。

添加一个Expires或一个Cache-Control Header

这个规则有两个方面：

对于静态组件：通过设置远期Expires标题实现“永不过期”策略
对于动态组件：使用适当的Cache-Control标题来帮助浏览器提供有条件的请求

网页设计越来越丰富，这意味着更多的脚本，样式表，图像和Flash页面。首次访问您的页面可能需要发出多个HTTP请求，但是通过使用Expires头文件，您可以使这些组件可缓存。这可以避免后续页面浏览中不必要的HTTP请求。过期头文件通常与图像一起使用，但是它们应该用于包括脚本，样式表和Flash组件的所有组件。

浏览器（和代理）使用缓存来减少HTTP请求的数量和大小，使网页加载更快。Web服务器使用HTTP响应中的Expires标头告诉客户端可以缓存组件的时间。这是一个很远的将来Expires标题，告诉浏览器，这个回应将不会陈旧，直到2010年4月15日。

到期时间：2010年4月15日星期四20:00:00 GMT

如果您的服务器是Apache，请使用ExpiresDefault指令设置相对于当前日期的到期日期。这个ExpiresDefault指令的例子将Expires日期从请求时间设置为10年。

过期默认“访问加10年”

请记住，如果你使用了一个远期的Expires头文件，那么只要组件的改变，你就必须改变组件的文件名。在Yahoo! 我们经常使这一步成为构建过程的一部分：版本号被嵌入到组件的文件名中，例如yahoo_2.0.6.js。

使用远期未来只有在用户已经访问过您的网站后，才会影响页面浏览。当用户首次访问您的网站并且浏览器的缓存为空时，它对HTTP请求的数量没有影响。因此，这种性能改善的影响取决于用户多久访问一次带有缓冲区的页面。（一个“引导缓存”已经包含了页面中的所有组件。）我们在Yahoo! 并发现带有引导缓存的页面浏览量为75-85％。通过使用远期未来的Expires头，您可以增加浏览器缓存的组件数量，并在后续页面浏览中重新使用，而不会通过用户的Internet连接发送单个字节。