20 种提升网页速度的技巧

检查 cookie 使用情况

　　cookie 可能是很小的文件，但是浏览器仍然需要下载它们。较大的 cookie 所需的下载时间更长，进而增加了浏览器加载网页的时间。正因为如此，尽可能缩小 cookie 来最小化对浏览器响应时间的影响非常重要。

　　此外，设置一个较早的 expire 日期或者根本不设置 expire 日期，会缩短响应时间。

不要包含不必要的 JavaScript 代码，尽可能将其外部化

　　与 cookie 类似，JavaScript 文件的下载也需要时间，这不可避免地会降低整个页面的加载速度。因此，明智地使用 JavaScript（仅在真正必要时才使用）并优化脚本的大小和速度。

　　缩短 JavaScript 下载时间的另一种方式是使用外部文件，而不是包含脚本内联。这种方法也适用于 CSS，因为浏览器会缓存外部化的文本，而（在 HTML 页面自身中）以内联方式编码的 CSS 或 JavaScript 每次都会随 HTML 一起加载。要通过在 HTML 中引用 CSS 和 JavaScript 代码来外部化它们，可以使用具有以下形式的代码：

<link href="/stylesheets/myStyle.css" media="all" rel="Stylesheet" type="text/css" />
   <script src="/javascripts/myJavascript.js" type="text/javascript"></script>

删除任何不必要的元素

　　可能这是所有技巧中最显而易见的一个，但是它也是最容易忘记的一个技巧。我曾经提到过 “少即是多”：这不仅是为了真正吸引更广泛的用户，还意味着需要下载和处理的东西更少。如果您真正需要在网页上放置许多内容，考虑将网页分为 2 个、3 个或更多的独立页面。

一些优化网页的技巧

　　可以使用许多方法来优化您的网页，包括压缩 JavaScript 文件，使用超文本传输协议（Hypertext Transfer Protocol，HTTP）压缩，以及设置图像大小。

压缩和缩小 JavaScript 文件

　　JavaScript 文件可能非常大，这意味着在某些情形中，它们的下载时间可能比所有其他组件下载时间之和还长。解决此问题的一种方法是压缩 JavaScript 文件。您可以使用 GNU zip (gzip) 来完成此任务，因为许多浏览器都支持这种压缩算法。

　　另一种替代方法是缩小文件。这种方法删除代码中所有不必要的字符，比如制表符（tab）、新行和空格。它删除代码中的注释和空白，进一步缩小文件大小。外部和内部样式表都可以缩小。两种最流行的缩小工具是 JSMin 和 YUI Compressor（参见 参考资料）。

使用 HTTP 压缩，并始终使用小写的 div 和类名

　　可以使用 HTTP 压缩来减少服务器与浏览器之间的通信量。可以在 Apache 中配置 HTTP 压缩（.htaccess 文件），或者可以将其包含到页面中（对于 PHP，可以使用一个 HTTP_ACCEPT_ENCODING 选项）。但是请注意：不是所有浏览器都支持压缩。即使是支持压缩的浏览器，压缩和解压缩都会加重处理器的负载。

　　另外，考虑一下您想要压缩的内容。图像、音乐和视频在创建时已经进行了压缩，因此您可以将压缩对象限制为 HTML、CSS 和 JavaScript 文件。

　　另一种减少压缩工作的技巧是使用小写形式的 <div> 元素和类名。由于大小写敏感性，并且使用的是无损压缩，<header> 与 <Header> 不同，它们被压缩为两个不同的标记。在下面的例子中，对于压缩程序来说，Important 类与 important 类是不同的，这意味着对于压缩程序，它们表示不同的对象，因此被分别压缩为两段不同的文本。

<div class="Important">read this!</div>
<div class="important">This will cost you some valuable load time</div>

　　留意细节似乎无关紧要。但是当您优化文件时，所有细微的细节都应考虑在内。

　　设置图像大小

　　与表格单元格、行和列一样，当您未明确设置图像大小时，浏览器需要执行计算来显示图像，这会降低处理速度。此外，在某些情形下，图像大小的计算结果可能不正确，因此图像会发生变形。

　　将 CSS 图像映射用于装饰功能

　　使用图像映射代替多个图像，这是另一种缩短加载时间的方式，因为同时下载图像的各个独立部分能够加快整个页面的下载进度。或者，您可以使用某种名为 CSS sprites 的工具（参见 参考资料）。CSS sprites 可帮助减少 HTTP 请求的数量。一个图像可以包含装饰或布置页面所需的所有图像元素。您使用 CSS 来选择（通过调用某些位置和维度）用于特定元素的映射。