How to make background images load faster

user_10965250 0
Viewed 658

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

core-web-vitals wordpress background-image
1 Answers

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:

user_4784600
Related