Image Prioritizer

外掛說明

This plugin optimizes the loading of images which are the LCP (Largest Contentful Paint) element, including both img elements and elements with CSS background images (where there is a style attribute with an background-image property). Different breakpoints in a theme’s responsive design may result in differing elements being the LCP element. Therefore, the LCP element for each breakpoint is captured so that high-fetchpriority preload links with media queries are added which prioritize loading the LCP image specific to the viewport of the visitor.

In addition to prioritizing the loading of the LCP image, this plugin also optimizes image loading by ensuring that loading=lazy is omitted from any image that appears in the initial viewport for any of the breakpoints, which by default include:

  1. 0-320 (small smartphone)
  2. 321-480 (normal smartphone)
  3. 481-576 (phablets)
  4. >576 (desktop)

If an image does not appear in the initial viewport for any of these viewport groups, then loading=lazy is added to the img element.

👉 Note: This plugin optimizes pages for actual visitors, and it depends on visitors to optimize pages (since URL metrics need to be collected). As such, you won’t see optimizations applied immediately after activating the plugin. And since administrator users are not normal visitors typically, optimizations are not applied for admins by default.

There are currently no settings and no user interface for this plugin since it is designed to work without any configuration.

This plugin requires the Optimization Detective plugin as a dependency. Please refer to that plugin for additional background on how this plugin works as well as additional developer options.

安裝方式

自動安裝

  1. 前往 [外掛]→[安裝外掛]
  2. Search for Image Prioritizer.
  3. Install and activate the Image Prioritizer plugin.

手動安裝

  1. Upload the entire image-prioritizer folder to the /wp-content/plugins/ directory.
  2. 前往 [外掛] 頁面。
  3. Activate the Image Prioritizer plugin.

常見問題集

使用者可以在何處提交外掛意見反應?

Feedback is encouraged and much appreciated, especially since this plugin may contain future WordPress core features. If you have suggestions or requests for new features, you can submit them as an issue in the WordPress Performance Team’s GitHub repository. If you need help with troubleshooting or have a question about the plugin, please create a new topic on our support forum.

在何處可以回報安全性程式碼錯誤?

效能團隊及 WordPress 社群對安全性程式碼錯誤一向嚴陣以待,我們非常感謝使用者披露相關發現所付出的心力,並會盡全力解決使用者提出的問題。

如需回報安全性問題,請參考 WordPress HackerOne 計畫。

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

非常感謝各位的各種貢獻!請參考核心程式效能團隊手冊以進一步了解參與的方式。

The plugin source code is located in the WordPress/performance repo on GitHub.

使用者評論

這個外掛目前沒有任何使用者評論。

參與者及開發者

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

參與者

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

將〈Image Prioritizer〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

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

變更記錄

0.1.2

  • Update PHP logic to account for changes in Optimization Detective API. (1302)

0.1.1

  • Fix background-image styled tag visitor’s handling of parsing style without background-image. (1288)

0.1.0

  • Initial release.