預先連線至必要來源

Lighthouse 報表的「商機」部分會列出尚未使用 <link rel=preconnect> 優先處理擷取要求的所有重要要求:

Lighthouse Preconnect 預先連線所需來源稽核的螢幕截圖

瀏覽器相容性

大多數瀏覽器都支援 <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

使用支援使用者代理程式資源提示的模組,以便安裝並設定預先連線或 DNS 預先擷取資源提示。

Magento

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

資源