{"id":401851,"date":"2024-06-05T08:00:00","date_gmt":"2024-06-05T08:00:00","guid":{"rendered":"https:\/\/www.weixiaoduo.com\/plugins\/image-prioritizer\/"},"modified":"2025-04-09T23:06:00","modified_gmt":"2025-04-09T23:06:00","slug":"image-prioritizer","status":"publish","type":"post","link":"https:\/\/www.weixiaoduo.com\/plugins\/image-prioritizer\/","title":{"rendered":"Image Prioritizer"},"content":{"rendered":"

This plugin optimizes the loading of images (and videos) with prioritization to improve Largest Contentful Paint<\/a> (LCP), lazy loading, and more accurate image size selection.<\/p>\n

The current optimizations include:<\/p>\n

    \n
  1. Add breakpoint-specific fetchpriority=high<\/code> preload links (both as LINK[rel=preload]<\/code> elements and Link<\/code> response headers) for image URLs of LCP elements:\n
      \n
    1. An IMG<\/code> element, including the srcset<\/code>\/sizes<\/code> attributes supplied as imagesrcset<\/code>\/imagesizes<\/code> on the LINK<\/code>.<\/li>\n
    2. The first SOURCE<\/code> element with a type<\/code> attribute in a PICTURE<\/code> element. (Art-directed PICTURE<\/code> elements using media queries are not supported.)<\/li>\n
    3. An element with a CSS background-image<\/code> inline style<\/code> attribute.<\/li>\n
    4. An element with a CSS background-image<\/code> applied with a stylesheet (when the image is from an allowed origin).<\/li>\n
    5. A VIDEO<\/code> element\u2019s poster<\/code> image.<\/li>\n<\/ol>\n<\/li>\n
    6. Ensure fetchpriority=high<\/code> is only added to an IMG<\/code> when it is the LCP element across all responsive breakpoints.<\/li>\n
    7. Add fetchpriority=low<\/code> to IMG<\/code> tags which appear in the initial viewport but are not visible, such as when they are subsequent carousel slides.<\/li>\n
    8. Lazy loading:\n
        \n
      1. Apply lazy loading to IMG<\/code> tags based on whether they appear in any breakpoint\u2019s initial viewport.<\/li>\n
      2. Implement lazy loading of CSS background images added via inline style<\/code> attributes.<\/li>\n
      3. Lazy-load VIDEO<\/code> tags by setting the appropriate attributes based on whether they appear in the initial viewport. If a VIDEO<\/code> is the LCP element, it gets preload=auto<\/code>; if it is in an initial viewport, the preload=metadata<\/code> default is left; if it is not in an initial viewport, it gets preload=none<\/code>. Lazy-loaded videos also get initial preload<\/code>, autoplay<\/code>, and poster<\/code> attributes restored when the VIDEO<\/code> is going to enter the viewport.<\/li>\n<\/ol>\n<\/li>\n
      4. Responsive image sizes:\n
          \n
        1. Compute the sizes<\/code> attribute using the widths of an image collected from URL Metrics for each breakpoint (when not lazy-loaded since then handled by sizes=auto<\/code>).<\/li>\n
        2. Ensure sizes=auto<\/code><\/a> is set on IMG<\/code> tags after setting correct lazy-loading (above).<\/li>\n<\/ol>\n<\/li>\n
        3. Reduce the size of the poster<\/code> image of a VIDEO<\/code> from full size to the size appropriate for the maximum width of the video (on desktop).<\/li>\n<\/ol>\n

          This plugin requires the Optimization Detective<\/a> plugin as a dependency.<\/strong> Please refer to that plugin for additional background on how this plugin works as well as additional developer options.<\/p>\n

          \ud83d\udc49 Note:<\/strong> This plugin optimizes pages for actual visitors, and it depends on visitors to optimize pages. As such, you won\u2019t 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.<\/p>\n

          Your site must have the REST API accessible<\/strong> to unauthenticated frontend visitors since this is how metrics are collected about how a page should be optimized. There are currently no settings<\/strong> and no user interface for this plugin since it is designed to work without any configuration.<\/p>\n","protected":false},"excerpt":{"rendered":"

          Prioritizes the loading of images and videos based on how they appear to actual visitors: adds fetchpriority, preloads, lazy-loads, and sets sizes.<\/p>\n","protected":false},"author":65,"featured_media":401852,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"Image Prioritizer - \u8587\u6653\u6735\u63d2\u4ef6\u76ee\u5f55","description":"Prioritizes the loading of images and videos based on how they appear to actual visitors: adds fetchpriority, preloads, lazy-loads, and sets sizes."},"footnotes":""},"categories":[1],"tags":[223,1572,28710,517,64],"class_list":["post-401851","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image","tag-lazy-load","tag-lcp","tag-optimization","tag-performance"],"_links":{"self":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/401851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/comments?post=401851"}],"version-history":[{"count":0,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/401851\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media\/401852"}],"wp:attachment":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media?parent=401851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/categories?post=401851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/tags?post=401851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}