Make WordPress Core

Opened 14 months ago

Last modified 13 months ago

#58095 new defect (bug)

Post featured image block use full size image => huge impact on performance

Reported by: thomask's profile thomask Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.3
Component: Editor Keywords: has-screenshots needs-testing-info
Focuses: performance Cc:

Description

I use a standard 23 theme and in that and for example for the latest posts overview I use a standard post template with a Post featured image block.

The problem is that this block, unlike for example the gallery, does not have a definition of how big the image should be used and then uses the full size on the frontend, even if it is a view where maybe a medium or even a thumbnail would suffice.

This has a pretty significant impact on the loading speed of the images and therefore the whole site.

It is possible to see the result, for example, at www.exteriery.cz in the latest posts section

I know this ticket should probably belong under gutenberg but because of the impact on performance in the default installation I'm putting it here, it will probably affect a lot of sites

Attachments (2)

screenshot.png (1.4 MB) - added by thomask 14 months ago.
Snímek obrazovky 2023-04-21 153919.png (804.3 KB) - added by thomask 13 months ago.
showing what sizes are downloaded with minimum image size needed

Change History (5)

@thomask
14 months ago

This ticket was mentioned in Slack in #core-test by ironprogrammer. View the logs.


13 months ago

#2 @ironprogrammer
13 months ago

  • Component changed from General to Editor
  • Keywords has-screenshots needs-testing-info added

Thanks for the report, @thomask!

How does the block function under different browser widths? During test triage it was pointed out that the block uses srcset, so should utilize an appropriately sized alternate. If this isn't working as expected, then having those details would be helpful.

Rather than closing for upstream reporting, I'm leaving this open for additional test reports and feedback. Note that the browser may not load a smaller size if a larger is already cached, so testing with a cleared cache is recommended.

#3 @thomask
13 months ago

I have created test demo site https://test.kapler.cz/ with clear wordpress instalation with few lorem ipsum posts with some big featured images.

From what i see, full version of the image is offered. so even they are never bigger than 385 × 238 px full many megapixel images are downloaded. And there are smaller media sizes defined even by default wp.

the code then looks like

<a href="https://test.kapler.cz/?p=18" target="_self" style="height:max(15vw, 30vh)">
<img width="2560" height="1704" 
src="https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-scaled.jpg" 
class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Amet" decoding="async" 
style="height:max(15vw, 30vh);object-fit:cover;" 
srcset="https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-scaled.jpg 2560w, 
https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-300x200.jpg 300w, 
https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-1024x682.jpg 1024w, 
https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-768x511.jpg 768w, 
https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-1536x1023.jpg 1536w, 
https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-2048x1363.jpg 2048w" 
sizes="(max-width: 2560px) 100vw, 2560px"></a>

so there is srcset defined, but when i look to the network tab in devtools, my desktop browser with max with of screen where the image is 385 × 238 px it gets full version https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-scaled.jpg. If i resize the window to 601 px, where the images on screen are 163×237 px, it still downloads up to 1536x1151 images (see the new attachement)

I think there should be a way how to setup the maximum and use e.g. a medium size for desktop default or even have some custom size for the theme that would fit the maximum sizes for mobile/desktop for the 1 / 2 and 3 columns and then use the proper sizing based on number of columns...

@thomask
13 months ago

showing what sizes are downloaded with minimum image size needed

Note: See TracTickets for help on using tickets.