工作日常 2019/3/26

[Link-Fight]

按照谷歌提供的衡量网页质量的自动化工具灯塔提供的指标来看，主要有以下几个类目的指标：

Performace

1 'First Contentful Paint'

(FCP)测量的是从浏览器导航到该页到DOM渲染第一部分内容的时间。对于用户而言，这代表这页面实际加载的反馈。

2 'First Meaningful Paint'

(FMP)首次有效渲染

3 'Speed Index'

表示页面内容填充的速度

4 'First CPU Idle'

第一个CPU空闲度量标准衡量页面的最小交互时间：
屏幕上的大多数（但可能不是全部）UI元素都是交互式的。
该页面在合理的时间内平均响应大多数用户输入。

5 'Time to Interactive'

页面完全交互所需的时间。

6 'Estimated Input Latency'

应用程序在页面加载最繁忙的5s窗口中响应用户输入所需的时间（毫秒）。如果您的延迟超过50毫秒，用户可能会认为您的应用程序是滞后的。

Opportunities 优化方式

1 Eliminate render-blocking resources

消除渲染阻塞资源（有资源正在阻止页面的第一次绘制。考虑以内联方式交付关键的JS/CSS，并推迟所有非关键的JS/样式。）

2 Remove unused CSS

从样式表中删除死掉的规则，并推迟不用于折叠内容的CSS的加载，以减少网络活动所消耗的不必要字节。

可以使用Coverage选项卡查看已使用和未使用的CSS

Diagnostics

1 Ensure text remains visible during webfont load

• 利用字体显示CSS功能确保在加载WebFonts时文本是用户可见的。

2 Serve static assets with an efficient cache policy

• 让静态资源拥有长缓存寿命好加速页面的重复访问

3 Minimize Critical Requests Depth

• 关键请求链展示高优先级加载的资源。考虑减少链的长度，减少资源的下载大小，或者推迟不必要资源的下载以提高页面负载。

4 Defer offscreen images

• 对于图片资源采用懒加载，特别是在加载页面时候，在当前屏幕外面的图片，此时可以考虑使用 IntersectionObserver,只有当用户在页面滚动到特定区域后才加载图片资源。

5 Minify CSS，Minify JavaScript

• 就是压缩HTML，CSS和JS资源的大小：
• HTML可以采用HTMLMinifier
• CSS可以采用CSSNano和csso
• JS可以采用UglifyJS,Closure Compiler

6 Efficiently encode images，Serve images in next-gen formats

• 优化图片资源，选择合适的图片格式，根据不同设备提供不同版本的图片，采用CDN来部署资源，同时可以通过在构建工具链中集成图像优化的命令行工具(JPEG:Guetzli/MozJPEG,PNG:pngquant/Zopfli,GIF:Gifsicle/SVGO)
• 采用下一代的图片格式，JPEG 2000,JPEG XR 和 WebP具有国家卓越的压缩和质量性能，目前来说需要检测浏览器的支持。

7 Enable text compression

• 启用文本压缩，在浏览器的请求头会有accept-encoding标识出它支持的文本压缩编码。而在响应头则有content-encoding标识该响应的格式
• Brotli是目前较新的压缩格式，但在浏览器中的支持还不够普遍，而GZIP作为其后背，其在浏览器的支持程度最高，但是效率低于Brotli。

8 Preconnect to required origins

• 由于通过网络发送到浏览器的每一个字节并不是具有同等重要性。因此，现代浏览器会对首先要加载资源的优先级做出自己最佳猜测。例如先加载CSS然后再加载脚本和图像。
• 但是这种猜测往往不是最优的，所以需要我们告知浏览器我们所需资源的重要性。
• 通过预加载和预链接来提高资源的优先级，如果是希望浏览器仅在处理完其它所有任务后再提取某些资源，请采用预提取。

[Link-Fight]

预加载

<link rel="preload"> 将告知浏览器当前导航需要某些资源，应尽快开始获取。

<link rel="preload" as="script" href="super-important.js">
<link rel="preload" as="style" href="critical.css">

要注意里面的as属性，它将告知浏览器您将要加载的资源类型，以便浏览器可以正确处理该资源。如果该资源类似设置错误，浏览器将不会使用预加载的资源。

如果使用<link rel="preload">获取的资源如果在3s内没被页面使用，将会在chrome的console中触发警告：

预连接

<link rel="preconnect">告知浏览器您的页面打算与另一个起点建立连接，以及您希望尽快启动该过程。

在速度较慢的网络中建立连接通常非常耗时，尤其是要建立安全连接时，因为这一过程可能涉及 DNS 查询、重定向以及指向处理用户请求的最终服务器的若干往返。 提前处理好上述事宜将使您的应用提供更加流畅的用户体验，且不会为带宽的使用带来负面影响。 建立连接所消耗的时间大部分用于等待而不是交换数据。

只需向您的页面添加一个 link 标记，便可告知浏览器您的意图：

<link rel="preconnect" href="https://example.com">

预提取

<link rel="prefetch">的目标是利用机会使非关键操作更早地触发。

实现方式是告知浏览器未来导航或用户互动将需要的资源，例如，如果用户做出我们期望的行为，则表示其稍后可能需要某些资源。当前页面完成加载后，且在带宽可用的情况下，这些资源将在Chrome中以Lowest优先级被提取。

这意味着，prefetch是预测用户下一步的操作并为其做好准备。例如检索结果列表中某个产品的详情页面或检索内容的下一页。

<link rel="prefetch" href="page-2.html">

请记住，预提取不可递归使用。 在上方示例中，您仅可以检索 HTML；page-2.html 需要的任何资源将不会提前下载，除非您针对这些资源也设置明确的预提取。