我正在对我们的网站进行Google Lighhouse审核，大部分重点放在图片上。我目前正在尝试实现审核中所述的“Deter offscreen images”。
我正在使用lazysizes，因为Google似乎是recommend。
我正在我的网站上使用脚本，但没有任何运气。我没有收到任何错误，并且脚本似乎正在正确加载，因为我可以从脚本中插入带有变量的console.log，并且可以很好地加载它。但是，从视觉上看，它似乎没有延迟加载，并且Lighthouse Audit不会注意到任何更改。
我认为给我造成麻烦的是由于我根据审核所做的较早的更改而引起的，以便在可能的情况下将图像转换为WebP格式。我不确定是否可以LazyLoad这种格式，或者我是否做错了。我是否还应该将lazyload类应用于source或picture元素？
header {
height: 100vh;
display: block;
}<head>
<script src="https://cdn.shopify.com/s/files/1/0020/2188/3959/files/lazy.min.js?8183633505407522177" async=""></script>
</head>
<body>
<header>
<p>
Scroll Down
</p>
</header
>
<picture>
<source type="image/webp" srcset="https://cdn.shopify.com/s/files/1/0020/2188/3959/files/stripe.webp">
<source type="image/jpeg" srcset="https://cdn.shopify.com/s/files/1/0020/2188/3959/files/stripe.png">
<img style="background-color: #fff;" data-src="https://cdn.shopify.com/s/files/1/0020/2188/3959/files/stripe.png" class="lazyload" alt="Payment Methods Accepted">
</picture>
</body>最佳答案
您在一个镜像中定义了错误的mime类型(不太重要)，但是主要问题是必须使用 data-srcset 而不是 srcset 。
工作实例
header {
height: 100vh;
display: block;
}<head>
<script src="https://cdn.shopify.com/s/files/1/0020/2188/3959/files/lazy.min.js?8183633505407522177" async=""></script>
</head>
<body>
<header>
<p>Scroll Down</p>
</header>
<div style="height:2000px;">...</div>
<picture>
<source type="image/webp" data-srcset="https://cdn.shopify.com/s/files/1/0020/2188/3959/files/stripe.webp" />
<source type="image/png" data-srcset="https://cdn.shopify.com/s/files/1/0020/2188/3959/files/stripe.png" />
<img class="lazyload" data-src="https://cdn.shopify.com/s/files/1/0020/2188/3959/files/stripe.png" alt="image" />
</picture>
</body>