Block Visibility: Add fetchpriority=auto to IMG tags in blocks with conditional viewport visibility to prevent potential erroneous high loading priority#76302
Conversation
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Flaky tests detected in 6fedb39. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22838257338
|
| /* | ||
| * 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() ); |
There was a problem hiding this comment.
Co-authored-by: Copilot <[email protected]>
|
I failed the paying attention test :) LGTM |
There was a problem hiding this comment.
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' ); |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
|
Although this PR does not affect WordPress core, let's backport this PR to |
…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]>
|
I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: 9b81440 |
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
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
@t-hamano Oh, the Accordion block! Yes, we should. I just filed it: PR to fix: |
…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
…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




What?
Fixes #76301
This adds
fetchpriority=autotoIMGtags 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=highnegatively impacts the LCP metric since it gets prioritized over images which are actually in the critical rendering path.How?
Before ❌
After ✅
Diff:
Testing Instructions
IMGon the frontend hasfetchpriority=autoas opposed tofetchpriority=high.