WordPress.org

Taiwan 正體中文

取得 WordPress
WordPress.org

Plugin Directory

Native Lazyload

這個外掛並未在最新的 3 個 WordPress 主要版本上進行測試。開發者可能不再對這個外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。

Native Lazyload

由 Google 開發
下載

外掛說明

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

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

原生功能，就是快

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

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

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

使用方式

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

引用資訊

這個外掛的部分運作邏輯來自 WP Rig 專案，並參考 web.dev 及 developers.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 便可開始著手進行。

使用者評論

Native lazy loading – the only viable lazy loading solution

2020 年 12 月 31 日
This plugin adds loading=”lazy” and then, the browser lazy loads the image. I think that native lazy loading performed by the browser is the only viable solution for lazy loading. For many years, I tried to implement lazy loading on my websites. I faced many issues. Once images were not crawled. Once my website was penalized because of cloaking. Versions differed depending on the client. I am enough with javascript scripts that slow down the pageload and negatively impact the pagespeed insight. I think that for now and in the future, the native lazy loading is the only way to go for lazy loading.

Broken on safari

2020 年 8 月 13 日
Hey guys – Can you please fix this in the latest Safari. Thanks!

It does not improve my sites

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.

Does what it says

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.
閱讀全部 31 則使用者評論

參與者及開發者

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

參與者

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

將〈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

中繼資料

評分

3 星，滿分為 5 星

新增使用者評論

查看全部使用者評論

技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

檢視技術支援論壇