Lazy load your images

Always show images when you need to see them. For example your page has an image gallery at the bottom of your page. You don's see this right away. So why load them right away? If you lazy load these images your page will be ready faster. And if you scroll to the gallery it will load them if you get near it.

There are a couple ways to implement lazy loading. Here a list.

• Native lazy-loading
• Use a Javascript libary to lazy load your images.
• Download one of the many lazy load WordPress plugins

Since Chrome 76 you can lazy load without a JS library. Just add loading="lazy" to your img tag. This is a native lazy load images example. However this does unfortunately not work everywhere.

If you have access to your code use a Lazy Load JS library like Lazyload, yall.js or lozad.js

These plugins work like this. The Javascript sees your class and replaces the src with the correct images when needed.

<img alt="A lazyload example" data-src="lazy.jpg">

<img class="lazy" src="placeholder.jpg" data-src="y'all-image.jpg" alt="yall example.">

<img class="lozad" data-src="image.png" />

If you use WordPress you can use WP-Rocket or one of the many plugins that do this for you. But remember every plugin or js libary make your website a bit slower. But it this case you can get a lot of quick improvements.