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

圖片和 <iframe> 元素所消耗的頻寬通常高於其他類型的元素 再複習一下，機構節點 是所有 Google Cloud Platform 資源的根節點就 <iframe> 元素而言，需要額外處理 載入時間可能會涉及載入和顯示網頁中的網頁。

如果是延遲載入圖片，請延遲載入 在初始可視區域外，有助於減少頻寬爭用情形 查看初始可視區域中的重要資源這有助於改善 網頁的最大內容繪製 (LCP) 頁面 (在某些情況下需要網路連線) 而重新分配頻寬則有助於 LCP 候選載入 繪製速度更快

與 <iframe> 元素相關時，網頁的「與下一個顯示畫面的互動情形」 (INP) 可以在啟動期間透過延遲載入來改善。這是因為 <iframe> 是完全獨立的 HTML 文件，具有自己的子資源。 雖然 <iframe> 元素可以在獨立程序中執行，但這種情況並不常見 進而與其他執行緒共用程序，進而建立條件 網頁會降低網頁回應使用者輸入內容的回應速度。

因此，如果延遲載入螢幕外圖片和 <iframe> 元素， 然後只需要進行一點點工夫，才能享有 成效增幅本單元介紹延遲載入 兩種元素都能在網頁的 關鍵啟動期。

使用 loading 屬性延遲載入圖片

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

• "eager" 會通知瀏覽器應立即載入圖片。 即使該區域位於初始可視區域之外這也是 loading 屬性。
• "lazy" 將載入圖片，直到圖片與 可見區域這個距離會因瀏覽器而異，但通常是設為 讓圖片在使用者捲動畫面時載入。

值得注意的是，如果您使用 <picture> 元素， loading 屬性仍應套用至其子項 <img> 元素，而「不是」 <picture> 元素本身。這是因為 <picture> 元素是 內含其他 <source> 元素 (指向不同) 的容器 候選圖片，以及直接套用瀏覽器選擇的候選人 加入其子項 <img> 元素

請勿延遲載入位於初始可視區域的圖片

您應該只在符合以下條件的 <img> 元素中加入 loading="lazy" 屬性： 擺放在初始可視區域外然而，要掌握雲端優勢並不容易 元素與網頁前 轉譯完成的部分。不同的可視區域大小、顯示比例和裝置都必須符合 考慮成形

舉例來說，電腦可視區域與 能放大圖片的垂直空間更大 不會出現在初始檢視點中 外型十分小的裝置用於直向螢幕的平板電腦也會顯示 具有大量垂直空間 裝置。

然而，在某些情況下，您應該避免 正在套用loading="lazy"。例如，您絕對應該省略 <img> 元素的 loading="lazy" 屬性，適用於主頁橫幅 顯示 <img> 元素可能出現在 摺疊任何裝置，或靠近版面配置頂端。這點更加重要 可能屬於 LCP 候選的圖片。

延遲載入的圖片需要等待瀏覽器完成版面配置， 得知圖片的最終位置是否在可視區域中。也就是說 如果可見可視區域中的 <img> 元素包含 loading="lazy" 屬性，只有在所有 CSS 下載、剖析及 而不是等到 原始標記中的預先載入掃描器。

由於所有主要類別都支援 <img> 元素上的 loading 屬性 瀏覽器，不需要使用 JavaScript 延遲載入圖片，因為 為網頁添加額外的 JavaScript，以便瀏覽器已提供功能 影響網頁效能的其他方面，例如 INP。

圖片延遲載入示範

延遲載入 <iframe> 元素

延遲載入 <iframe> 元素，直到這些元素顯示在可視區域中為止 重要的資料並提高必要資源的載入能力 以便載入頂層網頁此外，由於 <iframe> 元素 基本上，系統會將整個 HTML 文件載入至頂層文件， 包含大量子資源，尤其是 JavaScript 如果這些頁框中的工作 處理時間相當長

第三方嵌入是 <iframe> 元素的常見用途。例如： 嵌入式影片播放器或社群媒體貼文通常會使用 <iframe> 元素。 而且通常需要大量的子資源 導致頂層頁面的資源發生頻寬爭用情形。身為 例如，延遲載入 YouTube 影片嵌入影片 初次載入網頁時，延遲載入 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 聊天室 即時通訊小工具載入器。

JavaScript 延遲載入程式庫

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

尤其是在沒有音軌的情況下，自動播放和循環播放 <video> 元素 相較於使用 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 會觀察所有合格 HTML 元素，並設定一個類別 "lazy"。在網頁上載入並執行 yall.js 後，影片並不會 直到使用者捲動至可視區域此時，data-src <video> 元素的子項 <source> 元素屬性遭到替換 傳送至 src 屬性，以便傳送影片下載要求 就會自動開始播放。

學以致用

下一項：預先擷取和預先轉譯

現在，您已擁有延遲載入圖片和 <iframe> 元素的控制代碼， 那就很適合這麼做 同時尊重使用者的需求但是在某些情況下 您希望透過推測式載入資源在下一個單元中 瞭解預先擷取和預先算繪，以及這些技術的使用時機 即可大幅加快瀏覽後續網頁的速度 以備不時之需