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?

WP Rocket's LazyLoad and LazyLoad for CSS background images features address this recommendation.

To enable them, go to Dashboard → WP Rocket → Settings → Media tab, and check their boxes, like this:

enable lazyload features in the media tab

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

Not a WP Rocket customer yet?
Read our article about How to defer offscreen images on WordPress and learn how to address this PageSpeed Insights recommendation with and without a plugin.