Google 最新的性能优化方案，LCP 提升30%！

大师好，我是 ConardLi。

网页的性能，大部分情况下是影响用户利用体验的第一要素，出格是对于很多电商、金融网站，能够几秒的性能提升就意味着更大的转化率和收益。

所以优化网页的性能，一向是前端工程师最热衷的工作之一。明天我们来看看 Google 提出的一种新的性能优化计划，现在已经在 Google Search 中获得了理论。

什么影响了 LCP？

在之前的文章 解读新一代 Web 性能体验目标 中，我先容了 Google 新提出的 Core Web Vitals，其中包括了 LCP、FID、CLS 三大目标。

Largest Contentful Paint (LCP)（最大内容衬着），又是其中最重要的目标。这个目标很好了解，也就是一个网页当前视口中可见的最大元素的衬着时候。为了杰出的用户体验，这个时候应当只管控制在 2.5S 之内。

那末有哪些身分会影响网页的 LCP 呢？

当用户拜候网页时，阅读器从办事器请求 HTML。办事器返回 HTML 响应，然后 HTML 会告诉阅读器下一步的工作，包括请求 CSS、JavaScript、字体和图像等资本。这些资本返回后吗，阅读器还会做一些其他的评价工作，终极在页面上停止结构和衬着。

现实上，大部分时候都花费在了从阅读器到办事器之间的传输上了。按照 Google Chrome 的统计显现，网页大约 40% 的可见提早都花费在阅读器期待办事器返回的第一个字节上了。

数据预取

那末， 假如可以预取网页上所需的资本文件，也就是在用户拜候这些页面之前就获得它们，这将给网页带来庞大的性能提升。

数据预取后，网页在可以一般显现之前只剩下了评价、结构和衬着工作了。

现实上，我们一些常见的性能优化的手段：

• rel="dns-prefetch"：向阅读器声明在接下来的页面中行将用到某个域名下的资本，要求阅读器尽能够早的提早倡议对该域名的 dns 剖析操纵。
• rel="preconnet"：告诉阅读器页面行将利用某域名下的资本，可以让阅读器提早建立收集毗连，在页面真正倡议资本请求时，会利用已经建立的收集毗连，间接跳过这些耗时建连操纵。

这些都属于数据预取的办法，我们可以做到预取一些我们当前站点的首要资本。

在同站的情况下，这些手段很轻易实施，可是对于跨站的常见，就不那末简单了。

跨站数据预取

什么是跨站的场景的数据预取呢呢，比如我们当前的网站只是个导航，大概搜索引擎，大部分情况下我们不会在当前的网站逗留太久，而是从当前网站跳到其他网站上去，比如 Google Search：

我们当前的网站的性能优化已经做的很好了，现在我们要斟酌的是怎样让这些跨站的第三方站点也能快速翻开。

把一切可以翻开的第三方网站的数据都提早下载一遍？这固然可以让用户翻开这些页面的时辰更快一点，但我们还要斟酌一些其他的身分：

• 用户纷歧定会点击这些链接，那我们提早预取的数据不就属于资本浪费了吗？
• 这些网站假如照顾用户的 IP 地址大概 Cookie 怎样办？不会对用户隐私形成威胁吗？

私有预取代理计划

为了实现更平安隐私的数据预取，Google 提出了一种新的数据预取计划：Private prefetch proxy（私有预取代理），Google Search 已经实施了这项计划，导航的 LCP 估计有 20%-30% 的提升！

平安的通讯

私有预取代理计划利用 CONNECT 代理在 Chrome 和存储了要预取内容的办事器之间建立平安通讯通道。

这个平安通讯通道可以避免任何 Proxy 从中心抓取任何数据传输。别的，虽然私有预取代理必须看到主机名才能建立平安的通讯通道，但它隐藏了完整的请求 URL，也看不到资本自己。

此外，由于平安通讯通道是端到端加密的， 一些代理大概中介既不能抓取到主机称号，也不能抓取到预取站点的内容。代理自己也会阻止方针办事器检察用户的 IP 地址。

避免用户识别

除了前面详述的收集平安方面，私有预取代理还可以避免办事器在预取时经过先前存储在其装备上的信息来识别用户。今朝，Chrome 会限制只要用户没有 Cookie 或其他当地状态的网站才能利用私有预取代理计划。以下是经过 Private Prefetch Proxy 发出的预取请求的限制：

• Cookies：预取请求不答应照顾 Cookies。
• 假如资本有 Cookie，Chrome 只会发送不带 Cookie 的请求，也不会利用响应内容。
• 对预取请求的响应中可以包括 Cookie，但只要在用户跳转到预取页面时才会在阅读器保存这些 Cookie。
• 指纹识别：其他可用于指纹识此外数据（例如 User-Agent）也停止了调剂。Prefetch Proxy 发送的 Header 只照顾有限的信息。

Google 也正在计划将 Private Prefetch Proxy 扩大到带有 Cookie 的网站，同时操纵一些其他的计划来保障用户隐私。

缓存

即使资本已经在缓存中了，Chrome 也会预取资本，但它们不会照顾任何条件请求头，例如 ETag 或 If-Modified-Since（这些 Header 中包括办事器设备的值，即使没有 Cookie 也可用于用户跟踪）。停止这样的预取办法是为了避免将客户真个缓存状态泄露到预取的网站。此外，假如用户决议跳转到已经预取的网站，Chrome 只会将预取的资本提交到缓存中。

起头利用私有预取代理

对于需要数据预取的网站

对于大部分普通站点，我们希望在其他网站导航到我们网站的时辰更快。

今朝 Private Prefetch Proxy 还处于众测阶段，想要提早体验的话需要在办事器摆设一份 traffic-advice 设置：

• google_prefetch_proxy_eap 选项可以让我们的网站加入数据预取代理。
• fraction 字段可以控制私有预取代理的流量百分比。

这个设置应当放在我们办事器的 /.well-known/ 途径下，（即 /.well-known/traffic-advice ）。

对于导航网站

对于像 Google 这样的导航网站，我们需要用户在我们的网站翻开其他网站的时辰更快，我们可以在页面上增加下面的设置，这可以让 Chrome 晓得应当经过数据预取代理提取哪个页面：

这里需要留意的是，增加了数据预取意味着，即使在没有用户现实请求的情况下也会给我们网站增加额外的流量。

这能够需要具体的网站负责人具体评价，假如感觉额外浪费一些流量调换更好的用户体验是值得的，那就没题目。

可是我们也可以经过一些办法来环节一些，比如限制阅读器只预取相对关键的资本（例如 Script、CSS 等），本质上就是网页性能和额外流量之前的权衡。

别的，我们也可以为网站增加一些保举法则，让阅读器可以自己揣度用户能够会拜候的页面，具体猜测法则可以参考：https://web.dev/speculative-prerendering

参考

• https://tools.ietf.org/html/rfc7231#section-4.3.6
• https://github.com/WICG/nav-speculation/
• https://developer.chrome.com/blog/cross-origin-prefetch/
• https://developer.chrome.com/blog/private-prefetch-proxy/