精简代码，为网站减负的十大建议

网站快速加载，是提供良好用户体验的前提。然而，网站功能的不断增多，程序包的不断臃肿，致使网站访问时较大的下载量，最终影响了响应速度。没有一个用户喜欢等待，如何减小代码量，为网站减去过多负担，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