共计 3323 个字符，预计需要花费 9 分钟才能阅读完成。

网站快速加载，是提供良好用户体验的前提。然而，网站功能的不断增多，程序包的不断臃肿，导致网站访问时较大的下载量，最终影响了响应速度。没有一个用户喜欢等待，如何减少代码量，为网站减去过多负担，Craig Buckler 在 sitepoint 网站发表了一篇文章《10 Quick and Easy Fixes to Reduce Page Weight》，分享为网站减负的十个建议。下面为该文的编译内容。

2013 年，网站页面的重量增加了 32%，竟然达到了 1.7MB，包含 96 个独立 HTTP 请求。这只是一个平均数值，其中近一半的网站已经超过了这个数值。网站的过度臃肿正趋于流行，其中很大的责任在于 Web 开发者。

过于笨重的网站将严重影响网站的最终体验，主要表现在以下四个方面：

• 更大的下载量，导致更慢的用户体验。并不是每个人都拥有 20M 的网络连接，尤其是对于那些不发达地区。不管你的网站多么优秀，用户永远不希望等待。
• 移动 Web 访问正迅速发展，移动网民几乎占到所有网民的 1 /4。在典型的 3G 网络连接下，一个 1.7Mb 的网站加载需要近一分钟。如果你的网站无法高效工作于这些移动设备，那采用响应式 Web 设计技术又有什么用呢？
• 网站加载速度已被谷歌加入排名算法中。加载缓慢会降低网站排名，同时也会影响搜索引擎优化。
• 网站包含的代码越多，更新和维护它所花费的时间就会越长。

Craig Buckler 预言，2014 年网页的重量将会下降。那如何精简代码，为网站减负呢？Craig Buckler 给出了十条建议。这些建议中涉及到的技术均是大家熟知的。

1. 启用 GZIP 压缩

根据 W3Techs.com 上的数据显示，近一半的网站都未进行过压缩。在 Web 主机上，通过简单的服务器设置即可开启 GZIP 压缩。

2. 支持浏览器缓存

如果浏览器能容易地缓存一个文件，那它就无需反复下载该文件了。实现该功能的一个解决方案，就是在 HTTP 头中设置合适的 Expires Header、上一次修改时间或采用的 ETags。

你可通过配置服务器来自动完成以上工作。下面是 Apache 中的.htaccess 文件，其中的代码实现了“将所有图片缓存一个月”的功能。

12345678

ExpiresActive On ExpiresDefault "access plus 1 month"

3. 使用 CDN

浏览器限制了每个域中可同时处理的并发 HTTP 请求数量：4 至 8 个。如果你的网页需要从域中加载 96 个资源，那浏览器最多可设置 12 组并发请求。（因为文件大小并不同，这种情况实际上并不会发生，但该限制仍然适用。）

如若从另一个域中请求静态文件，则可使浏览器处理的 HTTP 请求数量加倍。此外，一个文件被调用后就会产生一个缓存文件，以供下一个调用它的网站使用。我们可选用 JavaScript 库（如 jQuery）和字体库，同时你也可以考虑专用的图片托管。

前面提到的三条建议可以加快网站的加载速度，下面的建议将帮助我们检查网站代码，以高效地减少网站重量。

4. 删掉没用的资源

网站一直在变革之中。如果你不再使用某组件，那就删掉与之关联的 CSS 和 JavaScript。如果它们包含在一个单独文件中，处理起来就会很简单。否则，你需要借助一些工具，如 Chrome 的 Audit 开发工具、JSLint、Dust-Me Selectors、CSS Usage、unused-css.com，也可构建 grunt-uncss 此类的工具。

5. 合并和压缩 CSS

理想的情况是只拥有一个 CSS 文件（如果你使用 RWD 以支持 IE 的老版本，那就需要两个 CSS 文件。）构建并维护几个单独的 CSS 文件也算合理，但在部署到产品服务器之前，你应该将它们集合在一起，并删掉那些不必要的空白区域。

