預先連線至必要來源

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 秒內未使用的連線超過 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 預先擷取資源提示

資源