延遲載入圖片和 <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 為基礎的延遲載入解決方案,例如 lazysizeyall.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 屬性,以便傳送影片下載要求 就會自動開始播放。

學以致用

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

"lazy"
"eager"

以 JavaScript 為基礎的延遲載入解決方案何時適合使用?

適用於任何可延遲載入的資源。
針對沒有 loading 屬性的資源 例如「自動播放影片」 動畫圖片,或延遲載入 <video> 元素的 代表圖片。

哪種立場是實用的技巧?

不需要載入所需資源的任何第三方嵌入 但有些使用者可能並非 可能會與他們互動
適用於使用大量資料的任何第三方嵌入, 滿足使用者的需求

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

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