Page speed affects both google rankings and the chance of giving up when you visit a website. Since large images and graphics often explodes your kb-budget the html lazy load attribute is an easy quickfix that drastically reduce the first paint of a website. Images take up to 50% of the total size on websites.

So, how can you add lazy-loading to your website? Well, just add loading="lazy to your image or iframe tag and there you go.

The markup

<img class="article-img" src="img/mylazyloadingimage.png" alt="article img" loading="lazy">

<iframe src="videotutorial.html" loading="lazy"></iframe>

What is lazy loading?

Lazy loading is just a way to tell your browser not to load the image before its in your window view. So, for top-level hero images the image will load right away anyway. However, you can save a lot of loading time by not loading the graphics further down the page. They will load when the user scrolls by, and by that time he/she is already involved in your content.

Google Lighthouse

By inspecting your website (right click and inspect) you get a tab with Google Lighthouse. Run Lighthouse and it will give you other tips on how to increase pagespeed. See below.

Source: https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading