Lighthouse 报告的“优化建议”部分列出了使用 <link rel=preconnect> 尚未优先处理提取请求的所有关键请求：
浏览器兼容性
大多数浏览器都支持 <link rel=preconnect>。请参阅浏览器兼容性。
利用预连接提高网页加载速度
考虑添加 preconnect 或 dns-prefetch 资源提示，以尽早与重要的第三方源建立连接。
<link rel="preconnect"> 会告知浏览器您的网页打算与另一个源站建立连接，您希望该过程尽快开始。
在速度较慢的网络中建立连接往往需要很长时间，尤其是在安全连接方面，因为这可能涉及 DNS 查找、重定向以及多次往返于处理用户请求的最终服务器。
提前处理好所有这些操作，会让用户感觉应用更加简洁，并且不会对带宽的使用产生负面影响。建立连接所花的时间大部分用于等待，而不是交换数据。
只需向您的网页添加链接标记，即可告知浏览器您的意图：
<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
请使用支持用户代理资源提示的模块，以便安装和配置预连接或 DNS 预提取资源提示。
Magento
修改主题的布局，并添加预连接或 DNS 预提取资源提示。