對WordPress 5.7的iframe的本機延遲載入支持

Google的WordPress核心提交者和開發人員計劃工程師Felix Arntz宣布即將支持 延遲載入iframe。 該功能包含在最新的WordPress 5.7 beta中,並將於下個月正式向更大的社區發布。

WordPress已支持 圖像的延遲載入 從5.5版開始。 但是,初始功能集不包括對iframe的支持。 當時,瀏覽器對iframe的支持非常廣泛。 但是,它尚未正式作為HTML生活標準的一部分。 此後不久, 添加到HTML規範,討論重新開始 增加支持 進入WordPress。

與圖片不同,許多用戶可能沒有意識到他們正在使用iframe。 iframe的主要用例是使用嵌入塊或針對經典編輯器上的用戶的自動嵌入系統。 例如,每當用戶將YouTube視頻添加到其博客帖子時,底層代碼就會輸出iframe。

iframes的本機懶載入支持即將到WordPress 5-7 iframe的本機懶載入支持即將到WordPress 5.7YouTube嵌入的源代碼顯示iframe。

這些iframe增加了頁面大小的重量,並阻礙了載入時間。

延遲載入的相反是渴望載入。 這是Web上的默認設置,它將批量載入所有資源。 當網頁包含許多圖片或iframe時,這通常也會導致網頁載入緩慢。 延遲載入僅在圖像和iframe源出現在網站訪問者的視口中時載入。 這樣可以加快頁面的初始載入時間。

如果為iframe設置了明確的寬度和高度,則WordPress只會添加loading =「 lazy」屬性。 這是為了避免在iframe出現時發生頁面移動效果。 阿恩茨(Arntz)撰寫了有關這種影響的大量文章 宣布支持圖像延遲載入。 同樣的問題也適用於iframe。

他寫道:「現代網站中常見的用戶體驗問題是所謂的版式轉換,通常是由於媒體資源(如圖像)載入緩慢而引起的。」 「默認情況下,只有在載入圖像後,瀏覽器才能正確布局頁面,這會導致圖像下方的內容發生偏移。 通過在img標籤上提供width和height屬性,可以輕鬆解決此問題,因為瀏覽器將使用它們來確定圖像的長寬比,從而可以在實際載入圖像之前推斷出頁面布局。」

在某些情況下,WordPress甚至不會為其支持的oEmbed提供程序添加載入屬性。 WordPress不提供iframe內容。 第三方提供商創建HTML並將其發送回各個WordPress網站。 這些第三方應遵循最佳做法來添加寬度和高度屬性。

「由於WordPress無法猜測嵌入式資源的尺寸,因此只有在oEmbed iframe標記同時具有兩個尺寸屬性的情況下,才會添加loading =「 lazy」屬性,」 Arntz寫道。

當前,該過濾器適用於帖子內容,摘錄和文本小部件。 也許WordPress將有一天將其擴展為評論文本。

廣告的潛在問題

BlogAid的所有者MaAnna Stephenson, 引起了關注 適用於在其網站上展示廣告的用戶。 在某些情況下,廣告條款禁止延遲載入或存在技術衝突。

「是否已經通過使用Mediavine和AdThrive等廣告代理商在其網站上投放廣告的人們進行了測試?」 她問。 「他們不能延遲載入iframe,因為廣告使用iframe,並且它們具有自己的延遲載入機制來進行投放。」

問題在於,沒有理想的方法來排除每種廣告服務並將它們與其他類型的iframe區別開來。 從技術角度來看,它必須是全有或全無的功能。

處理廣告完全屬於插件領域。 Arntz在帖子中介紹了此類用例。 開發人員可以使用基本PHP禁用iframe批發的延遲載入或定位特定的iframe。 只需幾行代碼即可為特定廣告服務構建插件。

Jeff Starr還有一個用于禁用延遲載入的插件,名為 禁用延遲載入。 在出現針對用戶需求的更具體的東西之前,這可以作為權宜之計。

像這樣:

喜歡載入中……

來源

相關文章