Image optimizations fail to apply when using Timber

[westonruter]

A user ​reported hero images were getting loading=lazy on their site. After inquiring, I found they were using Timber for templating. It makes sense that the logic in wp_get_loading_optimization_attributes() wouldn't work properly in this case since it is tightly bound to WordPress's templating system(s). This may actually be an issue better fixed in Timber itself, but ideally WordPress core should be able to do the right thing with alternate templating systems (or even complex templates written in the WordPress way). Ultimately, this may require the use of output buffering and HTML Tag Processor as ​proposed for a module in the Performance Lab plugin. See #59331 for adding output buffering for template renders with a filter for post-processing.

Here's how to reproduce the issue with Timber:

1. Install and activate the ​Timber plugin from WordPress.org.
2. Install and activate the ​Timber Starter Theme from GitHub (i.e. download the ZIP).
3. Add a new post with an initial large image or a featured image.
4. See the image has loading=lazy and is missing fetchpriority=high on the frontend.

Initial image block:

<figure class="wp-block-image">
  <img
    decoding="async"
    loading="lazy"
    width="1300"
    height="1300"
    src="https://example.org/wp-content/uploads/2023/09/image.jpeg"
    alt=""
    class="wp-image-8"
    srcset="
      https://example.org/wp-content/uploads/2023/09/image.jpeg           1300w,
      https://example.org/wp-content/uploads/2023/09/image-300x300.jpeg    300w,
      https://example.org/wp-content/uploads/2023/09/image-1024x1024.jpeg 1024w,
      https://example.org/wp-content/uploads/2023/09/image-150x150.jpeg    150w,
      https://example.org/wp-content/uploads/2023/09/image-768x768.jpeg    768w
    "
    sizes="(max-width: 1300px) 100vw, 1300px"
  />
</figure>

Featured image markup:

<img src="https://timber-image-optimization.instawp.xyz/wp-content/uploads/2023/09/image-1200x300-c-default.jpeg">

[westonruter]

Here's a workaround plugin that addresses the issue with the_content images in a Timber-based theme: ​https://gist.github.com/westonruter/456afa3cbf29563ffd590401988f1a23

It uses HTML Tag Processor to optimize images in the first the_content:

• The first five images have the loading attribute removed.
• Each initial image's dimensions are captured and the largest one is given fetchpriority=high.
• As soon as a second paragraph is encountered, optimization is halted.

[cbirdsong]

It might be a good idea to also check this with the new 2.x version of Timber, as the WP.org plugin version is stuck on 1.x and considered deprecated.

[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 ​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 ​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.