将惰性大小与 WebP 相结合答案

【问题标题】：Combining lazysizes with WebP将惰性大小与 WebP 相结合
【发布时间】：2019-11-18 05:35:44
【问题描述】：

我正在对我们的网站进行 Google Lighthouse 审核，其中大部分重点都放在图片上。我目前正在尝试实现审核中描述的“阻止屏幕外图像”。

我正在使用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>

【问题讨论】：

标签： javascript html lazy-loading webp lighthouse

【解决方案1】：

您在一张图片中定义了错误的 mime 类型（不太重要），但主要问题是您必须使用 data-srcset 而不是 srcset。 p>

工作示例

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>

【讨论】：

您好，抱歉，可能解释不正确。应该只有一个图像。如果浏览器不支持 WebP，其他的是后备。 css-tricks.com/using-webp-images/#article-header-id-3
啊，太好了，成功了！所以它只是使用data-srcset 而不是srcset？
是的，显然。除此之外，您的代码很好。