Defer Offscreen Images

Deferring off screen images, or otherwise known as lazy loading or asynchronous loading, is a method that web developers can take to defer the loading of specific images until they are needed. For example, when a visitor lands on a web page, the page begins loading in the order that resources and elements are ordered. This means it also loads images and resources that are not immediately visible to a visitor. For a lot of websites, the top half of the page usually contains the most critical, or most pertinent information. And a lot of this depends on what device the user is on. For example, on a laptop or desktop, the user would typically see the most pertinent information at the top. The bottom half of the page usually contains additional information or supporting information. A lot of visitors never navigate to the bottom of pages. In this example, if deferred loading, or lazy loading were implemented, the browser would not have to process any of the images beyond what the user can see, saving valuable processing and loading time.

When it comes to reasons why a page loads slowly or not, one of the main offenders is typically images. Sometimes, web developers or marketing reams forget to optimize images before inserting them into pages, which ends up causing performance issues later. They can be one of the easiest items on a web page to forget about optimizing. Additionally, other Lighthouse performance metrics, like TTI (Time to Interactive) and SI (Speed Index) (Speed Index score) can also be improved with deferred loading techniques.

All the popular browsers, like Chrome, Firefox, Edge, and Opera support lazy loading. In Chrome, from version 76 onward, developers can simply use the loading attribute instead of having to use custom code or separate JavaScript library. In other browsers, the loading=lazy attribute is used. JavaScript handlers can also be used for images that are dynamically added to the page as well as background images in your CSS. Additionally, CMS platforms like WordPress automatically set pages to lazy load by default, but there are plugins for deferring image loading for background images, iframes, etc. Lazy loading is extremely important for mobile users, as these devices typically will load pages slower due to network conditions. Anything to make the user experience better will keep your users engaged.