javascript - How to load a high res background image without impacting large contentful paint on page load - Stack Overflow

admin管理员组

文章数量:1301558

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

/

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-b75591lify.app/

• javascript

Share Follow edited Sep 7, 2020 at 14:58 Jackal asked Sep 7, 2020 at 14:40 JackalJackal 3,52155 gold badges4444 silver badges9494 bronze badges 11

• use some lazyload plugins, like lazysizes – demkovych Commented Sep 7, 2020 at 14:42
• 1 Isn't the value for backgroundImage missing a closing parenthesis in your snippet? – Parzh from Ukraine Commented Sep 7, 2020 at 14:49
• 1 Lighthouse usually suggests the improvements you can make. Can you share either a link to the page or share the generated lighthouse report. The link would be more helpful though. – JackSparrow Commented Sep 7, 2020 at 14:52
• 1 @Jackal According to web.dev/lcp/#what-is-a-good-lcp-score you are meeting a good LCP score. I'm beginning to wonder if this is a problem worth solving and is your attempt a case of over optimizing. Maybe others can chime in here. You could try a few other things like caching the image and using CDN or reducing the area of the header itself though I don't think it will improve your LCP. Anyways, just go through the link and see if there is a need and possibility to reduce the LCP time. You may have to do away with the full height header image. – JackSparrow Commented Sep 7, 2020 at 15:17
• 1 As per blog.chromium/2020/05/… - Largest Contentful Paint measures perceived load speed and marks the point in the page load timeline when the page's main content has likely loaded. I think you have pretty much done everything and it was a good choice to go with @AurelienB answer – JackSparrow Commented Sep 7, 2020 at 16:06

 |  Show 6 more ments

2 Answers 2

Sorted by: Reset to default 6

I have bee 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.

You can do Lazy Loading with Blurred Image Effect, couple of useful links for you!

see this thread:

#:~:text=attr('large%2Dclass',having%20to%20change%20the%20js!

https://tsucres.me/2017-12-01/Progressive-image-load.html

https://www.sitepoint./five-techniques-lazy-load-images-website-performance/

本文标签：