Skip to content

Block Visibility: Add fetchpriority=auto to IMG tags in blocks with conditional viewport visibility to prevent potential erroneous high loading priority#76302

Merged
westonruter merged 4 commits intotrunkfrom
add/fetchpriority-auto-img-in-block-visibility
Mar 9, 2026
Merged

Block Visibility: Add fetchpriority=auto to IMG tags in blocks with conditional viewport visibility to prevent potential erroneous high loading priority#76302
westonruter merged 4 commits intotrunkfrom
add/fetchpriority-auto-img-in-block-visibility

Conversation

@westonruter
Copy link
Copy Markdown
Member

What?

Fixes #76301

This adds fetchpriority=auto to IMG tags which appear in viewport-conditional blocks.

See companion ticket Core-64823 and PR for WordPress core: WordPress/wordpress-develop#11196

Why?

A hidden image with fetchpriority=high negatively impacts the LCP metric since it gets prioritized over images which are actually in the critical rendering path.

How?

Before ❌
<div
  class="entry-content alignfull wp-block-post-content has-global-padding is-layout-constrained wp-block-post-content-is-layout-constrained"
>
  <figure
    class="wp-block-image size-large wp-block-hidden-desktop wp-block-hidden-tablet"
  >
    <img
      fetchpriority="high"
      decoding="async"
      width="1024"
      height="741"
      src="http://localhost:8000/wp-content/uploads/2025/11/Bison_bison_Wichita_Mountain_Oklahoma-1024x741.jpg"
      alt="Mobile"
      class="wp-image-38"
      srcset="
        http://localhost:8000/wp-content/uploads/2025/11/Bison_bison_Wichita_Mountain_Oklahoma-1024x741.jpg  1024w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_bison_Wichita_Mountain_Oklahoma-300x217.jpg    300w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_bison_Wichita_Mountain_Oklahoma-768x556.jpg    768w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_bison_Wichita_Mountain_Oklahoma-1536x1112.jpg 1536w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_bison_Wichita_Mountain_Oklahoma-2048x1483.jpg 2048w
      "
      sizes="(max-width: 1024px) 100vw, 1024px"
    />
  </figure>

  <figure
    class="wp-block-image size-large wp-block-hidden-desktop wp-block-hidden-mobile"
  >
    <img
      decoding="async"
      width="1024"
      height="683"
      src="http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1024x683.jpg"
      alt="Tablet"
      class="wp-image-37"
      srcset="
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1024x683.jpg  1024w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-300x200.jpg    300w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-768x512.jpg    768w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1536x1025.jpg 1536w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-2048x1366.jpg 2048w
      "
      sizes="(max-width: 1024px) 100vw, 1024px"
    />
  </figure>

  <figure
    class="wp-block-image size-large wp-block-hidden-mobile wp-block-hidden-tablet"
  >
    <img
      decoding="async"
      width="1024"
      height="668"
      src="http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-1024x668.jpg"
      alt="Desktop"
      class="wp-image-36"
      srcset="
        http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-1024x668.jpg  1024w,
        http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-300x196.jpg    300w,
        http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-768x501.jpg    768w,
        http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-1536x1002.jpg 1536w,
        http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-2048x1336.jpg 2048w
      "
      sizes="(max-width: 1024px) 100vw, 1024px"
    />
  </figure>
</div>
After ✅
<div
  class="entry-content alignfull wp-block-post-content has-global-padding is-layout-constrained wp-block-post-content-is-layout-constrained"
