圖片和 <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
屬性,以便傳送影片下載要求
就會自動開始播放。
學以致用
下列何者是 loading
屬性的預設值
<img>
和 <iframe>
元素?
"lazy"
"eager"
以 JavaScript 為基礎的延遲載入解決方案何時適合使用?
loading
屬性的資源
例如「自動播放影片」
動畫圖片,或延遲載入 <video>
元素的
代表圖片。
哪種立場是實用的技巧?
下一項:預先擷取和預先轉譯
現在,您已擁有延遲載入圖片和 <iframe>
元素的控制代碼,
那就很適合這麼做
同時尊重使用者的需求但是在某些情況下
您希望透過推測式載入資源在下一個單元中
瞭解預先擷取和預先算繪,以及這些技術的使用時機
即可大幅加快瀏覽後續網頁的速度
以備不時之需