Defer Offscreen Images

What does Defer Offscreen Images mean?

PageSpeed Insights makes the following recommendation:

“Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive.” 

But what exactly does it mean? 

To understand, it’s essential to know what is meant by the fold and lazyload. 

The fold

“The fold” is the part of the screen that is immediately viewable, without scrolling, when a visitor lands on a page.

  • “above the fold” - everything displayed to the user/visitor when the page loads 
  • “below the fold” - everything that requires a scroll down to be viewed.

LazyLoad

Images that are not in the browser window won’t be loaded until the visitor scrolls down the page. In this way, it makes your website faster because all of the images aren’t loaded when the page loads initially. 

PageSpeed Insights wants you to LazyLoad any images which are not visible above the fold.

How can WP Rocket help?

With our LazyLoad images feature under Dashboard → WP Rocket → Settings → Media tab

Just enable the “Enable for images” to lazy load your images.

Lazyload is enabled, but the recommendation is still flagging some images, why?

The most common reasons why this may happen are listed in this guide:
Some images are not LazyLoaded

Useful Links

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.