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.

youtube-playlist

The series is split in the following way

01 Intro - Defer OffScreen Images

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


02 Img Tags - Defer OffScreen Images

Code time, here I change my html img tags and add a bit of javascript code using the Intersecion Observer to implement lazy load


03 Improving UX - Defer OffScreen Images

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.


04 Picture Tag - Defer OffScreen Images

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