预先连接到必需的源

Lighthouse 报告的“优化建议”部分列出了尚未使用 <link rel=preconnect> 优先处理提取请求的所有关键请求:

Lighthouse 预先连接到所需来源的审核的屏幕截图

大多数浏览器都支持 <link rel=preconnect>。请参阅浏览器兼容性

使用预连接提高网页加载速度

建议添加 preconnectdns-prefetch 资源提示,以尽早连接到重要的第三方源。

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

在速度较慢的网络中建立连接通常非常耗时,尤其是要建立安全连接时,因为这一过程可能涉及 DNS 查询、重定向以及指向处理用户请求的最终服务器的若干往返。

提前处理好上述事宜将使您的应用提供更加流畅的用户体验,且不会为带宽的使用带来负面影响。建立连接所消耗的时间大部分用于等待而不是交换数据。

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

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

这会让浏览器知道该网页打算连接到 example.com 并从中检索内容。

请注意,虽然 <link rel="preconnect"> 成本较低,但却会占用宝贵的 CPU 时间,建立安全连接时尤其如此。如果未在 10 秒内使用连接,情况尤为糟糕,因为当浏览器关闭连接时,所有已完成的连接都将遭到浪费。

一般而言,请尽可能使用 <link rel="preload">,以更加全面地提升性能,但仅在极端情况下使用 <link rel="preconnect">,例如:

<link rel="dns-prefetch"> 是另一种与连接相关的 <link> 类型。这仅处理 DNS 查找,但其浏览器支持范围更广,因此可以作为很好的后备方案。使用方法完全一样:

<link rel="dns-prefetch" href="https://example.com" />.

特定于堆栈的指导

Drupal

您可以通过安装和配置一个能协助创建用户代理资源提示的模块,来添加 Preconnectdns-prefetch 资源提示。

Magento

修改主题背景的布局,并添加 preconnect 或 DNS 预提取资源提示。

资源