第三方資源通常用於顯示廣告或影片,以及與社群媒體整合。預設做法是在網頁載入後立即載入第三方資源,但這可能會不必要地減慢網頁載入速度。如果第三方內容不是必要的,您可以透過延後載入來降低效能成本。
這項稽核會標示可在互動時延遲載入的第三方內嵌內容。在這種情況下,系統會使用「門面」取代第三方內容,直到使用者與內容互動為止。
Lighthouse 如何偵測可延遲的第三方嵌入項目
Lighthouse 會尋找可延遲的第三方產品,例如社交按鈕小工具或嵌入影片 (例如 YouTube 嵌入式播放器)。
關於可延後產品和可用外觀的資料會在第三方網站上維護。
如果頁面載入屬於上述任一第三方嵌入的資源,稽核作業就會失敗。
使用門面元件延遲載入第三方內容
請不要直接將第三方嵌入項目加入 HTML,而是使用類似於實際嵌入第三方的靜態元素載入網頁。互動模式應如下所示:
- 載入時:在頁面中加入外觀。
- 滑鼠游標移過:門面會預先連線至第三方資源。
- 點選:外觀會替換成第三方產品。
推薦外牆
一般來說,影片嵌入、社群按鈕小工具和即時通訊小工具都可以採用外觀模式。選擇外觀時,請考量大小與特徵集之間的平衡。
下列清單提供開放原始碼中繼建議。您也可以使用延遲 iframe 載入器,例如 vb/lazyFrame。
YouTube 嵌入式播放器
Vimeo 嵌入式播放器
即時通訊 (Intercom、Drift、Help Scout、Facebook Messenger)
自行撰寫外觀
您可以選擇建構自訂門面解決方案,使用上述的互動模式。與延後的第三方產品相比,外觀應大幅縮小,且只包含足以模擬產品外觀的程式碼。
如果您希望自己的解決方案能列入清單中,請參閱提交程序。
資源
使用門面元件延遲載入第三方資源稽核的原始碼。