概述

参考自谷歌的教程网站的加载性能可以从减少网络延迟、减少资源数量、减少资源体积和使用缓存 4 个方面来进行优化。

1. 减少网络延迟与网络请求避免使用着陆页进行重定向。重定向会导致额外的HTTP请求，造成网络延迟，拖慢网页的呈现。重定向也可能造成额外的DNS查找，TCP握手和TLS协商。合并资源，减少网络请求合并资源网站优化，最常见的就是精灵图了。此外网站优化，还可以合并一下 CSS 和 JS 代码。2. 控制资源下载数量

访问一个网页时，所请求的资源一定要都是有用的，避免无用的资源请求，如：1. 多余的js文件，css文件2. 多余的图片请求3. 多余的字体请求

3. 资源体积的优化

网站用到的资源主要有：

3.1 文字类资源的优化

首先当然是自己要写出优质、简洁的代码了。

其次，对于 js文件，html文件，css文件，要进行文件最小化处理，去除文字间的空格、换行，进行变量名的替换等等。这些工作一般都是在前端工程打包时进行的， 如：

接下来就是使用GZIP对文件进行编码压缩了。现代浏览器都可以接受 gzip 格式的文件，我们要做的就是对服务端进行配置。

3.2 图像类资源的优化

选择正确的图片格式虽然经常说png 图片比 jpge 图片能更好的表现摄影图像，但是对于很多图片来说，png格式的图片，转化为 jpeg 格式后，对于图片的清晰度并没有特别大的影响，但是体积却能大大减少。

移除不必要的元数据某些拍出来的照片会含有元数据，就是描述数据的数据。元数据会描述图片拍摄的设备信息，时间戳，图片尺寸等，这对于某些网页图片来说不是很重要，所以我们可以剔除掉这些元数据。尝试下这个网站。

减小图片的尺寸某些情况下，\

标签或标签的背景即使用了大图，其在实际网页中的尺寸也很小，这时使用大图就是造成资源的浪费了。这是可以对图片尺寸进行重设， 比如将1200 x 600 像素的图片改为 600 x 300 像素。

降低图片质量在某些情况下，降低图片的质量并不会造成任何视觉上的差别，却能减少大量的体积。有很多处理图片质量的软件，如：

更多参考这里。

图片压缩尽管对图片使用gzip压缩没什么效果，但是还是有很多软件可以在不影响图片尺寸和视觉质量的情况下，对图片进行压缩的，比如这个网站。更多网站可以参考这里。