工具
想要知道自己网站的质量水平，凭想象和猜测是不行的，必须要有可以客观衡量的工具。
yslow
最早做这方面尝试的是2012年诞生于yahoo的yslow（http://yslow.org/），但是现在已经逐渐淡出历史舞台。它的名称实际上是英文why slow(为什么这么慢？)的缩写，从它的名字你应该能知道它是帮助站长解决网页加载速度的工具。yslow是一款浏览器插件，可以支持包括chrome, firefox, safari等等主流浏览器。在浏览器上安装相应插件后，就可以对任意网站进行评测，最后给出一个总体评分。评测内容包括网页是否包含了过多的http请求，js和css是否经过压缩，是否采用cdn等等，主要是提供给站长一个优化的方向和参考建议。
pagespeed
在yslow之后，google推出了自己的网页优化建议工具pagespeed insights（https://developers.google/speed/pagespeed/insights），这是一个网页工具，你不需要像yslow一样下载插件和安装，你只需要打开它的网页，输入任何你想测评的网址，就可以得到优化建议了。
gtmetrix
我最常使用的工具不是以上两款，而是一个名叫gtmetrix（https://gtmetrix/）的网站，这个网站结合了以上两个工具，给出了更加完整的建议。
lighthouse
更强大而严格的工具还是google推出的lighthouse。这也是一款浏览器插件，不过目前只能用于google自家的chrome浏览器。它从4个方面对任何网站进行评测，包括性能、易用性、最佳实践。我们下面将重点介绍如何能在这4个方面都完全满足google的要求。
优化
gtmetrix
优化的第一步，我们还是先从gtmetrix开始。一般网站常见的问题和建议如下：
cdn
通常情况下，你需要为你的网站开通cdn服务，以确保在地理位置上离用户最近的服务器可以优先为用户提供服务。提供cdn服务的厂商很多，而且价格并不昂贵，很多云服务商比如阿里云、百度云都有提供这方面的服务。
enable gzip compression
这一项主要是检查你的nginx服务器是否设置了gzip压缩传输的方式。打开你的chrome开发者工具，检查network标签里每一个请求的response header，看一下是否有content-encoding: gzip，如果没有，说明你的网站没有设置gzip传输。
解决方法：可以参考日新亭的博客中的《我的nginx锅炉片》文章去设置（https://fengerzh/my-nginx-boilerplate/）
add expires headers
这一项也是很多网站缺失的配置，由于没有给jpg图片以及css和js设置合适的过期时间，导致每次访问网站都需要重新从网站读取内容，这是很多网站访问速度慢的原因。设置方式：同样，参照上一节所提到的文章。
图片大小
很多情况下，或者是出于无知，或者是出于偷懒，工程师们倾向于把一张大图用css方式缩小，例如这样：width: 100px; height: 50px;。导致的结果是这张图片在网页上看起来似乎图片缩小了，但实际上文件尺寸并没有变小。这也是很多网站变慢的主因。
解决方法：参照我的这篇文章《用imgproxy自动缩放图片》设置。（https://fengerzh/imgproxy/）
雪碧图
如果你的页面中有很多小图标的时候，最糟糕的做法莫过于把它们全部切成小碎的jpg或者png，这样会使你的页面在加载时向服务器端发送很多次http请求，而每一次请求都有独立的建立连接、传输数据、断开连接的过程，非常浪费资源。
解决方案：如果可能的话，把这些图标做成独立的图标字体文件。如果不行，则把它们压缩成雪碧图。（https://segmentfault/a/1190000006992567）
压缩js和css
通常情况下，你刚刚写完的js是下图中左边这种样子的，而通常大公司网站的代码是图中右边这样的。
左边的代码人类阅读没有什么问题，但是你不应该把它们就这样在网络中传输。第一，浪费流量；第二，你能读得懂，你的友商也能读得懂，不利于安全。
解决方法：你应该把你的js/css/html进行丑化(uglify)和压缩(minify)。（https://skalman.github.io/uglifyjs-online/）
终极大法
以上所有这些修改建议听上去都不错，但是我要一个一个做下来太繁琐怎么办？也许你应该考虑用一个现代的框架帮你自动完成这些事情，比如angular/react/vue，或者你自己使用grunt/gulp/webpack完成所有这些事情。你知道这就是为什么前端工程师要学习框架的原因了吧？