Native Lazyload

外掛說明

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

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

原生功能,就是快

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

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

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

使用方式

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

引用資訊

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

安裝方式

  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 產生相容性問題。

在何處可以提出技術支援要求?

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

如何為這個外掛做出貢獻?

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

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

使用者評論

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.
2019 年 12 月 6 日
Initially some minor issues with IE11 but it is now fixed. Also google's lazy load attribute has some more smarts built into it then the typical lazy load scripts you are use to using, so you may be a little confused when it looks like nothing is happening and images are not being lazy loaded, but they are! just in a more advanced and discreet way, use dev tools to see for yourself. Bonus: Once IE11 is finally decommissioned, you'll be able to disable this plugin, by then all browsers and WordPress should have native support for the new lazy-load attribute.
閱讀全部 27 則使用者評論

參與者及開發者

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

參與者

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

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

對開發相關資訊感興趣?

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

變更記錄

1.0.2

  • 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.

1.0.1

  • 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.

1.0.0

  • Initial release