預先連線至必要來源

Lighthouse 報表的「Opportunities」部分會列出所有尚未以 <link rel=preconnect> 優先處理擷取要求的關鍵要求:

Lighthouse「預先連結必要來源」稽核項目的螢幕截圖

瀏覽器相容性

<link rel=preconnect> 在大多數瀏覽器上皆可使用。請參閱「瀏覽器相容性」。

使用預先連線改善網頁載入速度

建議您新增 preconnectdns-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

如要新增 Preconnectdns-prefetch 資源提示,您可以安裝並設定模組,為使用者代理程式資源提示提供設施。

Magento

修改主題的版面配置,並新增預先連線或 DNS 預先擷取資源提示。

資源