圖片和 <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,可能會對網頁載入和回應使用者輸入動作造成負面影響。與預先載入任何項目一樣,費用會在載入時間產生,但如果使用即時通訊小工具,並非使用者從未打算與任何使用者互動。
另一方面,您可以將第三方的「發起即時通訊」按鈕替換為模擬按鈕。當使用者與使用者互動 (例如將指標懸停在合理時間範圍內,或點選) 時,系統就會在使用者需要時,將實際的即時通訊小工具顯示為版位。
雖然您也可以打造自己的外觀,但您可以使用開放原始碼選項,讓較熱門的第三方運用,例如 lite-youtube-embed
用於 YouTube 影片、lite-vimeo-embed
用於 Vimeo 的影片,以及用於即時通訊小工具的 React Live Chat 載入器。
JavaScript 延遲載入程式庫
如果您需要延遲載入 <video>
元素、<video>
元素 poster
圖片、CSS background-image
屬性載入的圖片或其他不支援的元素,您可以利用以 JavaScript 為基礎的延遲載入解決方案 (例如 Lazysizes 或 yall.js),因為延遲載入這類資源並不是瀏覽器層級功能。
特別是,在沒有音軌的情況下,自動播放及循環播放 <video>
元素是比使用動畫 GIF 更有效,比起使用動畫 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 會觀察所有具備 "lazy"
類別的合格 HTML 元素。網頁載入並執行 yall.js 後,除非使用者捲動至可視區域,影片才會載入。屆時,<video>
元素子項 <source>
元素的 data-src
屬性會替換為 src
屬性,後者會傳送下載影片的要求,並自動開始播放。
學以致用
下列何者是 <img>
和 <iframe>
元素的 loading
屬性預設值?
"eager"
"lazy"
JavaScript 型延遲載入解決方案的使用時機為何?
loading
屬性,例如自動播放的影片會取代動畫圖片,或是延遲載入 <video>
元素的海報圖片,這類資源就不適用。
什麼立場是有用的技巧?
下一項:預先擷取和預先算繪
現在,您已取得延遲載入圖片和 <iframe>
元素的控制,可以進一步確保網頁可以更快載入,同時滿足使用者的需求。但在某些情況下,對資源進行推測載入是相當不錯的做法。在下一個單元中,我們會說明預先擷取和預先算繪作業,以及這些技巧在妥善使用時如何藉由提前載入,大幅加快後續頁面的瀏覽速度。