共计 3340 个字符，预计需要花费 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 文件，其中的代码实现了“将所有图片缓存一个月”的功能。
|
1
2
3
4
5
6
7
8
|
<IfModule mod_expires.c>ExpiresActive On <FilesMatch ".(jpg|jpeg|png|gif|svg)$">ExpiresDefault "access plus 1 month"</FilesMatch></IfModule> |
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 请求数量，从而提高网站性能。
最好在 </body> 之前加载 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
丸趣 TV 网 – 提供最优质的资源集合！
