
內容簡介
此外掛使用內建的瀏覽器功能來進行延遲加載媒體。如需了解更多關於新 loading 屬性的資訊,請參閱此處,或檢視 WordPress 核心票證中討論將類似的實作加入 WordPress 核心本身的事宜。
如果瀏覽器不支援 loading 屬性,此外掛將會退回到基於 IntersectionObserver 的 JavaScript 解決方案。假如 JavaScript 被禁止,但瀏覽器支援 loading 屬性,將會新增一個 noscript 變體,該元素也包含有 loading 屬性,而無需進行任何進一步的更改。
「原生」意味著「快速」
如果您已經找到了這裡,您可能已經意識到性能對網站的用戶體驗和成功是多麼重要了。您也可能知道,延遲加載是改善性能的關鍵功能。然而,到目前為止,延遲加載的解決方案仍然會增加一定的負擔,因為它們依賴於加載、解析和運行自定義 JavaScript 邏輯,可能對性能更或少造成負荷。
此外掛基本上消除了這種模式。它依賴於新的 loading 屬性,使延遲加載成為瀏覽器內的功能。此屬性已獲得 Chrome 的支援,並將逐步推出到其他瀏覽器中。解決方案是「原生」的,這意味著它不依賴於自定義 JavaScript 邏輯,因此更輕量級。而「更輕量級」就意味著「更快速」。
最後,需要記住的一個漂亮的功能是,隨著越來越多的瀏覽器支援 loading 屬性,此外掛本身將不斷改進。
用法
只需啟用此外掛,所有文章內容中的圖像和 iframe 將會被延遲加載。
感謝
此外掛部分基於來自 WP Rig 的邏輯,以及由 web.dev 和 developers.google.com 提出的建議。
外掛標籤
開發者團隊
原文外掛簡介
Lazy-loads media using the native browser feature. Learn more about the new loading attribute or view the WordPress core ticket where inclusion of a similar implementation in WordPress core itself is being discussed.
If the loading attribute is not supported by the browser, the plugin falls back to a JavaScript solution based on IntersectionObserver. For the case that JavaScript is disabled, but the loading attribute is supported by the browser, a noscript variant of the respective element will be added that also includes the loading attribute without any further changes.
“Native” means “Fast”
If you have found your way over here, you are probably aware of how crucial performance is for a website’s user experience and success. You might also know that lazy-loading is a key feature to improve said performance. However, the solutions for lazy-loading so far still added a bit of overhead themselves, since they relied on loading, parsing and running custom JavaScript logic, that may be more or less heavy on performance.
This plugin largely does away with this pattern. It relies on the new loading attribute, which makes lazy-loading a native browser functionality. The attribute is already supported by Chrome, and will be rolled out to other browsers over time. The solution being “native” means that it does not rely on custom JavaScript logic, and thus is more lightweight. And “more lightweight” means “faster”.
Last but not least, a neat thing to keep in mind is that this plugin will essentially improve itself over time, as more browsers roll out support for the loading attribute.
Usage
Just activate the plugin, and all your images and iframes in post content will be loaded lazily.
Credit
This plugin is partly based on logic from WP Rig as well as recommendations from web.dev and developers.google.com.
