# Preloading Images

**URL:** <https://forums.realmacsoftware.com/t/preloading-images/48832>\
**Category:** Elements\
**Created:** [July 13, 2025, 7:38pm UTC](https://forums.realmacsoftware.com/t/preloading-images/48832 "2025-07-13T19:38:03Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![pumpkin](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@pumpkin](https://forums.realmacsoftware.com/u/pumpkin)\
**Post date:** [July 13, 2025, 7:38pm UTC](https://forums.realmacsoftware.com/t/preloading-images/48832/1 "2025-07-13T19:38:03Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 14, 2025, 8:07am UTC](https://forums.realmacsoftware.com/t/preloading-images/48832/2 "2025-07-14T08:07:47Z")

</div>

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

@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?

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [July 14, 2025, 8:07am UTC](https://forums.realmacsoftware.com/t/preloading-images/48832/3 "2025-07-14T08:07:59Z")

</div>

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! 🚀

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [August 19, 2025, 8:53am UTC](https://forums.realmacsoftware.com/t/preloading-images/48832/4 "2025-08-19T08:53:35Z")

</div>

> [@pumpkin](#):
>
> preload my banner image (which is actually a background image)

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 🙂

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

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [August 19, 2025, 8:58am UTC](https://forums.realmacsoftware.com/t/preloading-images/48832/5 "2025-08-19T08:58:18Z")

</div>

@ben i think we need this one

> [@„fetchpriority=high“ Attribut for Hero-Banner](https://forums.realmacsoftware.com/t/fetchpriority-high-attribut-for-hero-banner/48929):
>
> is it possible to add the “fetchpriority=high” attribute for hero banners / background images to elements? lazyload for images exists. however, this attribute would be very useful for hero banners in terms of the loading speed of a website. the fetchpriority attribute is a relatively new HTML attribute that you can use with an \<img\> tag, like this: \<img src="hero.jpg" fetchpriority="high" alt="Hero image"\> purpose with fetchpriority="high", you tell the browser: “This element (usually an im…

---

<div class="post-metadata">

**Author:** ![pumpkin](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@pumpkin](https://forums.realmacsoftware.com/u/pumpkin)\
**Post date:** [August 19, 2025, 3:04pm UTC](https://forums.realmacsoftware.com/t/preloading-images/48832/6 "2025-08-19T15:04:32Z")

</div>

Hey @ben,

yes, I use a container for that. [Here’s the project](elementsapp://downloadDocument/xvhJGCU3yWmV). A preview is live [here](https://dev.fynndesign.de).

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [August 22, 2025, 10:43am UTC](https://forums.realmacsoftware.com/t/preloading-images/48832/7 "2025-08-22T10:43:08Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [August 22, 2025, 11:38am UTC](https://forums.realmacsoftware.com/t/preloading-images/48832/8 "2025-08-22T11:38:37Z")

</div>

👍 this is a good and very useful upgrade

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [August 27, 2025, 7:13pm UTC](https://forums.realmacsoftware.com/t/preloading-images/48832/9 "2025-08-27T19:13:09Z")

</div>

Good news! [Elements 1.2](https://forums.realmacsoftware.com/t/elements-1-2-0-23816/50281/5) now includes Fetch Priority options on the Image, Container, and Background Components 🥰

---

<div class="post-metadata">

**Author:** ![pumpkin](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@pumpkin](https://forums.realmacsoftware.com/u/pumpkin)\
**Post date:** [August 28, 2025, 10:41pm UTC](https://forums.realmacsoftware.com/t/preloading-images/48832/10 "2025-08-28T22:41:36Z")

</div>

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