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.
Defer Offscreen Images
What does Defer Offscreen Images Mean?
How Deferring Offscreen Images Increases Web Page Performance
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.
How to Defer Offscreen Images
Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.
PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.