Skip to content

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

Closed
Bug
#76302
Closed
Block Visibility: IMG in viewport-conditional block may get fetchpriority=high even when not displayed#76301
Bug
#76302
Assignees
westonruter
Labels
[Feature] Design ToolsTools that impact the appearance of blocks both to expand the number of tools and improve the experi[Status] In ProgressTracking issues with work in progress[Type] PerformanceRelated to performance efforts
@westonruter

Description

@westonruter
westonruter
opened on Mar 9, 2026

Description

Consider block visibility to show a different hero image on mobile versus tablet versus desktop, with this block markup:

Screen.Recording.2026-03-08.at.18.42.32.mov

(Related: #76275)

<!-- wp:image {"id":38,"sizeSlug":"large","linkDestination":"none","metadata":{"blockVisibility":{"viewport":{"desktop":false,"tablet":false}},"name":"Mobile image"}} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8000/wp-content/uploads/2025/11/Bison_bison_Wichita_Mountain_Oklahoma-1024x741.jpg" alt="Mobile" class="wp-image-38"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":37,"sizeSlug":"large","linkDestination":"none","metadata":{"blockVisibility":{"viewport":{"desktop":false,"mobile":false}},"name":"Tablet image"}} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1024x683.jpg" alt="Tablet" class="wp-image-37"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":36,"sizeSlug":"large","linkDestination":"none","metadata":{"blockVisibility":{"viewport":{"tablet":false,"mobile":false}},"name":"Desktop image"}} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-1024x668.jpg" alt="Desktop" class="wp-image-36"/></figure>
<!-- /wp:image -->

When this is rendered on the frontend, the first IMG tag always gets fetchpriority=high in WordPress, due to the logic in wp_get_loading_optimization_attributes() and wp_maybe_add_fetchpriority_high_attr():

Rendered Post Content 
<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"
      sizes="(max-width: 645px) 100vw, 645px"
      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
      "
    />
  </figure>

  <figure
    class="wp-block-image size-large wp-block-hidden-desktop wp-block-hidden-mobile"
  >
    <img
      decoding="async"
      width="1024"
      height="683"
      sizes="(max-width: 645px) 100vw, 645px"
      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
      "
    />
  </figure>

  <figure
    class="wp-block-image size-large wp-block-hidden-mobile wp-block-hidden-tablet"
  >
    <img
      decoding="async"
      width="1024"
      height="668"
      sizes="(max-width: 645px) 100vw, 645px"
      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
      "
    />
  </figure>
</div>

This is problematic because in this example, the image for the mobile viewport always gets loaded with a high priority even though it is not displayed at all on desktop or tablet viewports.

This is similar to the issue of IMG elements which appear in the Navigation Overlay:

The difference here is that images in the Navigation Overlay must always have fetchpriority=low because they are never in the critical rendering path. In contrast, images in blocks which have viewport-specific visibility may be in the critical rendering path: one may even be the LCP element. But since there is no way to know this server-side, there needs to be a way for the rendered block to indicate that WordPress should not add fetchpriority=high to the IMG when it is processed. This can be achieved by adding fetchpriority=auto.

Step-by-step reproduction 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. See that the IMG on the frontend has fetchpriority=high, which may be erroneous.

Screenshots, screen recording, code snippet

No response

Environment info

  • WordPress 7.0-beta3, Gutenberg @ 61c8bf0

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

Labels

[Feature] Design ToolsTools that impact the appearance of blocks both to expand the number of tools and improve the experi[Status] In ProgressTracking issues with work in progress[Type] PerformanceRelated to performance efforts

Type

Bug

Fields

No fields configured for Bug.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions