Make WordPress Core

Opened 8 months ago

Last modified 8 months ago

#59331 new defect (bug)

Image optimizations fail to apply when using Timber

Reported by: westonruter's profile westonruter Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 6.3
Component: Media Keywords:
Focuses: performance Cc:

Description (last modified by 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
  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">
    srcset="           1300w,    300w, 1024w,    150w,    768w
    sizes="(max-width: 1300px) 100vw, 1300px"

Featured image markup:

<img src="">

Change History (2)

#1 @westonruter
8 months ago

Here's a workaround plugin that addresses the issue with the_content images in a Timber-based theme:

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.

#2 @westonruter
8 months ago

  • Description modified (diff)
Note: See TracTickets for help on using tickets.