How to load a high res background image without impacting large contentful paint on page load

user_10823490 0
Viewed 1593

I'm using lighthouse to measure page performance and I noticed, even if i use a low resolution background image and load the high one with javascript it still affects the larget contentful paint on lighthouse even when i wait until page is fully loaded... Is there something am i missing?

window.onload = function () {
        const header = document.querySelector('.header');
        header.style.backgroundImage =
            'url(assets/img/the-image.webp)';
};

here is the link to the page. The low res image is hidden behind an overlay while the high res is being loaded

https://nifty-cori-b75591.netlify.app/

enter image description here

javascript
2 Answers

I have become keen on not using "background-image" for my high res background image.

I prefer to have something like :

<style>
    .BackgroundImage-Container {
        position: relative;
        width : 100%;
        height : 100%;
    }

    .BackgroundImage {
        position: absolute;
        top : 0;
        right : 0;
        bottom: 0;
        left: 0;
        width : 100%;
        height : 100%;
        object-fit: cover;
    }
</style>

<picture class="BackgroundImage-Container">
    <img class="BackgroundImage" src="./some-image.png" />
</picture>

So I am able to use any lazyload, srcset, <source media="" ></source> that pleases me.

user_55006030
user_101026950
Related