延遲載入圖片和 <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，這可能會對網頁載入速度和使用者輸入內容的回應速度造成負面影響。與預先載入任何內容一樣，費用會在載入時產生，但如果是即時通訊小工具，並非所有使用者都不打算與其互動。

另一方面，使用門面元件時，可以將第三方「開始對話」按鈕替換為虛擬按鈕。使用者與預先載入的聊天小工具互動 (例如將指標停留在小工具上一段時間，或點選小工具) 時，系統會在使用者需要時，將實際可用的聊天小工具插入適當位置。

雖然您當然可以自行建構外觀，但對於較熱門的第三方，也有開放原始碼選項可用，例如 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> 元素的延遲載入功能，可確保網頁載入速度更快，同時滿足使用者需求。不過，在某些情況下，預先載入資源可能會有好處。在下一個單元中，您將瞭解預先擷取和預先算繪，以及如何謹慎使用這些技術，預先載入後續網頁，大幅加快導覽速度。