Saas、LESS 和 Stylus 等预处理器可帮你完成这些痛苦的工作。Grunt.js、Gulp 等工具可自动化你的工作流。如果你更喜欢 GUI，可借助 Koala 提供的免费跨平台应用。

如果你觉得这些比较麻烦，也可手动通过命令行工具将 CSS 文件集中在一起，如在 Windows 中，可使用如下代码：

1	copy file1.css+file2.css file.css

在 Mac/Linux 中，可使用如下代码：

1	cat file1.css file2.css > file.css

最终文件经过在线 CSS 压缩工具（如 cssminifier.com、CSS Compressor & Minifieror 等）压缩后即可运行。

最后，请记住在头部（Head）加载所有 CSS，以便浏览器展示接下来的 HTML 元素，同时也可避免浏览器下次再重绘页面元素。

6. 压缩并合并 JavaScript

平均每个页面需加载 18 个 JavaScript 文件，所以我们要将自己编写的 JavaScript 代码进行合并和压缩。我们可以自己构建压缩工具，也可以使用在线工具，如 YUI Compressor、Closure Compiler 及 CompressorRater。

使用 JavaScript 压缩工具进行压缩，必须十分谨慎。你的代码有一点小问题，即便丢失了一个分号，压缩过程也可能会失败。无论如何，对 JavaScript 文件进行压缩，可减少 HTTP 请求数量，从而提高网站性能。

最好在 之前加载 JavaScript，这样可确保该脚本不会阻碍其它内容的加载，同时在该脚本被下载和执行之前，页面的内容已加载完毕，并可阅读了。

7. 使用正确的图片格式

错误地使用图片格式会增加网页的负载。图片格式通常有以下使用原则：

• 照片使用 JPG 格式；
• 其他的使用 PNG 格式。

当你有一些小图像，它们仅包含有限的几种色彩集，采用 GIF 格式，其压缩效果可能更好。本文暂不讨论向量图。

现在有大量免费的图形软件包，可用来转换图片的格式。其中像 XnView 允许你批处理这些文件。请记住下面两条原则：

JPG 为一种有损压缩格式，其质量介于 0（质量很差、更小的文件）至 100（质量最好，更大的文件）之间。介于 30 至 70 之间的大部分图片显示效果比较好。

PNG 支持 256 颜色表和 24 位的真彩色。如果你不需要透明，并能控制调色板，那 256 的 PNG 图像颜色模式可能压缩得更好。

8. 重整大图片的尺寸

即便是最入门级的智能手机上的照片机（三百万像素），其拍出来的照片往往太大而不适合在网站上显示。但大部分内容编辑者往往将图片直接从相机中直接上传到网站上。因此，我们需要一个可以自动调整图片尺寸的系统。

图片的尺寸永远不能超过它所在容器的最大值。如果网站模板的宽度最大为 800px，那图片的宽度就不能超过该值。一些高分辨率、Retina 显示屏，可显示宽度为 1600px 的图片，但这仍比从相机中直接输出的图片要小。

在减轻网页重量方面，图片尺寸的调整起着重要的作用。将图片尺寸缩小 50%，可节省 75% 的总空间，相当于减少了文件大小。

9. 进一步压缩图片

即便已将图片调整为正确的格式和尺寸，你仍可使用一些分析和优化图像的工具进一步压缩图片。这些工具包括 OptiPNG、PNGOUT、jpegtran 和 jpegoptim。大部分工具可独立安装，也可整合入你构建的过程中。另外，还有一些在线工具，如 Smush，它可以工作于云上。

10. 去掉不必要的字体

Web 字体对设计进行了重大改革，减少了基于图像的字体的使用。但是，使用传统字体后，网页的代码量往往会增加数百 KB。所以网站中这种字体的使用尽量控制在两、三种以内。

利用以上提到的方法，大部分网站可以将减去 30~50% 的重量。对于一般的网站，可以减掉 800KB 的代码量，访问速度可获明显提升。（编译：陈秋歌）

内容来自：10 Quick and Easy Fixes to Reduce Page Weight