延遲載入圖片和 <iframe> 元素

圖片和 <iframe> 元素通常會耗用的頻寬通常比其他類型的資源多。如果是 <iframe> 元素，在載入及轉譯元素中的頁面時，可能會需要不少額外處理時間。

如果是延遲載入圖片，延遲載入初始可視區域以外的圖片，有助於減少初始可視區域中重要資源的頻寬爭用。在網路連線品質不佳時，這可以改善網頁的最大內容繪製 (LCP)，而重新分配的頻寬有助於加快 LCP 候選的載入和繪製速度。

如果 <iframe> 元素不放心，只要延遲載入，您就可以在啟動期間改善網頁的與下一個繪製互動 (INP) 互動。這是因為 <iframe> 是完全獨立的 HTML 文件，且包含專屬的子資源。雖然 <iframe> 元素可以在獨立程序中執行，但與其他執行緒共用程序並不常見，這可能會造成網頁對使用者輸入內容的回應速度變慢的情況。

因此，延遲載入畫面外圖片和 <iframe> 元素是值得關注的技術，需要相當簡單的做法，才能獲得合理的效能回報。本單元說明如何延遲載入這兩種元素，在頁面的重要啟動期間加快且更優質的使用者體驗。

使用 loading 屬性延遲載入圖片

您可以將 loading 屬性新增至 <img> 元素，告知瀏覽器應如何載入元素：

  • "eager" 會通知瀏覽器，圖片應立即載入 (即使圖片位於初始可視區域之外)。這也是 loading 屬性的預設值。
  • "lazy" 會延遲載入圖片，直到圖片與可見可視區域之間的指定距離之內為止。這個距離因瀏覽器而異，但通常會設定夠大，讓使用者在捲動畫面時，系統能夠順利載入圖片。

此外，如果您使用 <picture> 元素，loading 屬性仍應套用至其子項 <img> 元素，而非 <picture> 元素本身。這是因為 <picture> 元素是一個容器，包含額外 <source> 元素指向不同的圖片候選圖片，且瀏覽器選擇的候選項目會直接套用至其子項 <img> 元素。

不要延遲載入初始可視區域中的圖片

建議您只將 loading="lazy" 屬性新增至位於初始可視區域外的 <img> 元素。不過，在頁面轉譯前，要知道元素相對可視區域內的精確位置，可能並不容易。請務必將不同的可視區域大小、長寬比和裝置納入考量。

舉例來說，電腦版可視區域與手機上的可視區域可能大不相同，因為這類可視區域會轉譯更多直向空間，或許能將圖片放入初始可視區域中，而這些圖片可能無法在實際小型裝置的初始可視區域中顯示。直向使用的平板電腦也會顯示大量的垂直空間，甚至比某些電腦裝置還多。

不過，在某些情況下，我們顯然應避免套用 loading="lazy"。舉例來說，如果是主頁橫幅或其他圖片用途，<img> 元素可能出現在不需捲動位置，或在任何裝置上版面配置的頂端，就必須完全省略 <img> 元素中的 loading="lazy" 屬性。對於可能是 LCP 候選圖片而言更重要。

延遲載入的圖片需要等待瀏覽器完成版面配置，才能判斷圖片的最終位置是否位於可視區域中。也就是說，如果可見可視區域中的 <img> 元素含有 loading="lazy" 屬性，則只有在所有 CSS 下載、剖析並套用至網頁「之後」才會要求該元素，而不是在原始標記的預先載入掃描器找到該元素後立即擷取。

由於所有主要瀏覽器都支援 <img> 元素的 loading 屬性，因此無需使用 JavaScript 延遲載入圖片，因為在網頁中加入額外的 JavaScript 來提供瀏覽器已經提供的功能，會影響網頁效能的其他層面，例如 INP。

圖片延遲載入示範

延遲載入 <iframe> 元素

在可視區域顯示 <iframe> 元素前延遲載入元素，可以儲存大量資料，並改善頂層頁面載入所需的重要資源。此外，由於 <iframe> 元素基本上是在頂層文件中載入的整個 HTML 文件，因此可包含大量子資源 (尤其是 JavaScript)，如果這些影格中的工作需要大量的處理時間，這些子資源可能會連帶影響網頁的 INP。

第三方嵌入是 <iframe> 元素的常見用途。舉例來說，內嵌影片播放器或社群媒體貼文通常會使用 <iframe> 元素，這些元素通常會需要大量的子資源，這也可能導致頂層頁面資源面臨頻寬爭用。例如，延遲載入 YouTube 影片的嵌入時，可在初次載入頁面時儲存超過 500 KiB，而延遲載入 Facebook 的「讚」按鈕外掛程式可節省超過 200 KiB (大部分是 JavaScript)。

無論如何，只要網頁上有需要捲動的 <iframe> 下方，您不應該優先進行延遲載入，都建議您考慮延遲載入，因為這可以大幅改善使用者體驗。

<iframe> 元素的 loading 屬性

所有主要瀏覽器也支援 <iframe> 元素的 loading 屬性。loading 屬性的值及其行為與使用 loading 屬性的 <img> 元素相同：

  • 預設值為 "eager"。通知瀏覽器立即載入 <iframe> 元素的 HTML 及其子資源。
  • "lazy" 會將載入 <iframe> 元素的 HTML 及其子資源，直到與可視區域的預先定義距離之內為止。

