WordPress lazyloading can be applied to images and Iframes, instructing the browser not to load these until they enter the viewport.
This can sometimes cause issues, and requires testing. Sometimes, you’re better off without lazyloading, but rather a properly optimized and ordered page – as inherently, browsers load resources based on their order.
How does WordPress lazyloading work?
Lazyloading works by ensuring the resource doesn’t load until the user scrolls down to the content. It is most commonly used for images, but can also be used with iframes, such as a video being embedded on a site.
Aside from manually telling resources to utilise lazyloading, it is much easier to use a plugin. These can be found via the WordPress directory, and usually come as part of the optimization/caching plugin of your choice.
If you are using OpenLiteSpeed, then you will use LS Cache.
Why do we use WordPress Lazyloading?
The focus should generally be on loading the critical render path – what the user first sees – before anything else. WordPress Lazyloading ensures this for us, which is great.
Problems we run into with WordPress Lazyloading
Enabling lazyloading can cause styling issues. By not loading the images immediately, this can have an affect on the page structure. If this happens to you, it may be recommend to not utilise this feature.
If you use large images or don’t have a nearby server (or utilise a CDN) to your users, having an image only start loading when it enters the viewport, and then taking 1+ seconds to load, can be quite jarring to the user, and expose them to an empty looking page, followed by the flash of unstlyed content (FUOC) we have talked about before.
Need help adding WordPress Lazyloading?
This is part of our optimization service. We can help you optimize your site above and beyond WordPress Lazyloading, just let us know what you are trying to achieve, and we will let you know how we can help.