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 预提取资源提示。