Combining lazysizes with WebP

Question

I'm going through the Google Lighhouse audit of our site and most of the focus is on images. I'm currently trying to achieve 'Deter offscreen images' as described on the audit.

I'm using lazysizes, as that's what Google seemed to recommend.

I'm using the script on my site, but not having any luck. I'm not getting any error, and the script appears to be loading correctly as I can insert a console.log with a variable from the script and it loads it in fine. However visually it doesn't appear to lazy load, and the Lighthouse Audit doesn't notice any change.

I think the trouble for me is being caused by earlier changes I made based on the audit to convert images to the WebP format where possible. I'm not sure whether it's possible to LazyLoad this format, or if I'm just doing it incorrectly. Should I also be applying the lazyload class to the source or picture element?

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>

dev101 · Accepted Answer · 2019-01-17T13:18:33.247

2

You have wrong mime type defined in one image (less critical), but the main issue is that you have to use data-srcset instead of srcset.

Working example

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>

edited Jan 17 '19 at 13:18

answered Jan 17 '19 at 12:43

dev101

1,359
2
18
32

Hi, sorry maybe didn't explain correctly. There should only be one image. The others are fallbacks in case the browser doesn't support WebP. https://css-tricks.com/using-webp-images/#article-header-id-3 – Sam Johnson Jan 17 '19 at 12:46
Ah great, that's worked! So it was just using `data-srcset` instead of `srcset`? – Sam Johnson Jan 17 '19 at 13:14
Yes , apparently. Other than that, your code is fine. – dev101 Jan 17 '19 at 13:19

Combining lazysizes with WebP

1 Answers1