javascript - 如何加载高分辨率背景图像而不影响页面加载时的大型内容绘制

Question

我正在使用 Lighthouse 来衡量页面性能，我注意到，即使我使用低分辨率背景图像并使用 javascript 加载高分辨率背景图像，它仍然会影响 Lighthouse 上的大量内容绘制，即使我等到页面完全加载时也是如此...我缺少什么吗？

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

这是页面的链接。在加载高分辨率图像时，低分辨率图像隐藏在叠加层后面

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

Answer 1

我已经开始热衷于不为我的高分辨率背景图像使用“背景图像”。

我更喜欢这样的东西:

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

所以我可以使用任何 lazyload , srcset , <source media="" ></source>这让我很高兴。