提高网页加载速度的一些方法和技巧

网页的加载速度是评估网站质量一个重要指标，原因在于大多数用户能够容忍的网页加载时间只有几秒，如果超出了访客的忍受范围他们会毫不留情地关掉你的网页，所以网页载入速度会极大地影响网站的流量和访问。

以下总结了几种可以明显提高网站加载速度的初步简单技巧方式，如果你的网站存在载入速度慢的问题不妨以此为参考对网页做些初步优化。

1、使用良好的结构

可扩展 HTML (XHTML) 具有许多优势，但是其缺点也很明显。XHTML 可能使您的页面更加符合标准，但是它大量使用标记（强制性的和标记），这意味着浏览器要下载更多代码。

所以，事情都有两面性，尝试在您的网页中使用较少的XHTML代码，以减小页面大小。
如果您确实不得不使用XHTML，试着尽可能对它进行优化。

2、把CSS文件放在页面头部，JS文件放在底部

把CSS文件放在头部可以禁止逐步渲染，节省浏览器加载和重绘页面元素的资源，把JS文件放在页面底部可以避免代码执行前的等待时间，从而提升页面的加载速度。

3、删除任何不必要的元素

可能这是所有技巧中最显而易见的一个，但是它也是最容易忘记的一个技巧。如果您真正需要在网页上放置许多内容，考虑将网页分为2个、3个或更多的独立页面。

4、压缩和缩小JavaScript文件

您可以使用 GNU zip (gzip)来完成此任务,因为许多浏览器都支持这种压缩算法。

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

5、优化 CSS 文件

DIV+CSS是现在流利的网页布局方式，DIV定义了元素，CSS控制显示效果，所以往往我们会把CSS写到另外一个或多个外部链接CSS文件中，并且CSS文件代码也有很多行，我们可以使用一些CSS压缩工具来删除CSS文件中不必要的多余内容，如重复定义样式、空格等来瘦身。