>
  <figure
    class="wp-block-image size-large wp-block-hidden-desktop wp-block-hidden-tablet"
  >
    <img
      decoding="async"
      width="1024"
      height="741"
      fetchpriority="auto"
      src="http://localhost:8000/wp-content/uploads/2025/11/Bison_bison_Wichita_Mountain_Oklahoma-1024x741.jpg"
      alt="Mobile"
      class="wp-image-38"
      srcset="
        http://localhost:8000/wp-content/uploads/2025/11/Bison_bison_Wichita_Mountain_Oklahoma-1024x741.jpg  1024w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_bison_Wichita_Mountain_Oklahoma-300x217.jpg    300w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_bison_Wichita_Mountain_Oklahoma-768x556.jpg    768w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_bison_Wichita_Mountain_Oklahoma-1536x1112.jpg 1536w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_bison_Wichita_Mountain_Oklahoma-2048x1483.jpg 2048w
      "
      sizes="(max-width: 1024px) 100vw, 1024px"
    />
  </figure>

  <figure
    class="wp-block-image size-large wp-block-hidden-desktop wp-block-hidden-mobile"
  >
    <img
      decoding="async"
      width="1024"
      height="683"
      fetchpriority="auto"
      src="http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1024x683.jpg"
      alt="Tablet"
      class="wp-image-37"
      srcset="
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1024x683.jpg  1024w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-300x200.jpg    300w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-768x512.jpg    768w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1536x1025.jpg 1536w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-2048x1366.jpg 2048w
      "
      sizes="(max-width: 1024px) 100vw, 1024px"
    />
  </figure>

  <figure
    class="wp-block-image size-large wp-block-hidden-mobile wp-block-hidden-tablet"
  >
    <img
      decoding="async"
      width="1024"
      height="668"
      fetchpriority="auto"
      src="http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-1024x668.jpg"
      alt="Desktop"
      class="wp-image-36"
      srcset="
        http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-1024x668.jpg  1024w,
        http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-300x196.jpg    300w,
        http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-768x501.jpg    768w,
        http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-1536x1002.jpg 1536w,
        http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-2048x1336.jpg 2048w
      "
      sizes="(max-width: 1024px) 100vw, 1024px"
    />
  </figure>
</div>

Diff:

--- before.html	2026-03-08 19:01:46
+++ after.html	2026-03-08 19:01:13
@@ -5,10 +5,10 @@
     class="wp-block-image size-large wp-block-hidden-desktop wp-block-hidden-tablet"
   >
     <img
-      fetchpriority="high"
       decoding="async"
       width="1024"
       height="741"
+      fetchpriority="auto"
       src="http://localhost:8000/wp-content/uploads/2025/11/Bison_bison_Wichita_Mountain_Oklahoma-1024x741.jpg"
       alt="Mobile"
       class="wp-image-38"
@@ -30,6 +30,7 @@
       decoding="async"
       width="1024"
       height="683"
+      fetchpriority="auto"
       src="http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1024x683.jpg"
       alt="Tablet"
       class="wp-image-37"
@@ -51,6 +52,7 @@
       decoding="async"
       width="1024"
       height="668"
+      fetchpriority="auto"
       src="http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-1024x668.jpg"
       alt="Desktop"
       class="wp-image-36"

Testing Instructions

  1. Add an Image block with a large image size to a post.
  2. Configure block visibility to hide the block one or two viewports.
  3. Verify that the added IMG on the frontend has fetchpriority=auto as opposed to fetchpriority=high.

@westonruter westonruter added [Type] Performance Related to performance efforts [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Mar 9, 2026
@westonruter westonruter requested review from ramonjd and t-hamano March 9, 2026 02:05
@westonruter westonruter added this to the Gutenberg 22.8 milestone Mar 9, 2026
@westonruter westonruter moved this to 🔎 Needs Review in WordPress 7.0 Editor Tasks Mar 9, 2026
westonruter added a commit to westonruter/wordpress-develop that referenced this pull request Mar 9, 2026
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 9, 2026

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: westonruter <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: mukeshpanchal27 <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 9, 2026

Flaky tests detected in 6fedb39.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22838257338
📝 Reported issues:

Copy link
Copy Markdown
Member

@ramonjd ramonjd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch! Thanks for the PR.

Before

Image ### After Image

Also checked network priority

Before

Image

After

Image

Comment on lines +141 to +149
/*
* Set all IMG tags to be `fetchpriority=auto` so that wp_get_loading_optimization_attributes() won't add
* `fetchpriority=high` or increment the media count to effect whether subsequent IMG tags get `loading=lazy`.
*/
do {
if ( 'IMG' === $processor->get_tag() ) {
$processor->set_attribute( 'fetchpriority', 'auto' );
}
} while ( $processor->next_tag() );
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ramonjd
Copy link
Copy Markdown
Member

ramonjd commented Mar 9, 2026

Use affect instead of effect

I failed the paying attention test :) LGTM

Copy link
Copy Markdown
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice enhancement.

By the way, should we apply a similar approach to the Details block or the Accordion block? This is because these two blocks can have their content hidden by default.

Edit: I found #76269 which applies a similar approach to the Details block

