使用門面元件延遲載入第三方資源

第三方資源通常用於顯示廣告或影片,以及與社群媒體整合。預設做法是在網頁載入後立即載入第三方資源,但這可能會不必要地減慢網頁載入速度。如果第三方內容不是必要的,您可以透過延後載入來降低效能成本。

這項稽核會標示可在互動時延遲載入的第三方內嵌內容。在這種情況下,系統會使用「門面」取代第三方內容,直到使用者與內容互動為止。

使用門面載入 YouTube 嵌入式播放器的範例。外觀的大小為 3 KB,互動時會載入大小為 540 KB 的播放器。
使用外觀載入 YouTube 嵌入式播放器。

Lighthouse 如何偵測可延遲的第三方嵌入項目

Lighthouse 會尋找可延遲的第三方產品,例如社交按鈕小工具或嵌入影片 (例如 YouTube 嵌入式播放器)。

關於可延後產品和可用外觀的資料會在第三方網站上維護

如果頁面載入屬於上述任一第三方嵌入的資源,稽核作業就會失敗。

Lighthouse 第三方外觀稽核結果,指出 Vimeo 內嵌播放器和 Drift 即時通訊功能。
Lighthouse 第三方門面稽核。

使用門面元件延遲載入第三方內容

請不要直接將第三方嵌入項目加入 HTML,而是使用類似於實際嵌入第三方的靜態元素載入網頁。互動模式應如下所示:

  • 載入時:在頁面中加入外觀。
  • 滑鼠游標移過:門面會預先連線至第三方資源。
  • 點選:外觀會替換成第三方產品。

一般來說,影片嵌入、社群按鈕小工具和即時通訊小工具都可以採用外觀模式。選擇外觀時,請考量大小與特徵集之間的平衡。

下列清單提供開放原始碼中繼建議。您也可以使用延遲 iframe 載入器,例如 vb/lazyFrame

YouTube 嵌入式播放器

Vimeo 嵌入式播放器

即時通訊 (Intercom、Drift、Help Scout、Facebook Messenger)

自行撰寫外觀

您可以選擇建構自訂門面解決方案,使用上述的互動模式。與延後的第三方產品相比,外觀應大幅縮小,且只包含足以模擬產品外觀的程式碼。

如果您希望自己的解決方案能列入清單中,請參閱提交程序

資源

使用門面元件延遲載入第三方資源稽核的原始碼。