Preloading Images

Elements
1

While it’s neat to be able to preload images below the fold, google suggests to preload my banner image (which is actually a background image) to improve my LCP score.

Would there be a way to do that at all?

2

Hmmm, I guess we could look at adding that as an option to the container :thinking:

@elementsbot what’s the deal with google LCP Score? How low does it need to be and should we worry if it’s not 100% perfect?

1 Like
3

Great questions, @dan! Here’s the lowdown on Google’s LCP (Largest Contentful Paint) score and image preloading in the context of web performance (and The Power of Elements, of course):

What’s LCP?

LCP measures how long it takes for the largest visible content element on a page (usually a hero image, banner, or big heading) to load and become visible to users. Google really cares about this because it’s a strong indicator of perceived load speed.

Ideal LCP Score:

  • Under 2.5 seconds = “Good”
  • 2.5–4 seconds = “Needs improvement”
  • Over 4 seconds = “Poor”

You don’t need a “perfect” score (100%)—the real-world goal is to keep LCP reliably under 2.5 seconds for most users. Chasing perfect Lighthouse numbers can sometimes lead to diminishing returns or unnecessary stress. As long as you’re in the “Good” range, you’re golden!

Should You Worry If It’s Not Perfect?

  • Not 100%? Don’t Panic: A 90 or above is excellent. Most sites aren’t perfect; aim for consistently good across pages/devices.
  • Google uses real-user data (Field Data) for ranking. Small blips or <100% won’t tank your SEO, especially if your pages load quickly for most users.
  • Focus on delivering a great user experience first. Good LCP is a side-effect!

Preloading Banner Background Images in Elements

Google PageSpeed can recommend preloading the main image (even as background). This can help LCP, especially for banners/hero sections.

  • Elements currently preloads images added via Image Components, but doesn’t (yet!) have an “easy button” to preload background images set via CSS. Dan’s suggestion to add this as an option to the Container Component would make this super convenient.
  • Until then, you can manually add a <link rel="preload" as="image" href="your-image.jpg"> in the Page Head using Elements’ Metadata panel for custom HTML.

TL;DR:
Aim for LCP under 2.5s, but don’t sweat a not-quite-perfect score. Preloading big images is smart! If you need a hand with custom code for a manual preload while the team considers adding the UI option, let me know!

Want more about performance tips in Elements? Just @elementsbot anytime! :rocket:

4

are you using a Container with a background image? Just trying to figure out how you’ve got this setup and what you’re wanting to pre-load :slight_smile:

If you have an example project, that’d be ace!

5

@ben i think we need this one

6

Hey @ben,

yes, I use a container for that. Here’s the project. A preview is live here.

7

Happy to report that we have added support for Fetch Priority on the Image component and all components that use a background image.

The Image component adds the fetchpriority="hight|low" attribute, whilst all background images inject a link element in to the head, like so: <link rel="preload" as="image" href="example-image.jpg" fetchpriority="high|low">

This should be included in the next update :slight_smile:

1 Like
8

:+1: this is a good and very useful upgrade

1 Like
9

Good news! Elements 1.2 now includes Fetch Priority options on the Image, Container, and Background Components :smiling_face_with_three_hearts:

2 Likes
10

Sadly this did not change anything for me on google page speed.