立即延遲載入畫面外 iframe 了！

Addy Osmani

Barry Pollard

瀏覽器支援

• 77
• 79
• 121
• 16.4

延遲載入 <iframe> 元素會延遲載入螢幕外 iframe，直到使用者捲動接近其附近為止。這麼做可節省資料、加快網頁其他部分的載入速度，並減少記憶體用量。

和圖片的延遲載入一樣，請使用 loading 屬性告知瀏覽器您要延遲載入 iframe。

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

這個 <iframe loading=lazy> 的示範會顯示延遲載入影片嵌入項目：

為什麼要延遲載入 iframe？

第三方嵌入功能涵蓋各種用途，包括影片播放器、社群媒體貼文和廣告。雖然這類內容通常不會立即顯示在使用者的可視區域中，但使用者仍需支付下載資料的費用，並支付各個影格的 JavaScript 費用，即使使用者並未捲動畫面亦然。

如果系統過度積極載入畫面外 iframe，使用者就會下載可能永遠不會看到的元素，造成資料浪費。

根據 Chrome 對數據節省模式使用者自動延遲載入畫面外 iframe 的研究，延遲載入 iframe 可將數據中位數減少 2% 至 3%、在中位數降低 1-2% 首次顯示內容所需時間，以及將首次輸入延遲時間 (FID) 改善幅度為第 95 個百分位數。

此外，延遲載入螢幕外 iframe 也可以改善網頁的最大內容繪製 (LCP)。由於 iframe 通常需要大量頻寬才能載入所有子資源，因此延後載入螢幕外 iframe 可減少網路受限裝置的頻寬爭用情形，讓更多頻寬可用於載入有助於網頁 LCP 的資源。

iframe 內建的延遲載入功能如何運作？

loading 屬性可讓瀏覽器延遲載入螢幕關閉的 iframe 和圖片，直到使用者捲動到附近時才載入。loading 支援兩種值：

• lazy：適合延遲載入的候選文字。
• eager：不太適合使用延遲載入。立即載入。

在 iframe 上使用 loading 屬性的方式如下：

<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
        width="600"
        height="400"></iframe>

不指定屬性的效果與明確積極載入資源的影響相同。

如果您需要「動態」使用 JavaScript 建立 iframe，也可以在元素上設定 iframe.loading = 'lazy' 支援：

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);

延後載入熱門的 iframe 嵌入內容會對使用者體驗造成什麼影響？

將延後載入的 iframe 設為預設值，可讓網站的回應速度大幅提升。下列範例說明如何改善互動時間 (TTI) 和節省媒體嵌入資料，但延後載入廣告 iframe 也能提供類似的優點。

YouTube

延後載入 YouTube 影片嵌入內容，可在初始網頁載入時節省約 500 KB：

<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
        loading="lazy"
        width="560"
        height="315"
        frameborder="0"
        allow="accelerometer; autoplay;
        encrypted-media; gyroscope;
        picture-in-picture"
        allowfullscreen></iframe>

Chrome.com 透過延後載入螢幕外的 YouTube 嵌入內容，將 TTI 縮短 10 秒。

注意：如果您想以更有效率的方式載入 YouTube 嵌入內容，不妨試試 YouTube Lite 元件。

Instagram

Instagram 嵌入提供標記區塊和可將 iframe 插入網頁的指令碼。延遲載入這個 iframe 可避免載入嵌入內容所需的所有指令碼，並可在初始載入時節省約 100 KB 的空間。由於這些嵌入內容通常會顯示在大多數文章的可視區域下方，因此這是 iFrame 延後載入的合理候選項目。

Spotify

延後載入 Spotify 嵌入內容，可在初始載入時節省 514 KB。

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
        loading="lazy"
        width="300"
        height="380"
        frameborder="0"
        allowtransparency="true"
        allow="encrypted-media"></iframe>

Facebook 的社群媒體外掛程式

Facebook 社群媒體外掛程式可讓開發人員在網頁中嵌入 Facebook 內容。其中最受歡迎的是「按讚」外掛程式，這個按鈕會顯示「按讚」這個頁面的使用者人數。根據預設，使用 Facebook JSSDK 在網頁上嵌入說讚外掛程式時，會提取約 215 KB 的資源，而其中 197 KB 是 JavaScript。外掛程式通常會顯示在文章結尾或網頁結尾附近，因此在外掛程式不在畫面上時就急著載入，可能會導致效能不佳。

Facebook 的按讚外掛程式。

感謝 Stoyan Stefanov 工程師的協助，所有 Facebook 社交外掛程式現在都支援標準化 iframe 延遲載入。選擇透過外掛程式的 data-lazy 設定啟用延遲載入功能的開發人員，現在可以避免這些外掛程式在使用者捲動至附近時才載入。這樣一來，嵌入內容就能為需要的使用者繼續運作，同時為未捲動至頁面底部的使用者儲存資料。我們希望這只是在正式版中探索標準化 iframe 延遲載入功能的眾多嵌入功能中的一個。

如果您希望進一步掌控 iframe 延遲載入

瀏覽器層級的 iframe 延遲載入功能在所有主要瀏覽器中都獲得良好支援，建議在大多數用途中使用，以免需要額外依附 JavaScript。

不過，如果您需要支援舊版瀏覽器，或是想進一步控制延後載入門檻，可以使用第三方程式庫在網站上延後載入 iframe。lazysizes JavaScript 程式庫就是這類程式庫之一，可讓您在需要時使用其他選項。

是否有螢幕外 iframe 延遲載入的例外狀況？

在 Chrome 中為 Data Saver 使用者自動延後載入 iframe 的早期實驗中，隱藏的 iframe 有例外狀況，這類 iframe 通常用於通訊或分析。這種作法可避免延遲載入，而且一律會載入，以防止這些功能中斷。

loading 屬性不會套用這些經驗法則，因此開發人員一律會決定要延遲載入的項目。loading 屬性應一律受到尊重，但會受到距離限制和其他瀏覽器選項 (例如列印) 的影響。

資源

如要進一步瞭解延遲載入的點子，請參閱 web.dev 的圖片和影片延遲載入集合。

感謝 Dom Farolino、Scott Little、Houssein Djirdeh、Simon Pieters、Kayce Basques、Joe Medley 和 StoyanStefanov 提供他們的評論。