*/
do {
if ( 'IMG' === $processor->get_tag() ) {
$processor->set_attribute( 'fetchpriority', 'auto' );
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: If an image already had fetchpriority="high" (or low), this will overwrite it, which could be a regression for intentionally prioritized LCP images.

Even though If we set to "auto", this is still a global mutation of all images inside the block HTML.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the image intentionally had fetchpriority="high" then this still would have been wrong, correct? It is highly unlikely that the block would be intentionally adding this while also being aware that it is in a viewport-conditional block.

@westonruter westonruter merged commit d207a27 into trunk Mar 9, 2026
44 of 46 checks passed
@westonruter westonruter deleted the add/fetchpriority-auto-img-in-block-visibility branch March 9, 2026 18:31
@github-project-automation github-project-automation bot moved this from 🔎 Needs Review to ✅ Done in WordPress 7.0 Editor Tasks Mar 9, 2026
@t-hamano
Copy link
Copy Markdown
Contributor

Although this PR does not affect WordPress core, let's backport this PR to wp/7.0 to avoid potential future conflicts in the wp/7.0 branch.

@t-hamano t-hamano added the Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 10, 2026
@github-actions github-actions bot removed the Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 10, 2026
gutenbergplugin pushed a commit that referenced this pull request Mar 10, 2026
…th conditional viewport visibility to prevent potential erroneous high loading priority (#76302)

* Add fetchpriority=low to IMG tags in blocks with conditional viewport visibility

* Add backport changelog

* Reuse HTML Tag Processor

* Use affect instead of effect

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

Co-authored-by: westonruter <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: mukeshpanchal27 <[email protected]>
@github-actions github-actions bot added the Backported to WP Core Pull request that has been successfully merged into WP Core label Mar 10, 2026
@github-actions
Copy link
Copy Markdown

I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: 9b81440

pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Mar 10, 2026
This updates the pinned hash from the `gutenberg` from `7b7fa2bc97a8029a302bd6511cf0d206b5953172` to `9b8144036fa5faf75de43d4502ff9809fcf689ad`.

The following changes are included:

- Use V2 Yjs methods for HTTP Polling (WordPress/gutenberg#76304)
- Plugin: Include Icons assets in ZIP (WordPress/gutenberg#75866)
- Ensure consistent, repeatable build results when inlining WASM files via `wasmInlinePlugin`  (WordPress/gutenberg#76113)
- Account `IS_WORDPRESS_CORE` is set. (WordPress/gutenberg#76334)
- Block Visibility: Add `fetchpriority=auto` to `IMG` tags in blocks with conditional viewport visibility to prevent potential erroneous high loading priority (WordPress/gutenberg#76302)

A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/7b7fa2bc97a8029a302bd6511cf0d206b5953172…9b8144036fa5faf75de43d4502ff9809fcf689ad.

See #64595, #64393.

git-svn-id: https://develop.svn.wordpress.org/trunk@61870 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Mar 10, 2026
This updates the pinned hash from the `gutenberg` from `7b7fa2bc97a8029a302bd6511cf0d206b5953172` to `9b8144036fa5faf75de43d4502ff9809fcf689ad`.

The following changes are included:

- Use V2 Yjs methods for HTTP Polling (WordPress/gutenberg#76304)
- Plugin: Include Icons assets in ZIP (WordPress/gutenberg#75866)
- Ensure consistent, repeatable build results when inlining WASM files via `wasmInlinePlugin`  (WordPress/gutenberg#76113)
- Account `IS_WORDPRESS_CORE` is set. (WordPress/gutenberg#76334)
- Block Visibility: Add `fetchpriority=auto` to `IMG` tags in blocks with conditional viewport visibility to prevent potential erroneous high loading priority (WordPress/gutenberg#76302)

A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/7b7fa2bc97a8029a302bd6511cf0d206b5953172…9b8144036fa5faf75de43d4502ff9809fcf689ad.

See #64595, #64393.
Built from https://develop.svn.wordpress.org/trunk@61870


git-svn-id: http://core.svn.wordpress.org/trunk@61157 1a063a9b-81f0-0310-95a4-ce76da25c4cd
@westonruter
Copy link
Copy Markdown
Member Author

westonruter commented Mar 10, 2026

By the way, should we apply a similar approach to the Details block or the Accordion block? This is because these two blocks can have their content hidden by default.

@t-hamano Oh, the Accordion block! Yes, we should. I just filed it:

PR to fix:

pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Mar 11, 2026
…w` or `fetchpriority=auto`.

This updates `wp_get_loading_optimization_attributes()` and `wp_maybe_add_fetchpriority_high_attr()` to account for cases where an `IMG` has `fetchpriority=low` or `fetchpriority=auto`:

* `IMG` tags with `fetchpriority=low` are not lazy-loaded since they may be in a Navigation overlay, Details block, or Accordion Item block and need to be loaded the instant the user toggles the block.  
* `IMG` tags with `fetchpriority=auto` do not increase the media count since they may be hidden in a viewport by block visibility settings.
* Blocks with conditional visibility (such as hidden on mobile or desktop) now automatically add `fetchpriority="auto"` to their contained `IMG` tags to prevent them from erroneously receiving `fetchpriority=high` or affecting the lazy-loading of subsequent images. 
* An `IMG` with `fetchpriority=auto` which also surpasses the `wp_min_priority_img_pixels` threshold will prevent a subsequent image from getting `fetchpriority=high`. 

Developed in #11196
Includes backport of [WordPress/gutenberg#76302 Gutenberg#76302]. 

See related Gutenberg issues:

- [WordPress/gutenberg#76181 76181]: Image in navigation overlay can get `fetchpriority=high` and degrade LCP metric for page.
- [WordPress/gutenberg#76268 76268]: Image in collapsed Details block may erroneously get `fetchpriority=high` even though hidden.
- [WordPress/gutenberg#76301 76301]: Block Visibility: `IMG` in viewport-conditional block may get `fetchpriority=high` even when not displayed.
- [WordPress/gutenberg#76335 76335]: Image in collapsed Accordion block may erroneously get `fetchpriority=high` even though hidden.

Follow-up to r56347, r56037.

Props westonruter, mukesh27, ramonopoly, wildworks.
See #58235.
Fixes #64823.


git-svn-id: https://develop.svn.wordpress.org/trunk@61934 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to WordPress/WordPress that referenced this pull request Mar 11, 2026
…w` or `fetchpriority=auto`.

This updates `wp_get_loading_optimization_attributes()` and `wp_maybe_add_fetchpriority_high_attr()` to account for cases where an `IMG` has `fetchpriority=low` or `fetchpriority=auto`:

* `IMG` tags with `fetchpriority=low` are not lazy-loaded since they may be in a Navigation overlay, Details block, or Accordion Item block and need to be loaded the instant the user toggles the block.  
* `IMG` tags with `fetchpriority=auto` do not increase the media count since they may be hidden in a viewport by block visibility settings.
* Blocks with conditional visibility (such as hidden on mobile or desktop) now automatically add `fetchpriority="auto"` to their contained `IMG` tags to prevent them from erroneously receiving `fetchpriority=high` or affecting the lazy-loading of subsequent images. 
* An `IMG` with `fetchpriority=auto` which also surpasses the `wp_min_priority_img_pixels` threshold will prevent a subsequent image from getting `fetchpriority=high`. 

Developed in WordPress/wordpress-develop#11196
Includes backport of [WordPress/gutenberg#76302 Gutenberg#76302]. 

See related Gutenberg issues:

- [WordPress/gutenberg#76181 76181]: Image in navigation overlay can get `fetchpriority=high` and degrade LCP metric for page.
- [WordPress/gutenberg#76268 76268]: Image in collapsed Details block may erroneously get `fetchpriority=high` even though hidden.
- [WordPress/gutenberg#76301 76301]: Block Visibility: `IMG` in viewport-conditional block may get `fetchpriority=high` even when not displayed.
- [WordPress/gutenberg#76335 76335]: Image in collapsed Accordion block may erroneously get `fetchpriority=high` even though hidden.

Follow-up to r56347, r56037.

Props westonruter, mukesh27, ramonopoly, wildworks.
See #58235.
Fixes #64823.

Built from https://develop.svn.wordpress.org/trunk@61934


git-svn-id: http://core.svn.wordpress.org/trunk@61216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Backported to WP Core Pull request that has been successfully merged into WP Core [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Performance Related to performance efforts

Projects

Development

Successfully merging this pull request may close these issues.

Block Visibility: IMG in viewport-conditional block may get fetchpriority=high even when not displayed

4 participants