Make WordPress Core

Opened 8 months ago

Closed 7 months ago

Last modified 7 months ago

#59256 closed defect (bug) (fixed)

Twenty Twenty-Two: Header image missing dimension attributes

Reported by: flixos90's profile flixos90 Owned by: flixos90's profile flixos90
Milestone: 6.4 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch has-testing-info needs-testing
Focuses: performance Cc:

Description

The prominent bird image used in Twenty Twenty-Two does not have dimension attributes width and height set, which is problematic for CLS performance. WordPress core automatically fills width and height for any attachment images, but since this one comes from the theme itself, this is not supported.

The lack of those dimension attributes lead to further performance problems for load time performance (LCP), since loading optimization attributes like fetchpriority="high" cannot reasonably be applied to images without dimension attributes.

To provide a good starting point, the theme should be updated so that the image provides dimension attributes.

This bug was discovered while reviewing the issues reported in #58770.

Change History (11)

This ticket was mentioned in PR #5124 on WordPress/wordpress-develop by @flixos90.


8 months ago
#1

  • Keywords has-patch added; needs-patch removed

#2 @flixos90
8 months ago

  • Keywords has-testing-info needs-testing added

Testing instructions

  1. Activate Twenty Twenty-Two on a fresh install.
  2. Visit the home page and inspect the header image element (the image of the bird). Note that it has neither loading="lazy" nor fetchpriority="high" present, due to furthermore lacking the width and height attributes.
  3. Apply the PR https://github.com/WordPress/wordpress-develop/pull/5124 to your site.
  4. Refresh the home page and inspect the image again. Now it should have width and height attributes present, which also allows it to receive loading="lazy" or fetchpriority="high" through WordPress core's image optimization logic. On a fresh install, the image should have fetchpriority="high" applied, since it's the largest image in the header.

@flixos90 commented on PR #5124:


8 months ago
#3

@kt-12 I just realized you had already opened a somewhat similar PR in #4864. I think yours covers more images, but doesn't consider block validity, which is likely going to lead to errors in the block editor.

We can proceed with either PR, but let's make sure to align on one cohesive approach. Also please note the new dedicated ticket I opened for this in https://core.trac.wordpress.org/ticket/59256.

@mukesh27 commented on PR #5124:


7 months ago
#4

Hello @felixarntz,

I noticed that TT2 includes some additional patterns with images in the following locations:

  1. /twentytwentytwo/inc/patterns/general-two-images-text.php
  2. /twentytwentytwo/inc/patterns/general-wide-image-intro-buttons.php
  3. /twentytwentytwo/inc/patterns/header-large-dark.php
  4. /twentytwentytwo/inc/patterns/header-small-dark.php

The question is whether we need to add the "height" and "width" attributes to these images?

@thekt12 commented on PR #5124:


7 months ago
#5

@felixarntz If I am not wrong, by block validity you mean that json matches the attribute value, right?
We can go ahead an more other images to this PR, effort of finding the width and height can be reduced by using values from my old pr directly.

#6 @spacedmonkey
7 months ago

  • Owner set to spacedmonkey
  • Status changed from new to assigned

@spacedmonkey commented on PR #5124:


7 months ago
#7

I don't think that block validation is going to be a problem. I say update all the other images.

@flixos90 commented on PR #5124:


7 months ago
#8

@spacedmonkey I have now covered the two remaining instances. From your previous comment, some of them I had actually already implemented in this PR, and some of them are not using the core/image block. It's not as trivial to handle the dimensions for the other blocks, and core/image is most critical because of where it is used in the theme, so I think to not increase the scope too much we should only focus on all the core/image blocks here.

Please take another look.

#9 @spacedmonkey
7 months ago

  • Owner changed from spacedmonkey to flixos90

Marking as ready to commit.

#10 @flixos90
7 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 56613:

Bundled Theme: Add missing dimension attributes to images in Twenty Twenty-Two patterns.

The dimension attributes width and height should be present on every image in order to avoid layout shifts and be able to leverage WordPress core's image loading optimization functionality.

This changeset adds dimension attributes to the core/image blocks used in block patterns in Twenty Twenty-Two, where this is particularly critical as WordPress core cannot backfill the attributes for those images, as their sources are not part of the Media Library.

Props spacedmonkey, thekt12, mukesh27, flixos90.
Fixes #59256.

Note: See TracTickets for help on using tickets.