前端与移动开发：如何对网站的文件和资源进行优化?

对于一个产品来说，不论一个网站的页面多酷炫，代码多牛叉，如果让客户等的时间太长，那都是白搭。所以，不论是前端还是后台，用户体验对于我们多重要就不用说了，现在我就从前端的角度来谈谈网站资源优化的一些方法和小窍门。

首先就是图片了，图片是UI的最爱，前端的最恨了。

1、图片优化

首先，你需要优化你网站上的图片，来获得丝毫加速网站的机会。从原图上移除额外的注解、不必要的空间和无用的颜色，将图片保存为JPEG格式，因为它即使占用空间小，也能保证图片的高质量。

对于WordPress网站，建议使用smush.it插件来自动优化网站的图片。如果图片是PNG格式，可以使用tinypng 优化图片，提高图片质量。

2、开启GZip压缩

GZip压缩听起来很复杂，但实际上很简单，被用于减少HTTP请求的大小来缩短响应时间。因为这允许你发送GZip压缩文件而不是HTML文件给浏览器，它将缩短页面等待时间和加载时间。对于Apache服务器，可以将下面的代码添加到.htaccess文件中来开启GZip压缩。

3、服务器响应时间

即使网站已经格外优化，但是除非服务器响应时间非常快，否则就不会有什么大的效果。当涉及到提高网站的速度，服务器响应时间起着重要的作用。下面是一些提高服务器响应时间的建议。

有独立的服务器，而不是选择共享/托管服务器。

提高Web服务器的质量。

移除不必要的插件，只有那些必要的插件，才需要一直保持启用状态。

4、使用CDN

内容分发网络(CDN)是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。当用户请求文件和网页时，就可以直接从就近的网站服务器获取相应资源(也可以是从负载最小的服务器)。你可以使用Amazon cloud front 或者MaxCDN为网站开启CDN加速。

5、压缩CSS、JavaScript和HTML文件

通过删除所有不必要的空格和注释，从而减小文件大小，提高页面的加载速度。下面是一些优化CSS、JavaScript和HTML文件的流行工具，非常有用。

CSS Minifier

Avivo

HTML Compressor

6、避免重定向

重定向是对网站访问者的一种极大的刺激。就类似你去一个朋友家，却发现你朋友早已经搬到三个街区远的地方了。重定向会消耗额外的时间，降低加载速度。

7、指定字符集

指定字符集是加速浏览器渲染页面的另一个有用的技巧。下面的代码就能轻松实现：

8、避免错误请求

当用户在网站上搜索时，收到404或410错误是比较失望的。错误请求会对网站的页面加载速度产生不利影响。因此，建议你无论如何都要避免错误请求。Check My Link 能帮你找出404链接，清除它们，改善用户体验。

当然，除了前端方面的优化外，还有一些其他的优化，例如SEO、后台代码。这些需要大家以后再工作中慢慢摸索。好了，今天就说到这里了，祝大家以后都工作顺利。

本文版权归黑马程序员前端与移动开发学院所有，欢迎转载，转载请注明作者出处。谢谢！

作者：黑马程序员前端与移动开发培训学院

首发：http://web.itheima.com/