Inline background images to HTML to improve loading speed

[dacook]

Prerequisites

• I have searched for similar feature requests in both open and closed discussions and cannot find an existing request.
• I have verified that the feature is still missing from the latest stable versions of Elementor or Elementor Pro.

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

When analysing the page load for PageSpeed's Largest Contentful Paint (LCP) metric, I found that the element holding us back was the background image at the top of the page.
Background images are defined in CSS, which is loaded after the initial HTML page load (for example post-8.css, one of dozens of CSS files). It's not until that file is loaded and parsed that the browser can then request the image file. We then have to wait again for the image file to download and render before the LCP is complete (see example requests in screenshot).

We need a way to signal to the browser the URL of the image so that it can be requested earlier.

Describe the solution you'd like.

As previously requested, perhaps this could be achieved by

• Inline background images to HTML #12973

Instead of (or in addition to) the css defining the background image:

I suggest the URL is included in the HTML. Now, we probably don't want the image to display until all relevant style rules have loaded, so it could be hidden until the css file loads. Here's an example of what I mean but I haven't tested this:

This may not be desired on all background images, so perhaps it could be an option in the editor.

Describe alternatives you've considered.

Another way to achieve this could be by adding a custom attribute with a dynamic value. While preparing this feature request I found this option and tried configuring it, but it didn't seem to do anything:

One more way could be to add an option to preload the image. I think this would perform even better for LCP.

Additional context

No response

Agreement

• I agree that my request may be closed without action if it doesn't meet all the requirements.

[dacook]

Hmm, it may be tricky to cater for different screen sizes. If you choose a different image for mobile vs desktop, media queries determine which one is to be shown. We can't do that in the HTML style="" attribute.

So perhaps what we need is the option to render background images as an element with sizes and srcset as described here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images