Menu
Most of my WordPress websites have a background image in the top fold. These images are the Largest Contentful Paint Element on the page and usually they get loaded last. Somewhere I read that 'Background images are last in line to be grabbed when a page is loaded'. Is it true?
Is it a good idea to use a place holder or image in the place of the background image and then change it later so that the LCP gets loaded quickly like below.
<div class="header-img"><img style="display: none;" src="images/header-img.jpg" alt=""></div>
.header-img {
width: 100%;
height: 500px;
background-size: cover;
background-image: url(images/header-img.jpg);
}
Source
501
asked Oct 20 '25 13:10
You don't want to use a placeholder image to prioritize your background images in situations like this, you want to use <link rel="preload">. That will tell the browser to start downloading the image as soon as possible.
Try adding the following code to the <head> of your page, and then use your background image as normal. It should load much faster:
<link rel="preload" as="image" href="images/header-img.jpg">
You can read more about this technique here:
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
