网站调优之性能分析

做网站性能调优，首先需要知道网站那些地方需要调优，这就需要先做性能分析。

在线性能分析工具网站

webpagetest

通过网站测试结果分析网站那些地方做的不足，需要改进：

测试结果类似ySlow的A-F的六级评分，A为最优，F为最差，X代表为检测到或者没有使用。

通过测试可发现，被测网站在cache static content和cdn的还有很大的进步空间。

First Byte Time

First Byte Time，指的是用户发起页面请求到接收到服务器返回的第一个字节所花费的时间。这个指标反映了后端服务器处理请求、构建页面，并且通过网络返回所花费的时间。

Keep-alive Enabled

页面上的各种资源（比如，图片、JavaScript、CSS 等）都需要通过链接Web服务器来一一获取，与服务器建立新链接的过程往往比较耗费时间，所以理想的做法是尽可能重用已经建立好的链接，而避免每次使用都去创建新的链接。

Compress Transfer

如果将页面上的各种文本类的资源，比如Html、JavaScript、CSS等，进行压缩传输，将会减少网络传输的数据量，同时由于JavaScript和CSS都是页面上最先被加载的部分，所以减小这部分的数据量会加快页面的加载速度，同时也能缩短First Byte Time。

为文本资源启用压缩通常也是服务器配置更改，无需对页面本身进行任何更改。

Compress Images

为了减少需要网络传输的数据量，图像文件也需要进行压缩处理。显然本次测试结果显示，所有的JPEG格式图片都没有经过必要的压缩处理，并且所有的JPEG格式图片都没有使用渐进式JPEG（Progressive JPEG）技术，所以WebPagetest给出了D级的评分。

普通JPEG文件存储方式是按从上到下的扫描方式，把每一行顺序地保存在JPEG文件中。打开这个文件显示它的内容时，数据将按照存储时的顺序从上到下一行一行地被显示，直到所有的数据都被读完，就完成了整张图片的显示。

如果文件较大或者网络下载速度较慢，会看到图片是被一行一行加载的。为了更好的用户体验，渐进式JPEG技术就出现了。

渐进式JPEG包含多次扫描，然后将扫描顺序存储在JPEG文件中。打开文件的过程，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片会变得越来越清晰。这种格式的主要优点是在网络较慢时，通过图片轮廓就可以知道正在加载的图片大概是什么，这种技术往往被一些网站用于打开较大图片。

Cache Static Content

一般情况下，页面上的静态资源不会经常变化，如果浏览器可以缓存这些资源，当重复访问这些页面时，就可以从缓存中直接使用已有的副本，而不需要每次向Web服务器请求资源。这种做法，可以显著提高重复访问页面的性能，并减少Web服务器的负载。

Effective use of CDN

CDN是内容分发网络的缩写，其基本原理是采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区的网络供应商机房内，当用户访问网站时，利用全局负载技术将用户的访问指向距离最近的、工作正常的缓存服务器上，由缓存服务器直接响应用户请求。

Chrome调试工具的Performance monitor

使用方法

1. 打开chrome开发者工具，选择performance tab，在more tools里把performance monitor也调出来；
2. 点击左上角的圆形按钮Record开始录制；
3. 访问被测页面，开发者工具会记录一切页面活动；
4. 结束时点Stop生成报告；

一旦生成了报告，距离真相就很近了，下一步当然是要分析报告啦。

看到图中的有个接口api的请求在所有资源全部加载之后才开始的请求，设想：能否将接口请求在所需的资源加载完之后立即进行请求，减少等待的时间。