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

圖片和 <iframe> 元素通常會比其他類型的資源耗用更多頻寬。在 <iframe> 元素的情況下，載入及轉譯其中的網頁時，可能會涉及相當多的額外處理時間。

在延遲載入圖片的情況下，延遲載入初始可視區域以外的圖片，有助於減少初始可視區域內更重要的資源的頻寬爭用情形。在某些網路連線不佳的情況下，這項功能可改善網頁的最大內容繪製 (LCP)，而重新分配的頻寬可協助LCP 候選項目更快載入及繪製。

就 <iframe> 元素而言，您可以透過延遲載入這些元素，在啟動期間改善網頁的 Interaction to Next Paint (INP)。這是因為 <iframe> 是完全獨立的 HTML 文件，且有自己的子資源。雖然 <iframe> 元素可在個別程序中執行，但通常會與其他執行緒共用程序，這可能會導致網頁對使用者輸入的回應速度變慢。

因此，延遲載入螢幕外圖片和 <iframe> 元素是值得採用的做法，而且只需付出相當低的努力，就能獲得相當不錯的效益。本單元將說明如何延後載入這兩種元素，在網頁的關鍵啟動期間提供更快速、更優質的使用者體驗。

使用 loading 屬性延遲載入圖片

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

• "eager" 會通知瀏覽器應立即載入圖片，即使圖片不在初始檢視區範圍內也一樣。這也是 loading 屬性的預設值。
• "lazy" 會延遲載入圖片，直到圖片距離可視區域的距離達到設定值為止。這個距離會因瀏覽器而異，但通常會設為足夠大，讓使用者捲動到圖片時，圖片就能載入。

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

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

您應該只在位於初始可視區域外的 <img> 元素中新增 loading="lazy" 屬性。不過，在網頁算繪之前，要知道元素在可視區域內的確切位置可能會很複雜。必須考量不同的可視區域大小、顯示比例和裝置。

舉例來說，電腦版可視區域與手機版可視區域可能大不相同，因為電腦版可視區域會算繪更多垂直空間，因此可能會在初始可視區域中容納圖片，而這類圖片不會顯示在物理尺寸較小的裝置的初始可視區域中。在直向模式下使用的平板電腦也會顯示大量垂直空間，甚至可能超過某些桌上型裝置。

不過，在某些情況下，您應避免套用 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，這可能會對網頁載入和回應使用者輸入內容的速度造成負面影響。如同預先載入任何內容，費用會在載入時產生，但在即時通訊小工具的情況下，並非所有使用者都會與其互動。

另一方面，使用門面元件時，可以用假按鈕取代第三方的「Start Chat」按鈕。一旦使用者與聊天小工具進行有意義的互動 (例如將游標懸停在上面一段合理的時間，或點選)，系統就會在使用者需要時，將實際的聊天小工具放入位置。

雖然您當然可以自行建構外觀，但也有許多熱門第三方提供開放原始碼選項，例如 YouTube 影片的 lite-youtube-embed、Vimeo 影片的 lite-vimeo-embed，以及聊天小工具的 React Live Chat Loader。

JavaScript 延遲載入程式庫

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

特別是，如果沒有音軌，自動播放和循環播放 <video> 元素比使用 GIF 動畫更有效率，因為 GIF 動畫的檔案大小通常是同等視覺品質的影片資源的數倍。即便如此，這些影片在頻寬方面仍可能占用大量資源，因此延遲載入這些影片是另一項最佳化方式，可大幅減少浪費的頻寬。

這些程式庫大多使用 Intersection Observer API 運作，如果網頁的 HTML 在初始載入後變更，則會另外使用 Mutation Observer API，以便辨識元素何時進入使用者的檢視區。如果圖片可見，或接近檢視區範圍，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 會觀察所有符合條件的 HTML 元素，其類別為 "lazy"。載入並在網頁上執行 yall.js 後，影片會在使用者將影片捲動至可視區域時才載入。此時，<video> 元素子項 <source> 元素上的 data-src 屬性會換成 src 屬性，後者會傳送下載影片的請求，並自動開始播放影片。

學以致用

下回預告：預先擷取及預先算繪

您現在已瞭解如何延後載入圖片和 <iframe> 元素，因此可以確保網頁載入速度更快，同時滿足使用者的需求。不過，在某些情況下，您可能需要使用資源的推測載入功能。在下一單元中，您將瞭解預先載入和預先算繪，以及這些技術如何在謹慎使用下，透過預先載入後續網頁，大幅加快導覽速度。