ruuen
commented
1 year ago Optimising and preloading the hero images seemed to be the best solution here - tests well after implementing this in the improve-cls branch.
Resources for preloading: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload https://web.dev/articles/preload-critical-assets https://web.dev/articles/preload-responsive-images
This web.dev article offers a great technique for preloading images used in the <picture> responsive tags by using a media attribute on the preload link elements and utilising min & max width - works really well:
https://web.dev/articles/preload-responsive-images#preload_and_picture
Decided to preload the webp variants as there's not great support for having the browser dynamically preload both the correct size and filetype from multiple type options. Web.dev advises relying on the browser's preload scanner to handle these cases until support is improved, but the scanner seemed to be missing my heros here no matter what tricks and standards I tried to apply: https://web.dev/articles/preload-responsive-images#preload_and_type
This article gave a good point that you should probably preload the WebP images given the support for preload & webp line up pretty closely in modern browsers: https://www.bronco.co.uk/our-ideas/using-relpreload-for-responsive-images/
Export webp & jpg versions of hero picture Load these within the picture element
Currently variable hero image load times has a big effect on page CLS, and I need to optimise this file anyway as it is majority of the page weight while being .png.
Will look at CLS issues on another issue to see if I can get browser to reserve the space while loading (have tried a few ways but no success so far)