延遲載入 iframe 示範

外牆

比起在頁面載入期間立即載入嵌入，您可以視需求載入影片來回應使用者互動。做法是先顯示圖片或其他適當的 HTML 元素，直到使用者與圖片互動。使用者與元素互動後，您可以將其替換為第三方嵌入項目。這項技巧稱為「門面」。

外牆的常見用途是第三方服務中的影片嵌入。在這類嵌入，除了影片內容本身外，嵌入可能還會載入許多額外且可能昂貴的子資源，例如 JavaScript。在這類情況下，除非有條件有自動播放影片，否則影片嵌入需要使用者在點選播放按鈕前與影片互動。

把握這個絕佳機會，顯示看起來與嵌入影片相似的靜態圖片，並節省處理過程中的大量頻寬。使用者按一下圖片後，系統會將圖片替換成實際的 <iframe> 嵌入，藉此觸發第三方 <iframe> 元素的 HTML 及其子資源，開始下載圖片。

除了改善初始網頁載入，還有另一個好處是，如果使用者從未播放影片，那麼提供影片所需的資源就永遠不會下載。這是很好的模式，因為可確保使用者只下載他們「實際」要的內容，而不會對使用者需求做出對錯的假設。

即時通訊小工具也是立面技巧的另一個極佳用途。大多數即時通訊小工具會下載大量 JavaScript，可能會對網頁載入和回應使用者輸入動作造成負面影響。與預先載入任何項目一樣，費用會在載入時間產生，但如果使用即時通訊小工具，並非使用者從未打算與任何使用者互動。

另一方面，您可以將第三方的「發起即時通訊」按鈕替換為模擬按鈕。當使用者與使用者互動 (例如將指標懸停在合理時間範圍內，或點選) 時，系統就會在使用者需要時，將實際的即時通訊小工具顯示為版位。

雖然您也可以打造自己的外觀，但您可以使用開放原始碼選項，讓較熱門的第三方運用，例如 lite-youtube-embed 用於 YouTube 影片、lite-vimeo-embed 用於 Vimeo 的影片，以及用於即時通訊小工具的 React Live Chat 載入器。

JavaScript 延遲載入程式庫

如果您需要延遲載入 <video> 元素、<video> 元素 poster 圖片、CSS background-image 屬性載入的圖片或其他不支援的元素，您可以利用以 JavaScript 為基礎的延遲載入解決方案 (例如 Lazysizes 或 yall.js)，因為延遲載入這類資源並不是瀏覽器層級功能。

特別是，在沒有音軌的情況下，自動播放及循環播放 <video> 元素是比使用動畫 GIF 更有效，比起使用動畫 GIF 的影片資源，通常比使用同等視覺品質的影片資源還要大好幾倍。即便如此，這些影片在頻寬方面可能還是可觀，因此延遲載入是額外的最佳化做法，可大幅減少浪費頻寬。

這些程式庫大多使用 Intersection Observer API，以及 Mutation Observer API (如果網頁的 HTML 在初始載入後發生變更)，就能判斷元素何時進入使用者的可視區域。如果圖片會顯示或靠近可視區域，JavaScript 程式庫會將非標準屬性 (通常是 data-src 或類似屬性) 替換成正確的屬性，例如 src。

假設您有一個影片取代了 GIF 動畫，但您想要利用 JavaScript 解決方案延遲載入影片。yall.js 就能採用下列標記模式：

<!-- The autoplay, loop, muted, and playsinline attributes are to
     ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
  <source data-src="video.webm" type="video/webm">
  <source data-src="video.mp4" type="video/mp4">
</video>

根據預設，yall.js 會觀察所有具備 "lazy" 類別的合格 HTML 元素。網頁載入並執行 yall.js 後，除非使用者捲動至可視區域，影片才會載入。屆時，<video> 元素子項 <source> 元素的 data-src 屬性會替換為 src 屬性，後者會傳送下載影片的要求，並自動開始播放。

學以致用

下列何者是 <img> 和 <iframe> 元素的 loading 屬性預設值？

"eager"
答對了！
"lazy"
請再試一次。

JavaScript 型延遲載入解決方案的使用時機為何？

適用於任何可以延遲載入的資源。
請再試一次。
如果資源不支援 loading 屬性，例如自動播放的影片會取代動畫圖片，或是延遲載入 <video> 元素的海報圖片，這類資源就不適用。
答對了！

什麼立場是有用的技巧？

適用於任何會耗用大量資料的第三方嵌入項目，無論使用者的需求為何。
請再試一次。
以第三方嵌入來說，在載入所需資源時不僅可載入大量資源，使用者通常也不會與某些使用者互動。
答對了！

下一項：預先擷取和預先算繪

現在，您已取得延遲載入圖片和 <iframe> 元素的控制，可以進一步確保網頁可以更快載入，同時滿足使用者的需求。但在某些情況下，對資源進行推測載入是相當不錯的做法。在下一個單元中，我們會說明預先擷取和預先算繪作業，以及這些技巧在妥善使用時如何藉由提前載入，大幅加快後續頁面的瀏覽速度。