网页的性能在大多数情况下是影响用户体验的第一要素。尤其对于很多电商和财经网站来说，几秒的性能提升可能意味着更大的转化率和收入。因此，优化网页的性能一直是前端工程师最热衷的工作之一。今天我们就来看看谷歌提出的一种新的性能优化方案，目前已经在谷歌搜索中得到实践。什么会影响LCP？在上一篇文章中，我介绍了Google新推出的CoreWebVitals，包括三大指标：LCP、FID、CLS。CoreWebVitalsLargestContentfulPaint(LCP)（最大内容呈现）是最重要的指标之一。这个指标很容易理解，就是网页当前视口可见的最大元素的渲染时间。为了良好的用户体验，这个时间尽量控制在2.5S以内。那么哪些因素会影响网页的LCP呢？当用户访问网页时，浏览器会向服务器请求HTML。服务器返回HTML响应，HTML告诉浏览器下一步要做什么，包括请求CSS、JavaScript、字体和图像等资源。这些资源返回后，浏览器会做一些其他的评估工作，最后在页面上进行布局和渲染。其实大部分时间都花在了从浏览器到服务器的传输上。根据谷歌浏览器的统计，一个网页大约40%的可见延迟花费在浏览器等待服务器返回的第一个字节上。数据预取那么，如果网页上需要的资源文件能够被预取，即在用户访问这些页面之前就获取到，这将给网页带来巨大的性能提升。数据预取完成后，剩下的就是求值、布局、渲染，网页才能正常显示。数据预取其实就是我们常见的一些性能优化方法：尽可能提前发起域名的dns解析操作。rel="preconnet"：告诉浏览器页面即将使用某个域名下的资源，让浏览器提前建立网络连接。当页面真正发起资源请求时，会使用已经建立的网络连接，直接跳过这些耗时的构建。甚至操作。这些都是数据预取的措施，我们可以预取我们当前站点的一些主要资源。在同一个站点的情况下，这些方法很容易实现，但是对于跨站点通用，就没那么简单了。跨站数据预取什么是跨站场景下的数据预取？比如我们现在的网站只是一个导航或者搜索引擎。大多数情况下，我们不会在当前网站停留太久，而是从当前网站跳转到其他网站，比如谷歌搜索：我们当前网站的性能优化已经做得很好了，现在我们要考虑如何让这些跨站的第三方站点快速打开。提前下载所有可以打开的第三方网站的数据？当然这样可以让用户更快的打开这些页面，但是我们还需要考虑一些其他的因素：用户可能不会去点击这些链接，所以我们提前预取的数据不是浪费资源吗？如果这些网站携带用户的IP地址或cookie怎么办？不会对用户隐私构成威胁吗？Privateprefetchproxyscheme为了实现更安全和隐私的数据预取，Google提出了一种新的数据预取方案：Privateprefetchproxy（私有预取代理），GoogleSearch已经实现了这个方案，导航的LCP有望有一个20%-30%的改善！安全通信私有预取代理方案使用CONNECT代理在Chrome和存储要预取内容的服务器之间建立安全通信通道。这种安全的通信通道可防止任何代理在中间获取任何数据传输。此外，虽然私有预取代理必须看到主机名才能建立安全的通信通道，但它隐藏了完整的请求URL，并且看不到资源本身。此外，由于安全通信通道是端到端加密的，一些代理或中介既不能获取主机名也不能获取预取站点的内容。代理本身也会阻止目标服务器看到用户的IP地址。防止用户识别除了上面详述的网络安全方面之外，私有预取代理还可以防止服务器在预取时通过先前存储在其设备上的信息来识别用户。目前，Chrome将私有预取代理方案限制在用户没有cookie或其他本地状态的站点。以下是对PrivatePrefetchProxy发出的预取请求的限制：(1)Cookies：预取请求不允许携带cookie。如果资源有cookie，Chrome只会发送没有cookie的请求，不会使用响应内容。对预取请求的响应可以包含cookie，但这些cookie仅在用户导航到预取页面时才保存在浏览器中。(2)Fingerprinting：其他可用于指纹识别的数据（如User-Agent）也进行了调整。PrefetchProxy发送的Header只携带有限的信息。谷歌还计划将PrivatePrefetchProxy扩展到带有cookie的网站，同时使用一些其他解决方案来保护用户隐私。缓存Chrome会预取资源，即使资源已经在缓存中，但它们不会携带任何条件请求头，例如ETag或If-Modified-Since（这些头包含服务器设置的值，并且可以即使没有cookie用户跟踪也可以使用）。进行这种预取是为了防止将客户端的缓存状态泄漏到预取网站。此外，如果用户决定导航到一个已经预取的站点，Chrome只会将预取的资源提交到缓存中。开始使用私有预取代理对于需要数据预取的站点对于大多数常见站点，当其他站点导航到我们的站点时，我们希望速度更快。目前，PrivatePrefetchProxy还在公测阶段。如果想提前体验，需要在服务器上部署一个traffic-advice配置：[{"user_agent":"prefetch-proxy","google_prefetch_proxy_eap":{"fraction":1.0}}]google_prefetch_proxy_eap选项允许我们的网站加入数据预取代理。fraction字段可以控制私有预取代理的流量百分比。此配置应放在我们服务器的/.well-known/路径下（即/.well-known/traffic-advice）。对于导航网站对于像谷歌这样的导航网站，我们需要用户在我们的网站上更快的打开其他网站，我们可以在页面上添加如下配置，通过数据预取代理让Chrome知道应该去抓取哪个页面：请注意，添加数据预取意味着向我们的站点添加额外的流量，即使没有用户实际请求它。这可能需要具体网站的负责人进行具体评估。如果浪费一些额外的流量来换取更好的用户体验是值得的，那就没有问题。但我们也可以采取一些措施将其链接起来，比如限制浏览器预取相对关键的资源（如Script、CSS等），这本质上是网页性能和额外流量之间的权衡。此外，我们还可以在网站中加入一些推荐规则，让浏览器推断出用户可能访问的页面。
