网站快速瘦身十招，帮你增进用户体验

一个网站从建立之初便由用户不断的添加数据，随着年月的积累，旧的代码架构和服务器的未及时升级，从而形成了过于笨重的网站，最终影响到访客的使用体验。相关数据显示，在过去的2013年里，平均每个网页文件的大小增加了32%。

而搜索引擎算法的趋势是日益看中用户体验，由此为网站代码瘦身减负，提高服务器访问性能，增进用户体验就成为一个老站势在必行的出路！

SEO教程根据自身seo优化经验和技术发展动态，为大家提供以下十招，帮你精简代码，增进用户体验，具体如下：

1.启用GZIP压缩

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

2.支持浏览器缓存

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

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

<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中，可使用如下代码：  

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

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

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

6.压缩并合并JavaScript

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

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

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

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。所以网站中这种字体的使用尽量控制在两、三种以内。

SEO教程友情提示：只要善用以上十招网站瘦身方法，大部分网页文件都可以减去总大小的30~50%。而对于普通的网站，可以减掉800KB的代码量，访问速度可获明显提升，用户体验将明显增进。