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=5&hl=da)
浏览器兼容性
大多数浏览器都支持 <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 预提取资源提示。