将 lazysizes 与 WebP 相结合

Question

我正在对我们的网站进行 Google Lighthouse 审核，大部分重点放在图像上。我目前正努力达到审计中描述的 'Deter offscreen images'。

我正在使用 lazysizes, as that's what Google seemed to recommend。

我在我的网站上使用脚本，但没有任何运气。我没有收到任何错误，并且脚本似乎正在正确加载，因为我可以从脚本中插入一个带有变量的 console.log 并且它可以正常加载。但是从视觉上看，它似乎并没有延迟加载，而且 Lighthouse Audit 也没有注意到任何变化。

我认为我的麻烦是由于我之前根据审核所做的更改将图像尽可能转换为 WebP 格式引起的。我不确定是否可以 LazyLoad 这种格式，或者我只是做错了。我是否也应该将 lazyload class 应用于 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>

Answer 1

你在一张图片中定义了错误的 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>

将 lazysizes 与 WebP 相结合

Combining lazysizes with WebP

javascript

html

lazy-loading

webp

lighthouse