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
修改主题背景的布局，并添加 preconnect 或 DNS 预提取资源提示。