前言介紹
- 這款 WordPress 外掛「Image Prioritizer」是 2024-06-04 上架。
- 目前有 30000 個安裝啟用數。
- 上一次更新是 2025-04-09,距離現在已有 24 天。
- 外掛最低要求 WordPress 6.6 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.2 以上。
- 尚未有人給過這款外掛評分。
- 論壇上目前有 1 個提問,問題解答率 100% ,不低,算是個很有心解決問題的開發者團隊了!
外掛協作開發者
外掛標籤
lcp | image | lazy load | performance | optimization |
內容簡介
### 總結:
這個外掛通過優化圖片的加載,特別是 LCP(最大內容繪製時間)元素,包括 img 元素和帶有 CSS 背景圖像的元素。它還通過捕獲每個斷點的 LCP 元素來實現增強。此外,通過確保在任何斷點的初始視口中顯示的圖像中省略 loading=lazy,從而優化圖像加載。
### 問題與答案:
- 外掛的主要功能是什麼?
- 優化圖片的加載,尤其是 LCP 元素。
- 在哪些裝置上,loading=lazy 會被忽略?
- 在以下視窗組中:
- 0-320 (小型智能手機)
- 321-480 (普通智能手機)
- 481-576 (平板電腦)
- 大於576 (桌面)
- 這個外掛是否能立即生效?
- 不是,由於需要收集 URL 指標,因此需要真正的訪客來優化頁面,所以在啟用外掛後不會立即看到優化效果。
- 為什麽這個外掛沒有設置和用戶界面?
- 因為它旨在無需任何配置即可運行。
- 這個外掛需要依賴哪個外掛?
- 需要 Optimization Detective 外掛作為依賴。
原文外掛簡介
This plugin optimizes the loading of images (and videos) with prioritization to improve Largest Contentful Paint (LCP), lazy loading, and more accurate image size selection.
The current optimizations include:
Add breakpoint-specific fetchpriority=high preload links (both as LINK[rel=preload] elements and Link response headers) for image URLs of LCP elements:
An IMG element, including the srcset/sizes attributes supplied as imagesrcset/imagesizes on the LINK.
The first SOURCE element with a type attribute in a PICTURE element. (Art-directed PICTURE elements using media queries are not supported.)
An element with a CSS background-image inline style attribute.
An element with a CSS background-image applied with a stylesheet (when the image is from an allowed origin).
A VIDEO element’s poster image.
Ensure fetchpriority=high is only added to an IMG when it is the LCP element across all responsive breakpoints.
Add fetchpriority=low to IMG tags which appear in the initial viewport but are not visible, such as when they are subsequent carousel slides.
Lazy loading:
Apply lazy loading to IMG tags based on whether they appear in any breakpoint’s initial viewport.
Implement lazy loading of CSS background images added via inline style attributes.
Lazy-load VIDEO tags by setting the appropriate attributes based on whether they appear in the initial viewport. If a VIDEO is the LCP element, it gets preload=auto; if it is in an initial viewport, the preload=metadata default is left; if it is not in an initial viewport, it gets preload=none. Lazy-loaded videos also get initial preload, autoplay, and poster attributes restored when the VIDEO is going to enter the viewport.
Responsive image sizes:
Compute the sizes attribute using the widths of an image collected from URL Metrics for each breakpoint (when not lazy-loaded since then handled by sizes=auto).
Ensure sizes=auto is set on IMG tags after setting correct lazy-loading (above).
Reduce the size of the poster image of a VIDEO from full size to the size appropriate for the maximum width of the video (on desktop).
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.
👉 Note: This plugin optimizes pages for actual visitors, and it depends on visitors to optimize pages. As such, you won’t see optimizations applied immediately after activating the plugin. Please wait for URL Metrics to be gathered for both mobile and desktop visits. And since administrator users are not normal visitors typically, optimizations are not applied for admins by default.
Your site must have the REST API accessible to unauthenticated frontend visitors since this is how metrics are collected about how a page should be optimized. There are currently no settings and no user interface for this plugin since it is designed to work without any configuration.
各版本下載點
- 方法一:點下方版本號的連結下載 ZIP 檔案後,登入網站後台左側選單「外掛」的「安裝外掛」,然後選擇上方的「上傳外掛」,把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二:透過「安裝外掛」的畫面右方搜尋功能,搜尋外掛名稱「Image Prioritizer」來進行安裝。
(建議使用方法二,確保安裝的版本符合當前運作的 WordPress 環境。
0.1.0 | 0.1.1 | 0.1.2 | 0.1.3 | 0.1.4 | 0.2.0 | 0.3.0 | 0.3.1 | trunk | 1.0.0-beta1 | 1.0.0-beta2 |
延伸相關外掛(你可能也想知道)
Image Optimization by Optimole – Lazy Load, CDN, Convert WebP & AVIF, Optimize Images 》, Optimole的獨特之處在哪裡?, , 更小的圖片,同樣的品質, 完全自動化;設定一次就忘記它, 支援所有圖片格式, 支援Retina和WebP圖片, 以機器學習為基礎的自...。
Imsanity 》使用 Imsanity,自動調整大型圖片上傳大小。選擇你喜歡的尺寸和品質,讓 Imsanity 完成其餘所有工作。當投稿者上傳大於配置尺寸的圖片時,Imsanity 將自動將...。
Firelight Lightbox 》Easy FancyBox WordPress外掛為您的網站提供靈活美觀的光箱解決方案,幾乎適用於網站上的所有媒體連結。Easy FancyBox使用更新的傳統FancyBox jQuery擴展版本...。
Simple Lightbox 》Simple Lightbox 是一個非常簡單且可自定義的燈箱,在您的 WordPress 網站上添加它非常容易。, 功能, 自定義燈箱行為的選項位於外觀 > Lightbox 管理員菜...。
Robin image optimizer — save money on image compression 》需要專業支援嗎?, 開始免費支援, 開始高級支援, 透過減少圖像大小,讓您的網站加快速度。我們的 WordPress 圖像優化外掛,可以將圖像大小減少80%,而且不損...。
Responsive Lightbox & Gallery 》提供完整的 WordPress 相簿外掛所需一切, Responsive Lightbox and Gallery 外掛是一個全功能的 WordPress 相簿外掛,擁有強大的拖放相簿生成器和 Lightbox ...。
reSmush.it : The original free image compressor and optimizer plugin 》reSmush.it Image Optimizer 是一個 WordPress 外掛,透過 reSmush.it API 提供圖片優化服務。reSmush.it 使用多種高級演算法對圖像進行大小減小。API 支援最...。
Menu Image, Icons made easy 》這個外掛可以輕鬆地在選單項目中加入圖像或圖示,打造更好的網站選單。, 可以控制圖像或圖示的位置以及大小。, 這個 Menu Image 外掛還有其他功能,以下是其...。
Image Widget 》Image Widget 是一個簡單的外掛程式,利用 WordPress 原生媒體管理員,為您的網站新增圖片小工具。, 需要新增幻燈片、燈箱或隨機圖像嗎?, 請查看 Image Widg...。
Featured Image from URL (FIFU) 》h3>WordPress 外掛 - 用於顯示外部特色圖片、影片、音訊等等, FIFU 自 2015 年來已幫助全球數千個網站節省了儲存空間、處理時間和版權費用。, 如果您已經厭倦...。
Default Featured Image 》在媒體設定頁面上新增一個預設的特色圖像。如果沒有設定任何特色圖像,這個預設的特色圖像就會顯示。就這麼簡單。, 查看常見問題以獲取基本問題資訊。, 如果...。
All In One Favicon 》查看最新的WordPress交易以優化您的網站。, All In One Favicon為您的網站和管理頁面添加favicon。, 您可以使用您已經上傳的favicon或使用內置的上傳機制將fa...。
ImageMagick Engine 》透過讓 WordPress 使用 ImageMagick 而非標準的 GD 圖像庫,大幅提升重新調整大小的圖像品質。, 功能, , 在重新調整大小的圖像中保留嵌入式色彩設定檔, 自動...。
WP Featherlight – A Simple jQuery Lightbox 》WP Featherlight 是一個 WordPress 外掛,可為您的WordPress 網站添加一個極簡、高效、響應式 jQuery 燈箱。在其核心,WP Featherlight是一個用於 Featherlig...。
Phoenix Media Rename 》通過使用「Phoenix Media Rename」外掛,將您的媒體檔案重新命名,極大地提高您的 SEO。, 在Phoenix Media Rename 官方頁面上提供了完整的使用和設置指南。。