Question

我正在对我们的网站进行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>

Answer 1

您在一张图片中定义了错误的哑剧类型（不太重要），但是主要问题是您必须使用 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>

Answer 2

将近一年后...您现在可以使用：

<img src="..." loading="lazy" />

它目前仅在Chrome中可用，但这足以欺骗Google Lighthouse并定位80％以上的用户。我还建议使用高分辨率（> 1000px宽）的高度压缩的单一尺寸JPG。它可能会打败您的复杂设置。

我的文章How to get a 100% Google Lighthouse score中的更多信息。

将lazysize与WebP结合

2 个答案: