网站页面精简的10个优化技巧

据调查，网页大小在2013年平均增长了32%，平均达到了1.7M，单独的HTTP请求达到96个，说实话，这是一个令人震惊的数字，而且这只是个平均值，有一半的网站会大于这个值。

那么，一个“页面超重”的网站有什么影响呢？具体来说，有以下4点：

①、网站代码越多，用户下载的就越多，加载速度就会越慢。在国内，并不是每个人都能享受20M的宽带，每一个开发者心里都很清楚，用户不愿意等。

②、众所周知，移动互联网发展迅速，对于2G网络来说，加载1.7M的页面甚至需要一分钟时间。

③、影响搜索引擎抓取速度将会对网站排名造成很大影响。

④、对于开发者来说，代码量越大，就越不容易更新和维护。

如今已经有很多人开始关注这个问题，并出现了很多优化的工具，而且这些技术都非常容易上手，不需要花太多时间，也不需要重新开发。

在本文中，马海祥会给大家一些建议，虽说前三个建议实际上不能给“网页减肥”，但它们仍能有效的加快网页加载速度。

1、用GZIP格式压缩

gzip是GNUzip的缩写，它是一个GNU自由软件的文件压缩程序。它是Jean-loupGailly和MarkAdler一起开发的，第一次公开发布版本是1992年10月31日发布的版本0.1，1993年2月发布了版本1.0。

我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP格式的，现今已经成为Internet上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术，大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。

这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。

一般对纯文本内容可压缩到原大小的40%，这样传输就快了，效果就是你点击网址后会很快的显示出来，当然这也会增加服务器的负载，一般服务器中都安装有这个功能模块的。

根据W3C组织调查，大部分的网站都没有启用压缩功能。

2、支持浏览器缓存

如果浏览器支持缓存，我们就不用重复下载网页资源，最简单的设置缓存方法是在响应头中添加相应的内容，包括：Expires header，Last-Modified等。

你可以可以通过配置服务器来自动添加这些属性，比如你在Apache服务器中配置缓存所有的照片一个月:

<IfModule mod_expires.c>
　　ExpiresActive On
　　<FilesMatch "\.(jpg|jpeg|png|gif|svg)$">
　　ExpiresDefault "access plus 1 month"
　　</FilesMatch>
　　</IfModule>

3、使用内容分发网络 (CDN)

CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。

CDN有别于镜像，因为它比镜像更智能，或者可以做这样一个比喻：CDN=更智能的镜像+缓存+流量导流。

因而，CDN可以明显提高Internet网络中信息流动的效率，从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等问题，提高用户访问网站的响应速度。

为更好地理解CDN，让我们看一下CDN的工作流程，当用户访问已经加入CDN服务的网站时，首先通过DNS重定向技术确定最接近用户的最佳CDN节点，同时将用户的请求指向该节点。

当用户的请求到达指定节点时，CDN的服务器（节点上的高速缓存）负责将用户请求的内容提供给用户。

具体流程为: 用户在自己的浏览器中输入要访问的网站的域名，浏览器向本地DNS请求对该域名的解析，本地DNS将请求发到网站的主DNS，主DNS根据一系列的策略确定当时最适当的CDN节点，并将解析的结果（IP地址）发给用户，用户向给定的CDN节点请求相——应网站的内容。

以上三个方法可以有效地加快页面的访问速度（更多的方法可查看马海祥博客《提升网站页面打开速度的12个建议》相关介绍），现在我们将对你的代码进行诊断，帮助我们给页面减肥。

4、删除不需要的资源

当你不再需要一个组件的时候，你应该删掉它的CSS和JavaScript代码，如果这些代码都单独放在一个文件中，那删掉它们也不是难事，但如果已经没有用的代码和其它代码在一个文件中，那你肯定要费不少精力去删掉它们。

这个时候你就需要使用第三方的工具来帮你一键解决，比如JSLint，Dust-Me Selectors，CSS Usage或是像grunt-uncss一样的构建工具。

5、style和font重复定义的沉余代码

要充分利用好CSS代码定义自己的颜色大小等，有些网站既用了CSS代码定义了之后又去使用style或者是font这样的代码进行定义，这样就无形中增加了无用代码，容易造成代码冗余，因此我们要对这样的代码进行压缩，实现代码精简。

6、通用和最小化CSS

理想情况下，需要一个单独的CSS文件，让每个页面都调用这一个布局，当然，如果你想要支持老版本的IE，你就得多弄一个CSS文件。

另外，马海祥还要提醒大家一点：当你把它们构建到服务器上之前，你应该把代码间所有不必要的格式都删掉。

