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

Addy Osmani

<iframe> 元素延遲載入會延遲載入畫面外 iframe，直到使用者捲動接近元素附近為止。這樣可以節省資料、加快頁面其他部分的載入速度，並降低記憶體用量。

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

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

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

為何要採用延遲載入 iframe？

第三方嵌入內容涵蓋各式各樣的用途，包括影片播放器、社群媒體貼文和廣告。這項內容通常不會立即顯示在使用者的可視區域中，但即便使用者未捲動至畫面，使用者仍須支付下載資料費用，並為每個影格支付昂貴的 JavaScript 費用。

根據 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 影片嵌入時，頁面初次載入可節省約 500KB 大小：

<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>

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 內容。其中最常見的是「like 外掛程式」，這個按鈕會顯示有多少使用者「喜歡」頁面。根據預設，使用 Facebook JSSDK 在網頁中嵌入類似外掛程式會提取約 215 KB 的資源，197 KB 為 JavaScript。外掛程式通常顯示在文章結尾或接近網頁結尾處，因此如果外掛程式不見得正好，直接載入就可能無法達到最佳效果。

感謝工程師 Stoyan Stefanov，Facebook 的所有社交外掛程式現在都支援標準化 iframe 延遲載入。如果開發人員透過外掛程式的 data-lazy 設定選擇採用延遲載入功能，現在可在使用者捲動附近時，避免這些外掛程式載入。這樣一來，嵌入內容就能持續為有需要的使用者正常運作，同時針對未將頁面往下捲動的使用者節省資料。我們希望這項做法能夠搶先在實際工作環境中探索標準化的 iframe 延遲載入。

跨瀏覽器 iframe 延遲載入

以漸進式強化方式，您可以為網站套用 iframe 延遲載入功能。 瀏覽器如果在 iframe 上支援 loading=lazy，就會延遲載入 iframe，且不支援 loading 屬性的瀏覽器會以安全的方式忽略。

您也可以使用 Lazysizes JavaScript 程式庫來延遲載入畫面外 iframe。如果您遇到以下狀況，建議您採取這個做法：

• 相較於標準化延遲載入優惠，需要更多自訂延遲載入門檻
• 希望能在不同的瀏覽器上為使用者提供一致的 iframe 延遲載入體驗。

<script src="lazysizes.min.js" async></script>

<iframe frameborder="0"
      class="lazyload"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

請使用以下模式，在不可用的情況下偵測延遲載入功能，並擷取延遲：

<iframe frameborder="0"
      class="lazyload"
    loading="lazy"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

<script>
  if ('loading' in HTMLIFrameElement.prototype) {
    const iframes = document.querySelectorAll('iframe[loading="lazy"]');

    iframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });

  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    document.body.appendChild(script);
  }

</script>

畫面外 iframe 延遲載入是否有例外狀況？

進行早期實驗，針對 Chrome 數據節省模式使用者採用自動延遲載入 iframe 的早期實驗，隱藏 iframe 的例外狀況 (通常用於通訊或分析) 除外。這些機制可避免延遲載入，並一律載入，以免破壞這些功能。

loading 屬性不會套用這些經驗法則，因此開發人員隨時都能選擇需要延遲載入的項目。loading 屬性應一律處於背景中，並受到距離限制及其他瀏覽器選項 (例如列印) 的影響。

資源

如需更多延遲載入的相關建議，請參閱 web.dev 的圖片和影片延遲載入集合。

感謝 Dom Farolino、Scott Little、Houssein Djirdeh、Simon Pieters、Kayce Basques、Joe Medley 和 Stoyan Stefanov 進行評論。