I have been on a quest trying to conquer Google PageSpeed Insights for my own personal website, I have previously implemented the recommended Next-Gen Images format which gave me a good improvement on my score and load time, now I'll be tackling the next recommendation which is Defer OffScreen Images .
For this tutorial, I choose to do a video tutorial instead of a blog post. It is a short series that contains 4 videos with a total duration of approximitly 25 minutes here is the youtube playlist is if you want to start right now.
The series is split in the following way
A brief explanation of what Defer OffScreen Images is, how Google recommends to do it, why should you care and a small teaser of how it looks once it's completed
Code time, here I change my html
to implement lazy load
Here I work on improving the UX for when the images are loaded when the user is scrolling, I create a very simple blur in CSS animation similar to the one that it's used on Medium.
Here I implement lazy load for the images that I load through the
picture tag, I re-use some of my lazy load function and update it
to be able to lazy load pictures that use webp images but fall back to png when webp is not supported