Proposal: Better Image Loading Optimization Module

[joemcgill]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro )

What problem is your feature request going to solve? Please describe.

In WordPress 6.3, the Core Performance Team made several improvements aimed at improving LCP scores by tweaking the way native lazy-loading was implemented for images, and by adding support for automatically adding fetchpriority="high" to the first applicable image.

However, the default WordPress implementation doesn't cover all of the use cases for images that Elementor supports. Due to the way Elementor renders content, I believe a first-party module could be even more optimized than what core can deliver out of the box, and provide an opportunity for further experimentation. Additionally, adding a new module to Elementor for this would allow sites running on WordPress versions prior to 6.3 to also take advantage of these optimizations.

Describe the solution you'd like

The brief idea of how this could be approached, would be to implement the following solutions:

1. Apply default optimization strategies during content rendering – this would initially be implemented using a default strategy that does not take into account specific widget settings, but would apply to all of the content during rendering.
2. Calculate automatic settings in the editor – this would not show any UI to the end user, but would save a priority setting to all supported widgets when a page is saved, or in a standalone post meta value that could be accessed during rendering.
3. Enhance the default render-optimization strategy using automatic editor settings – this would make use of the settings that get automatically calculated in the editor (i.e., item 2 above) when determining optimization strategies. This initial proof of concept would allow us to determine how to best use automatic calculations in the editor to enhance the default optimizations applied during rendering.

Describe alternatives you've considered

A few other options considered:

• Rather than using the editor view to calculate which image is likely the LCP candidate, we could use an external service to calculate this on the front-end. While more accurate, the complexity is likely not worth investing in until we've verified the approach.
• Making this a user-controlled feature, where all optimizations must be added in the editor UI. While this gives site builders more control of the final markup, it's easy to get these decisions wrong and end up hurting your overall performance scores. For that reason, I think an automated solution that provides a good default experience would be a better initial step, with UI controls being considered a future enhancement.

Additional context

No response

[joemcgill]

A draft of an initial implementation that covers step one, Apply default optimization strategies during content rendering, has been contributed as the following PR.

[shilo-ey]

Thank you Joe, we are currently reviewing the PR and iterating on the suggested solution with you.

Afterwards we would be able to determine the designated version.

Cheers!

[shilo-ey]

@joemcgill Thank you for this feature contribution.

We've merged this feature into v3.17 that should be released soon.

Looking forward seeing the impact on actual websites on real life usage. Additionally we will test and share the lab experiment findings here.

Anyone who wants to share feedback is more than welcom :)

Cheers