[wp-trac] [WordPress Trac] #59331: Image optimizations fail to apply when using Timber

[WordPress Trac]

#59331: Image optimizations fail to apply when using Timber
--------------------------+-----------------------------
 Reporter:  westonruter   |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Future Release
Component:  Media         |     Version:  6.3
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:  performance
--------------------------+-----------------------------

Comment (by westonruter):

 I just checked with Timber 2.x. I installed the Timber Starter Theme in a
 vanilla install spun up with Local.

 When I add a featured image to a post, I see that the image lacks
 `fetchpriority=high` even though it is the LCP element. It is also missing
 `width` and `height` attributes:

 {{{
 <img src="http://localhost:10003/wp-content/uploads/2024/07/bison1-scaled-
 1200x300-c-default.jpg">
 }}}

 So there is no improvement here. But it seems WordPress's server-side
 heuristics are applying better for post content: When I add four large
 images to a post, I'm seeing that the first image is getting
 `fetchpriority=high`. However, all the remaining images are getting
 `loading=lazy` when WordPress normally only adds it after the 3rd.
 Nevertheless, if I add a thumbnail image as the first image block then
 `fetchpriority=high` is omitted from this image as well as all the
 subsequent images. So it doesn't seem WordPress's server-side heuristics
 are applying correctly still on Timber-based themes.


 On the other hand, I tried the same tests with the
 [https://wordpress.org/plugins/image-prioritizer/ Image Prioritizer]
 plugin active and it correctly added `fetchpriority=high` to the LCP
 image, as well as ensuring `loading=lazy` is only on the appropriate
 images. The Image Prioritizer plugin is part of the Performance Lab plugin
 suite of plugins (from the Core Performance Team), as is
 [https://wordpress.org/plugins/optimization-detective/ Optimization
 Detective] which is the foundational dependency plugin. It applies
 optimizations based collecting real user metrics, so the server doesn't
 have to figure out which image is likely going to be in the initial
 viewport or not. It applies these optimizations on the output-buffered
 output via the HTML Tag Processor, meaning the optimizations can be
 applied to any kind of WordPress site, whether using Timber themes,
 classic themes, or block themes.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/59331#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform