Lighthouse 报告的“优化建议”部分列出了尚未使用 <link rel=preconnect>
优先处理提取请求的所有关键请求:
浏览器兼容性
大多数浏览器都支持 <link rel=preconnect>
。请参阅浏览器兼容性。
利用预连接提高网页加载速度
请考虑添加 preconnect
或 dns-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
您可以通过安装和配置一个能协助创建用户代理资源提示的模块,来添加 Preconnect
或 dns-prefetch
资源提示。
Magento
修改主题的布局,并添加预连接或 DNS 预提取资源提示。