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