有很多预处理工具都可以帮你解决这件麻烦事，比如Sass，LESS和Stylus。

有一些方法可以帮助你直接合并多个CSS文件，在Windows上：

copy file1.css+file2.css file.css

在Mac或Linux上：

cat file1.css file2.css > file.css

你可以把得到的CSS文件再经过在线的CSS压缩工具删除格式化。

最后，在head标签中加载所有的CSS，这样浏览器就知道你的页面样式不用多次重绘了。

7、通用和最小化的JavaScript

利用外部文件，我们可以用Javascript代码和CSS代码放在外部文件里面，在我们的HTML代码里面加上调用代码进行调用即可，如果打开一个网站去检查它的源文件，前面如果有大量的Javascript代码和CSS代码就容易使得网站有用的内容文字部分推到后面去了，是不利于搜索引擎抓取的。

据马海祥博客收集的数据显示：平均每个页面加载了18个javascript文件，虽然把像jQuery这样的库文件单独分开非常实用，但是你自己的JavaScript代码应该保持通用和最小化。

同样很多第三方的工具可以帮你解决这样事情，比如YUI Compressor，Closure Compiler和我最喜欢用的The JavaScript CompressorRater，简化的JavaScript代码会加快网页的访问速度，减少HTTP请求次数。

最后，最好在HTML的body标签后放置JavaScript引用代码，这样能保证JavaScript代码不影响到其它内容的加载。

8、减少页面嵌套的表格

对于表格要尽量少使用，尤其是嵌套的表格部分，虽然CSS排版使得我们编写代码更加的精简容易，但往往也是少不了表格的使用的，我们可以不去避免，但一定要减少使用多层嵌套的表格，不要产生没有用的代码。

9、网站图片的优化

对于一些图片站来说，加载错误的图片格式会对你的网页造成很大影响，所以，马海祥建议图片站的站长一定要多对图片做些优化。

（1）、图片优化原则

一般来说选取图片我们应用遵循如下原则：

①、照片使用JPG格式。

②、其它所有的图片都使用PNG格式（具体可查看马海祥博客《JPG、PNG和GIF图片的基本原理及优化方法》的相关介绍）。

（2）、调整大图的大小

目前智能机所拍出的照片越来越大，你不可能把原照片直接展示在页面中，普通的编辑器都会直接上传原图，这样会让页面的加载速度慢到另一个级别，在正常的照片处理中，一般都没有必要给用户高质量的图片展示，所以，你需要一个自动调整图片大小的工具。

需要注意的是，图片的尺寸是不能超过容量的大小的，这样一来页面加载了全图，却无法展示出来，现在照片的尺寸基本上都超过电脑显示屏的尺寸了。

图片的大小在网页总大小中占很大的比重，图片减小50%会导致整体页面大小减少75%，所以你应该认真解决一下图片的加载（具体可查看马海祥博客《交互设计的三大隐形机制：加载、刷新和缓存》的相关介绍）。

（3）、进一步压缩图片

仅仅调优图片的大小是不够的，你应该通过第三方工具对图片进行分析，进一步压缩图片。

比较好用的工具有OptiPNG，PNGOUT，jpegtran和jpegoptim，这些工具大都能安装成独立的工具或是整合到开发过程中，另外像Smush这样的工具，还可以直接在云端处理。

10、删除不必要的字体和注释

Web fonts已经彻底改变了字体的设计，它减少了很多不必要的文本，然而，目前的字体仍然会给你的网页带来多余的字节。

如果你使用超过两种字体，这就已经开始对性能造成影响了。

网页代码尽量少用注释，我们知道一段程序里面加上注释能够便于我们快速找到和理解具体代码对应的功能，对于编程人员修改网页是有帮助的，但是这样的代码对于搜索引擎来说是没有任何的意义的，只能说是噪声，因此我们要减少网页代码里面出现的注释部分。

我相信大部分网站都可以通过以上的优化减小大概30%-50%的重量，但是身为一个完美主义的开发者这是远远不够的，我们在接下来的系列文章中会继续对网站瘦身进行深入研究。

马海祥博客点评：

搜索引擎蜘蛛在搜索和爬行我们网站的时候，除了有效地的信息代码之外，其它的基本上对蜘蛛来说都是一个坎坷，垃圾代码过多，只能增加蜘蛛爬行提取网站文字内容的困难度，为了方便搜索引擎提取我们的网站，我们需要尽量降低搜索引擎爬行网站的时候的坎坷，方便蜘蛛更容易提取有效地信息，所以最简单的方法就是我们精简html代码，使有效地文字内容所占的比例较高。