优化网页加载速度

一、使用良好的结构

比如说 XHTML 具有很大的优势，至少你的页面会更加的符合标准！但是他大量的使用了标记（ , 等），而这就意味着浏览器需要下载更多的代码，所以尝试在你的页面中使用较少的 XHTML，减少页面的大小。

二、尽量减少 HTTP 的请求次数

终端用户响应的时间中，有 80% 用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash 等。通过减少页面中的元素可以减少 HTTP 请求的次数。这是提高网页速度的关键步骤。

减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少 HTTP 请求次数同时又可能保持页面内容丰富的技术。

合并文件是通过把所有的脚本放到一个文件中来减少 HTTP 请求的方法，如可以简单地把所有的 CSS 文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。

3. 优化网页图片文件

你的网页一定有图片，加载一个网页往往图片的总尺寸是最大的，特别是那些颜色丰富的背景图片和大副广告图片。所以一般要在同等图片质量的情况下要尽可能地 减小图片尺寸。在 Photoshop 中我们可以用保存为 Web 图片的选项试一下。图片也有几种常用的文件格式。如 JPEG 一般是用来存储照片或全彩色图片 的，比如照片、屏幕截图等。GIF 图片格式的颜色要比 JPEG 少，适合做小图，如制作按钮、Logo 等，另外 GIF 支持动态效果。PNG 跟 GIF 比较相 似，但它的尺寸较大，支持的颜色也比 GIF 要多，并且 PNG 支持背景透明。我们可以试试使用一种不同的格式保存图片试下，如将 PNG 和 JPEG 换成 GIF 试试。

4. CSS Sprites 是减少图像请求的有效方法

把所有的背景图像都放到一个图片文件中，然后通过 CSS 的 background-image 和 background-position 属性来显示图片的不同部分。

图片地图是把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少 HTTP 请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才能使用，如导航栏。确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法；

内联图像是使用 data:URL scheme 的方法把图像数据加载页面中。这可能会增加页面的大小。把内联图像放到样式表（可缓存）中可以减少 HTTP 请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。减少页面的 HTTP 请求次数是你首先要做的一步。这是改进首次访问用户等待时间的最重要的方法。如同 Tenni Theurer 的他的博客 Browser Cahe Usage – Exposed! 中所说，HTTP 请求在无缓存情况下占去了 40% 到 60% 的响应时间。

关于 CSS Sprites 后续我会尝试使用下，如果有什么心得还是会分享。

5. 合并 Js 文件和 CSS

将 JS 代码和 CSS 样式分别合并到一个共享的文件，这样不仅能简化代码，而且在执行 JS 文件的时候，如果 JS 文件比较多，就需要进行多次 “Get” 请求，延长加载速度，将 JS 文件合并在一起后，自然就减少了 Get 请求次数，提高了加载速度。

6. 懒加载技术的应用

延迟显示可见区域外的内容，为了确保用户可以更快地看见可见区域的网页可以延迟加载或展现可见区域外的内容，为了避免页面变形，可以使用占位符标签制定正确的高度和宽度。比如 WP 的 jQueryImage LazyLoad 插件就可以在用户停留在第一屏的时候，不加载任何第一屏以下的图片信息，只有当用户把鼠标往下滚动的时候，这些图片才开始加载。这样很明显提升可见区域的加载速度，提高用户体验。

7. 延迟加载和执行非必要脚本

网页中有很多脚本是在页面完全加载完前都不需要执行的，可以延迟加载和执行非必要脚本。这些脚本可以在 onload 事件之后执行，避免对网页上重要内容的呈现造成影响。这些脚本可能是你自己网页的甲苯，往往更多的是一些第三方脚本，这样的有很多，比如评论、广告、智能推荐、百度云图、分享等等，这些完全可以等主体内容加载完后再执行。

8. 使用 AJAX

AJAX 即 “Asynchronous Javascript +XML“，是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页(不使用 AJAX) 如果需要更新内容，必须重载整个网页面。

现在的 Ajax 好像有点被神话了，好像网页只要 Ajax 了，那么就不存在效率问题了。其实这是一种误解。拙劣的使用 Ajax 不会让你的网页效率更高，反而会降低你的网页效率。Ajax 的确是个好东西，但是请不要过分的神话它。使用 Ajax 的时候也要考虑上面的那些准则。

9. 精简代码

这个可以说是最直接的一个方法，也是用得比较多的，对网页代码进行瘦身，删除不必要的沉冗代码，比如不必要的空格、换行符、注释等，包括 JS 代码中的无用代码也需要清除。其中对于注释代码的清除可能有些人存在误区，甚至有的在里面堆砌关键词。

10. 使用 Progressive JPEGs

ProgressiveJPEGs 图片是 JPEG 格式的一个特殊变种，名为 “高级 JPEG”。在创建高级 JPEG 文件时，数据是这样安排的：在装入图像时，开始只显示一个模糊的图像，随着数据的装入，图像逐步变得清晰。它相当于交织的 GIF 格式的图片。高级 JPEG 主要是考虑到使用调制解调器的慢速网络而设计的，快速网络的使用者通常不会体会到它和正常 JPEG 格式图片的区别。对于网速比较慢的用户，这无疑有很好的体验。

11. 压缩文本和图片

压缩技术如 gzip 可以有效减少页面加载的时间。包括 HTML，XML，JSON(JavaScript 对象符号)，JavaScript 和 CSS 等，压缩率都可以在大小 70% 左右。文本压缩用得比较多，一般直接在空间开启就行，而图片的压缩就比较随意，很多都是直接上传，其实还有很大的压缩空间。

12. 图片使用 height 和 width 属性

你会给每个图片加上 height 和 width 属性吗？这两个属性可以让浏览器在加载图片之前就知道图片的长和宽，并预留出指定的长宽待图片加载后显示。如 果没有这两个属性，浏览器还需要在读取图片成功后再处理一次页面布局样式，这无疑减慢了网页加载速度。所以在固定图片大小的情况下最好都使用上长和宽属性。

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

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

AddOutput
FilterByType
DEFLATE
text/html
text/plain
text/xml

另外，考虑一下您想要压缩的内容。图像、音乐和视频在创建时已经进行了压缩，因此您可以将压缩对象限制为 HTML、CSS 和 JavaScript 文件。另一种减少压缩工作的技巧是使用小写形式的