转载

前端调试清单之优化网络资源

原文地址： https://blog.pragmatists.com/how-to-debug-front-end-optimising-network-assets-c0bfcad29b40

作者： Michał Witkowski

摘要：本文从性能监控、图片、网络字体和JS代码优化以及如何提升渲染阻塞资源的加载速度等方面列举了常见的前端优化方法。

性能是决定我们Web应用成功与否的重要因素。一开始，我们的Web应用体积较小，几乎没有开发者会关注于持续监控用户接收的数据大小以及所需时间。

如果你不曾做过性能监控，那么你的网站性能很可能还有提升的余地。这时就出现了一个问题，为了让用户能够感知到性能的提升，你应该做出哪些努力呢？

在下面的研究中，你可以了解到如何让用户感觉到加载时间发生了明显的变化，并且你至少要完成20%的任务，才能让用户注意到你为此付出的努力。更多资料

接下来的文章分为6个部分：

通过Chrome Devtool Audit检查性能
图片优化
网络字体优化
JavaScript优化
渲染阻塞资源的加载提速
检查性能的其他程序或插件

如果你还有其他问题，请在评论中告知。我们的团队和读者们很乐意帮助你。

这篇文章是前端调试清单系列的一部分

How to debug Front-end: HTML/CSS
How to debug Front-end: Console

性能量化

Chrome Devtools Audits

由于本系列都与Chrome Devtools有关，所以这次我们从Audit标签开始。它使用了Lighthouse。

打开Chrome Devtools，然后选择Audits标签，接着点击 Perform an audit... ，接着 Run audit 。

我决定只检查 Performance 和 Best practices ，因为我不关心 Progressive Web App 或 Accessibility 的结果。

前端调试清单之优化网络资源

译者注：这一步应该需要翻墙，不然会卡在lighthouse is warming up。

很好。只需要等待一会儿，我们就完成了性能检查并且把它当成衡量指标来提升网站的性能。Audits会把网页视图更改成移动版，对此你不需要担心有什么负面影响，因为这是Chrome的默认行为。另外，我强烈建议你使用Canary版Chrome的audits。Canary版能够监控桌面端网页，并且新增了一个节流的选项。就像下面这张图一样。

前端调试清单之优化网络资源

Metrics

前端调试清单之优化网络资源

Metrics下列举了基本的性能指标，并且给出页面加载时间的概览。

First meaningful paint ——这代表用户看到初始内容所需的时间。请尽量让它的值小于1秒。更多资料

First interactive ——这代表可交互元素从展示到响应所需的时间。

Perceptual Speed Index ——这是页面展示可见部分所需时间的平均值。它以毫秒为单位并且取决于窗口的大小。应该尽量让它减少到1250毫秒以内。更多资料

Estimated Input Latency ——这是网页响应用户输入所需的毫秒数。

Opportunities

Opportunities ——这一部分包含更多的性能细节，将图片、CSS和响应时间的信息都聚合起来了。下面我会逐个讲解并且给出改良策略。

Reduce render-blocking stylesheets

下载CSS文件会阻塞浏览器的渲染过程。也就是说，浏览器会等到CSS文件下载完后才开始渲染内容。比如说你使用了bootstrap，但在项目才启动的时候，你并不需要加载整个组件库来美化你的页面。对此，最简单的处理方法就是只加载必要的CSS文件。

接着，你希望针对不同的屏幕尺寸进行优化。为了减少加载的CSS数量，你可以使用选择性加载的方式，只加载当前屏幕需要的CSS文件。就像下面的代码：

<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
<link href="print.css" rel="stylesheet" media="print">

如果这还没有完全解决你的问题，你可以试试Keith Clark想出来的方法，它可以让你在不阻塞页面渲染的情况下加载CSS文件。这个技巧使用了一个媒体查询为无效值的 link 元素。当媒体查询的计算结果为false时，浏览器仍然会下载样式表，但是不会延迟页面的渲染。你可以把必需的CSS文件分离出来然后再下载它们。更多资料

Keep server response times low

减少请求数的重要性不言而喻，但我们仍然要经常提醒自己，不要忘记它。为了减少服务器响应次数，你可以考虑使用CDN存放部分资源文件。还可以使用HTTP2协议、删除不必要的请求或是渲染页面后再懒加载资源等等。

Properly size Images, Offscreen images 和 next-gen formats

这三个部分都属于图片优化这一类。你可以在 Network 标签中通过筛选 IMG 来获取实际加载了哪些图片以及它们的体积大小。现在只看 Size 和 Time 这两列的数据，看看你是否满意这样的结果。目前还没有普适的标准规定每个文件应该有多大，这完全依赖于客户端设备种类、客户群体和其他你能想到的所有因素。

前端调试清单之优化网络资源

关于图片优化我还想再补充几点，因为这个问题在Audit的结果报告中会多次出现。

图片优化

图片分为两类：位图和矢量图。一个位图由像素构成，往往被用来展示图片和复制的动画。比如jpg、jpeg和gif格式。

矢量图由图形组成，被用来展示logo和图标。因为它们在缩放时也能有优异的表现。比如svg。

SVG

SVG本身体积已经很小了，但是你还可以通过压缩让它们更小：

SvgOmg
Svg-optimiser

位图

由于位图的体积较大，所以要用的优化技巧会多一些。下面是一些让位图保持较大尺寸但又有较小体积的黑科技。

事前准备

在优化前请先准备好不同版本的图片。我想你不希望在普通手机上展示适用于retina屏幕的图片吧？先准备个三四种版本。手机版、平板、桌面版和retina版。它们的尺寸取决于你的目标设备。如果你不清楚目标设备属于这四种中的哪一个，可以参考这个链接。

Srcset属性

图片都准备好了吗？img标签的src属性能够帮助我们决定什么时候加载图片。

<img src="ing.jpg" srcset="img.jpg, img2x.jpg 2x" alt="img">

设置 src 是防止浏览器不支持 srcset 属性，而 srcset 是为了那些支持该属性的浏览器。 img2x.jpg 是为了适配 dpr = 2 的retina屏幕。

<img src="img.jpg" srcset="img1024.jpg 1024w, img2048.jpg 2048w" alt="img">

设置 src 是防止浏览器不支持 srcset 属性，而 srcset 是为了那些支持该属性的浏览器。 img1024 是为了适配宽度为1024像素的屏幕。

上面引用的是MDN的两个例子。

媒体查询

你也可以使用媒体查询，比如说根据平板或手机使用不同的样式。这种方法最好与CSS预处理配合使用。

作为srcset属性的替代品，媒体查询的规则是写在CSS样式中，而不是写在HTML文件里。在单纯的CSS文件里，这种方法往往事倍功半。但如果你使用CSS预处理提供的mixin和变量的话，效率就会非常高了。当然，是使用srcset还是媒体查询都随你意。

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

@media @desktop {
  footer {
    width: 940px;
  }
}

@media @tablet {
  footer {
    width: 768px;
  }
}