网站快速加载，是提供良好用户体验的前提。然而，网站功能的不断增多，程序包的不断臃肿，导致网站访问时较大的下载量，最终影响了响应速度。没有一个用户喜欢等待，如何减少代码量，为网站减去过多负担，Craig Buckler在sitepoint网站发表了一篇文章《10 Quick and Easy Fixes to Reduce Page Weight》，分享为网站减负的十个建议。下面为该文的编译内容。 2013年，网页文件大小增加了32%，竟然达到了1.7Mb，包含96个独立HTTP请求。这只是一个平均数值，其中近一半的网站已经超过了这个数值。网站的过度臃肿正趋于流行，其中很大的责任在于Web开发者。 过于笨重的网站将严重影响网站的最终体验，主要表现在以下四个方面：
Craig Buckler预言，2014年网页文件大小将会下降。那如何精简代码，为网站减负呢？Craig Buckler给出了十条建议。这些建议中涉及到的技术均是大家熟知的。 1.启用GZIP压缩 根据 W3Techs.com上的数据显示，近一半的网站都未进行过压缩。在Web主机上，通过简单的服务器设置即可开启GZIP压缩。 2.支持浏览器缓存 如果浏览器能容易地缓存一个文件，那它就无需反复下载该文件了。实现该功能的一个解决方案，就是在HTTP头中设置合适的 Expires Header、上一次修改时间或采用的 ETags。 你可通过配置服务器来自动完成以上工作。下面是Apache中的.htaccess文件，其中的代码实现了“将所有图片缓存一个月”的功能。 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中，可使用如下代码：
在Mac/Linux中，可使用如下代码：
最终文件经过在线CSS压缩工具（如 cssminifier.com、 CSS Compressor & Minifieror等）压缩后即可运行。 最后，请记住在头部（Head）加载所有CSS，以便浏览器展示接下来的HTML元素，同时也可避免浏览器下次再重绘页面元素。 |
