Lighthouse 报告的“优化”部分列出了所有重要请求
尚未使用 <link rel=preconnect>
确定提取请求的优先级:
![Lighthouse 预先连接到所需来源的审核的屏幕截图](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preconnect/image/a-screenshot-the-lightho-689699d0527e1.png?authuser=7&hl=ro)
浏览器兼容性
大多数浏览器都支持 <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 预提取资源提示。