如果经过适当优化和维护，CSS 文件不一定很大。例如，具有很多独立类的 CSS 文件会影响下载速度，与 JavaScript 文件一样，您需要优化 CSS 文件，使其包含所需的所有内容，同时保持合理的大小
(参考：网站CSS代码优化的7个原则）

6、不要使布局超载

坚持简约原则:少即是多。页面中充斥着各种类型的图像、视频、广告等,这大大违背实用性原则
(参考提高网站速度的6种网站前端优化方法)。

7、不要使用图像来表示文本

使用图像表示文本的最常见示例就是在导航栏中,美观的按钮更加具有吸引力,但是它们的加载速度很慢。

此外,图像仍然不能由搜索引擎直接索引,因此,使用图像进行导航不利于搜索引擎优化,当无需图像就可以通过大量CSS技巧创建漂亮的按钮时,绝不使用图像来表示文本。

8、尽可能避免使用表格

表格被用作网页的主要构建块，但是作为页面布局元素，使用表格现在被认为是糟糕的做法，有时候，您必须使用表格（并且它们被认为是显示表格数据的出色实践），如果是这样，明确地指定表格单元格、行和列的宽度和高度，否则，浏览器必须执行许多操作来计算如何显示它们，这会降低页面加载速度。

9、设置图像大小

与表格单元格、行和列一样,当您未明确设置图像大小时,浏览器需要执行计算来显示图像,这会降低处理速度。

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

10、使用 PNG 格式的图像

Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图像格式都已过时了：Portable Network Graphic (PNG) 是未来流行的格式。当然，您可以说 GIF 和 JPEG 已经消亡，或者 PNG 没有任何缺陷，但是所有事物都有各自的优缺点，PNG以最佳的文件大小提供了出色的质量，因此，如果进行选择的话，应该尽可能使用 PNG 图像
（参考： JPG、PNG和GIF图片的基本原理及优化方法

11、优化图像

图像能吸引访客的注意，但是每一张图片都需要从服务器下载到访客的电脑中，这无疑增加了页面的加载时间
（参考：实现网页图片预加载效果的3种技术方法）

因此，必须优化图像，优化方法包括适当减小图片尺寸，降低图片的颜色深度。

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

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

13、一些优化网页的技巧

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

例如：访客点击访问这样一个目录地址：http://www.mahaixiang.cn/SEO/，去打开这个目录下的index.html文档，当服务器收到请求后它需要消耗一些时间来分析这是一个文件还是一个目录，但是如果我们在最后加上一个斜杠（/），服务器就知道你是在访问一个目录地址，然后就直接加载默认文档index.html或index.php就行了，这样服务器就不用花时间来分析这个地址，也起到了一定加速的作用
（参考：提升网站页面打开速度的12个建议）

14、使用HTTP压缩,并始终使用小写的div和类名

可以使用HTTP压缩来减少服务器与浏览器之间的通信量,可以在Apache中配置HTTP压缩(.htaccess文件) ,或者可以将其包含到页面中(对于PHP,可以使用一个HTTP_ACCEPT_ENCODING 选项)

但是请注意:不是所有浏览器都支持压缩,即使是支持压缩的浏览器,压缩和解压缩都会加重处理器的负载,要在Apache中启用地毯式(blanket)压缩(即压缩所有文本和HTML) ,

使用以下命令:AddOutputFilterByType DEFLATE text/html text/plain text/xml
另外,考虑一下您想要压缩的内容。图像、音乐和视频在创建时已经进行了压缩,因此您可以将压缩对象限制为HTML、 CSS和JavaScript文件。

另一种减少压缩工作的技巧是使用小写形式的<div>元素和类名,由于大小写敏感性,并且使用的是无损压缩,<header>与<Header>不同,它们被压缩为两个不同的标记

15、尽可能延迟脚本加载

-种提升页面下载速度的潜在方式是将脚本放在页面的底部,使页面加载更迅速。

通常,浏览器只能(从同一个域)下载不超过两个并行对象,如果一个对象是一段JavaScript代码,那么在该脚本下载完之前,其他页面组件的下载将会暂停。

如果将JavaScript代码放在页面底部, (在大多数情况下)它将在最后下载,这时所有其他组件都已下载完。

16、对资产使用多个域来增加连接

CDN的另一个优势是它们是独立的域,因为您的浏览器将并发连接的数量限制到一个单一的域,因此无论何时加载一个页面,都很容易占满所有线程。因此,到其他资产的连接被延迟了。

然而,您的浏览器能够打开新线程或到其他域的连接,这样,从另一个域加载的任何资产都可以与其他所有资产同时加载。

17、减少使用重定向

重定向增加了额外的HTTP请求，甚至有时候链向多个域名或是不存在的页面，大大的增减了延迟时间，因此要减少重定向。

18、利用浏览器缓存

浏览器缓存是允许访客的浏览器缓存你网站页面副本的一个功能，访客再次访问时，直接从缓存中读取内容而不需要重新加载，优化网站的缓存系统会降低网站的带宽和托管费用。

19、压缩整合CSS、JS文件减少HTTP请求次数

压缩会移除一些不必要的字符,从而帮助减少文件大小和网页后续的加载时间。

现在的网页都有多个图片、CSS外部文件链接、Javascript外部脚本链接,所以当访问一个网页时浏览器需要多次向服务器请求这些文件,在请求和加载之间会产生不少的时间差,特别是一些网页上有多个小图片、图标按钮的网页,有多少图片,浏览器就需要请求多少将这些小文件,多将请求这些小图片文件将明显影响网页的加载速度。

所以,我们应该尽可能将小图片拼合一个PNG大图片上,然后通过坐标来显示图标,一次请求一个大图片比多次请求小图片速度要快不少。

同样,最好将CSS和Javascript尽可能地整合到一个文件中都有助于加快网页载入速度。

参考：（文章来源：马海祥博客-提高网页加载速度的一些方法和技巧）