瀏覽器支援
延遲載入 <iframe>
元素會阻止系統載入螢幕外 iframe
直到使用者捲動地圖附近這樣可以儲存資料,並加快
並降低記憶體用量
和圖片的延遲載入功能一樣,
使用 loading
屬性告知瀏覽器要延遲載入 iframe。
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>
這個「<iframe loading=lazy>
」示範
會顯示延遲載入影片嵌入項目:
為什麼要使用延遲載入 iframe?
第三方嵌入的內容包羅萬象,從影片播放器到 社群媒體貼文加入廣告這項內容通常不會立即顯示在 但使用者仍需付費下載資料 每個頁框的 JavaScript,即使它們並未捲動也一樣。
![透過針對 iframe 使用 iframe 延遲載入功能,可以節省數據流量。在這個範例中,「即時載入」會提取 3 MB 的內容,而延遲載入功能並不會提取這段程式碼,直到使用者捲動接近 iframe 為止。](https://web.dev/static/articles/iframe-lazy-loading/image/data-savings-using-ifram-721849ff3b329.png?authuser=1&hl=zh-tw)
根據 Chrome 的研究自動延遲載入螢幕外 iframe Data Saver 使用者」 延遲載入 iframe 可將數據中位數減少 2% 至 3%,1% 至 2% 首次顯示內容所需時間 (中位數) 降低,2% 首次輸入延遲時間 (FID) 提升至第 95 個百分位數。
延遲載入螢幕外 iframe 也有助於改善網頁的最大 內容繪製 (LCP)。由於 iframe 通常需要 提供大量頻寬以載入所有子資源 螢幕外的 iframe 可減少網路限制頻寬爭用情形 因而釋出更多頻寬來載入網頁 LCP。
iframe 的內建延遲載入功能如何運作?
loading
屬性可讓瀏覽器延遲載入畫面外 iframe,
直到使用者捲動畫面附近loading
支援兩個值:
lazy
:適合延遲載入的候選文字。eager
:不適合延遲載入。立即載入。
在 iframe 上使用 loading
屬性的運作方式如下:
<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>
<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
width="600"
height="400"></iframe>
不指定屬性的影響與明確急速載入的影響相同 資源
如果您要動態使用 JavaScript 建立 iframe,請將
元素上的 iframe.loading = 'lazy'
也
支援:
var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);
延遲載入熱門 iframe 嵌入如何影響使用者體驗?
將延遲載入 iframe 設為預設圖片,可提升網站的回應速度。 以下範例顯示了互動準備時間 (TTI) 的改善和資料 因媒體嵌入廣告而省下來的成本 但延遲載入廣告 iframe 能帶來類似效果 好處
YouTube
延遲載入 YouTube 影片嵌入可以在初次載入網頁時節省約 500 KB:
<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
loading="lazy"
width="560"
height="315"
frameborder="0"
allow="accelerometer; autoplay;
encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen></iframe>
![Chrome.com 可將 YouTube 影片內嵌的螢幕外 iframe 延遲載入,讓互動時間縮短 10 秒](https://web.dev/static/articles/iframe-lazy-loading/image/chromecom-achieved-10-s-80c4aa3655294.png?authuser=1&hl=zh-tw)
Instagram 嵌入提供標記區塊和指令碼,可將 iframe 插入網頁中。延遲載入這個 iframe 可避免 編寫指令碼,在初始載入時可省下約 100 KB。由於 通常在大部分的文章中,這些嵌入項目都會顯示在可視區域下方 適用於 iframe 延遲載入的合理候選文字。
Spotify
延遲載入 Spotify 嵌入項目可在初始載入時節省 514 KB。
<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
loading="lazy"
width="300"
height="380"
frameborder="0"
allowtransparency="true"
allow="encrypted-media"></iframe>
Facebook 社交外掛程式
Facebook 社交外掛程式可讓開發人員將 Facebook 內容嵌入 網頁。其中最受歡迎的就是 Like 外掛程式 請點選按鈕,查看有多少使用者已表示喜歡該網頁。根據預設 我們透過 Facebook JSSDK 在網頁上提取約 215 KB 的 197 KB 是 JavaScript外掛程式通常出現在結尾處 文章或靠近網頁結尾處 所以在文章離開畫面時立即載入 甚至可能無法達到最佳效果
![Facebook 的類似外掛程式](https://web.dev/static/articles/iframe-lazy-loading/image/facebook-button-e0eb339d5d796.png?authuser=1&hl=zh-tw)
感謝工程師 Stoyan Stefanov,所有 Facebook 社交外掛程式現已支援
支援標準化 iframe
延遲載入功能。
選擇透過外掛程式data-lazy
現在可以防止這些外掛程式在使用者捲動畫面前載入
就在附近。這樣嵌入就能繼續運作,供有需要的使用者
儲存資料。希望您有所幫助
這是許多在 Google 平台
。
跨瀏覽器 iframe 延遲載入
所有主要瀏覽器皆完整支援瀏覽器層級的 iframe 延遲載入功能,而且在大多數的情況下都建議使用,不必依賴 JavaScript。
不過,如果您需要支援更多瀏覽器,或想要進一步控制延遲載入門檻,可以使用第三方程式庫在網站上延遲載入 iframe。
您也可以使用 Lazysize JavaScript 程式庫:
<script src="lazysizes.min.js" async></script>
<iframe frameborder="0"
class="lazyload"
allowfullscreen=""
width="600"
height="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
使用下列模式來偵測延遲載入和擷取延遲大小 功能無法使用時:
<iframe frameborder="0"
class="lazyload"
loading="lazy"
allowfullscreen=""
width="600"
height="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
<script>
if ('loading' in HTMLIFrameElement.prototype) {
const iframes = document.querySelectorAll('iframe[loading="lazy"]');
iframes.forEach(iframe => {
iframe.src = iframe.dataset.src;
});
} else {
// Dynamically import the LazySizes library
const script = document.createElement('script');
script.src =
'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
document.body.appendChild(script);
}
</script>
螢幕外 iframe 延遲載入是否有例外狀況?
早期實驗:針對數據節省模式使用自動延遲載入 iframe Chrome 使用者擁有隱藏 iframe 的例外狀況,通常用於 以及數據分析或數據分析可避免延遲載入 隨時保持載入狀態,以避免破壞功能。
loading
屬性不會套用這些經驗法則,因此開發人員始終
所以要選擇延遲載入的項目loading
屬性應一律為
並受到距離限制和其他瀏覽器選擇 (例如列印) 的影響。
資源
如要進一步瞭解延遲載入的點子,請參閱 web.dev 的 圖片和影片延遲載入集合。
感謝 Dom Farolino、Scott Little、Houssein Djirdeh、Simon Pieters、Kayce Basques、Joe Medley 和 Stoyan Stefanov 提供評論。