Native Lazyload


這個外掛使用瀏覽器原生功能延遲載入網頁中的媒體內容。進一步瞭解全新 loading 屬性,或查看 WordPress core ticket 所討論的 WordPress 核心程式類似的實作項目。

如果使用者的瀏覽器不支援 loading 屬性,外掛會以基於 IntersectionObserver API 的 JavaScript 解決方案進行後援。對於停用 JavaScript 功能但支援 loading 屬性的瀏覽器案例,不須進行任何變更,便會加入包含 loading 屬性的對應元素 noscript 變數。


如果你在尋找解決方案,應該會發現效能對網站的使用者體驗及成功有多麼關鍵,也瞭解延遲載入對增進效能是個關鍵功能。但是延遲載入這個解決方案本身目前仍會造成負擔,因為它依賴載入、剖析及執行自訂 JavaScript 運作邏輯,這對效能或多或少會產生影響。

這個外掛在最大程度上解決了這種模式。它依賴全新的 loading 屬性,這使得延遲載入成為瀏覽器的原生功能。Chrome 已開始支援這個屬性,其他瀏覽器也會逐漸開始支援。當解決方案為「原生功能」時,代表它不會依賴自訂的 JavaScript 運作邏輯,進而輕量化,而「輕量化」就代表著「更快的速度」。

最後,隨著更多的瀏覽器支援 loading 屬性,這個外掛所能增進的效益會越來越明顯。


僅需啟用外掛,便會讓瀏覽器在瀏覽網站時,延遲載入全部頁面的圖片及 iFrame。


這個外掛的部分運作邏輯來自 WP Rig 專案,並參考 的建議。


  1. 將安裝套件 ZIP 壓縮檔解壓縮所得的 native-lazyload 資料夾上傳至網站的 /wp-content/plugins/ 目錄,或透過 WordPress 管理後台下載安裝。
  2. 在 WordPress 管理後台的 [外掛] 選單中啟用外掛。




如何不對圖片及 iFrame 進行延遲載入?

透過加入 skip-lazy 類別,便可要求外掛不對含有這個類別的圖片或 iFrame 進行延遲載入。

這個外掛仍會載入額外的 JavaScript 檔案,我不認為這是個好方法。

這是完全合理的作法。請注意,外掛僅有在使用者的瀏覽器不支援原生 loading 屬性時,才會因需要進行後援而載入 JavaScript 檔案,而這個檔案包含以非原生方式自動載入圖片的運作邏輯。如果只想依靠 loading 屬性而不進行任何後援,請在網站的程式碼庫中加入 add_filter( 'native_lazyload_fallback_script_enabled', '__return_false' ) 便可達成。

這個外掛能與 AMP 協同運作嗎?

如果網站採用了 AMP,由於 AMP 會自動以智慧方式延遲載入頁面中的媒體內容,因此不需要這個外掛。可以確定的是,這個外掛並不會與 AMP 產生相容性問題。


如為一般技術支援要求,請前往 技術支援論壇提出。如果外掛發生技術問題,而你已經瞭解如何修復這個問題,請改在外掛的 GitHub 存放庫提出。


如果對這個外掛有任何改進或修正程式碼錯誤的意見,請直接在這個外掛的 Github 存放庫提出問題或提取要求,但需遵守專案參與準則

你也可以透過本地化這個外掛的方式參與專案,請前往 便可開始著手進行。


2020 年 2 月 27 日
First, did not break my site and it did lazyload most of the page images. It does not lazyload images if they are served from a different host. Example, unbounce, etc. I will add another caveat, all of my images and their versions are always carefully resized and highly compressed. Checked with lighthouse and my score took a hit downwards. 13 points down on performance score. I tested on my Staging area, uncached. FCP went from 2.1s to 4.2s, all of the other metrics, including time to interactive, CPU idle, speed index and First Meaningful Paint took a dive. I will chuck this to I was already hyperoptimized and lazy loading is not truly needed on my site/s. But I would advise others to try it out (not on their live site) and test speed with Google Lighthouse before and after.
2020 年 2 月 17 日
Seems to work well. On browsers that don't support lazy loading, it doesn't seem to load the images as soon as I would like. As in there can be a bit of a delay between scrolling and the image appearing on screen. Not to bad though. Not going to worry about it as native image loading is the way of the future and will be implemented into more browsers.
2020 年 2 月 15 日
I did a test with only wp supercache and this plugin, i have a lot images on my website, test on a page: was at 15s, moved to 7s (page with 9 big images) test on Gtmetrix I like the idea of plug and play and it works Thank you to the authors for this plugin
2020 年 1 月 30 日
So far i never have single issue with this plugin. I highly recommend it to newbies because this plugin works without breaking AMP.
2019 年 12 月 26 日
Was using regular lazy load plugins, but this thing takes it up a notch. Not just because of the native lazy load, which in itself is absolutely brilliant an an idea whose time had come, but I just like it that it doens't clutter the backend with unnecessary pages. Does what it says. Activate and forget.
閱讀全部 28 則使用者評論


以下人員參與了開源軟體〈Native Lazyload〉的開發相關工作。


Native Lazyload 外掛目前已有 15 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將 Native Lazyload 外掛本地化為台灣繁體中文版


任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄



  • Fix broken images which are using data URI scheme (e.g. base64-encoded images). Props ieim.
  • Fix images in IE 11 not being loaded until the user starts scrolling. Props Soean.
  • Fix image loading script not working in IE10 and other browsers that do not support dataset.


  • Improve compatibility with other plugins by using more specific class and only adding it for JS fallback.
  • Run lazy-load script on DOMContentLoaded when necessary to improve compatibility with plugins like Autoptimize.
  • Do not transform elements inside an AJAX response due to lack of predictability of the context and script execution.


  • Initial release