Сочетание lazysizes с WebP - PullRequest
Новая
       28

Сочетание lazysizes с WebP

0 голосов
/ 17 января 2019

Я прохожу аудит нашего сайта в Google Lighhouse, и основное внимание уделяется изображениям. В настоящее время я пытаюсь добиться «Устранить закадровые изображения», как описано в ревизии.

Я использую lazysizes , так как это то, что Google, похоже, рекомендует .

Я использую сценарий на своем сайте, но мне не везет. Я не получаю никакой ошибки, и сценарий, кажется, загружается правильно, поскольку я могу вставить console.log с переменной из сценария, и он загружает его в порядке. Однако визуально это не кажется ленивой нагрузкой, и Аудит Маяка не замечает никаких изменений.

Я думаю, что проблема для меня вызвана более ранними изменениями, которые я сделал на основе аудита для преобразования изображений в формат 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>

1 Ответ

0 голосов
/ 17 января 2019

У вас неправильный тип 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>
...