The 'Lazyload Images' filter is enabled by specifying
pagespeed EnableFilters lazyload_images;
Optimize browser rendering and reduce number of HTTP round-trips by deferring the loading of images which are not in the client's viewport. This filter implements the PageSpeed rules for optimizing browser rendering and minimizing round trip times.
The lazyload_images filter defers loading of images until they
become visible in the client's viewport or the page's
event fires. This avoids blocking the download of other critical resources
necessary for rendering the above the fold section of the page.
The filter changes the
src attributes of
elements on each HTML page to
data-pagespeed-lazy-src. It attaches
onload handler to these elements to determine whether the
element is in the client's viewport, and if so, loads it. It also attaches an
onscroll handler to the page, so that elements below the fold
are loaded when they become visible in the client's viewport as the user
scrolls down the page.
Lazyload After Onload
Additionally, in 126.96.36.199 and later, all images on the page that haven't yet
been loaded will be forcefully loaded after the page's
is fired. This reduces jank when scrolling the page, especially on mobile
devices, at the cost of downloading bytes for images that may never be displayed
to the user.
To disable loading of images on page
pagespeed LazyloadImagesAfterOnload off;
By default, when the page is initially viewed, a 1x1 blank image is served from pagespeed_static. It is also possible to use the same image served by Google's network, or any image that you choose, by specifying:
pagespeed LazyloadImagesBlankUrl "https://www.gstatic.com/psa/static/1.gif";
An advantage of this approach is that this gif may already be in the browser cache since any PageSpeed-enabled site can share it. However, this would send traffic to Google with your page as the Referer.
These directives can be used in location-specific configuration sections.
Disabling Lazyloading Per-image
lazyload_images doesn't defer an
img tag if it has
data-pagespeed-no-defer attribute (preferred) or
attribute (deprecated). Usage:
<img data-pagespeed-no-defer src=.../>
To ensure images are only lazyloaded in supported browsers, lazyload_images uses a User Agent blacklist. Browsers that will not see images loaded lazily are:
Lazily loading only images below the fold
The effect of this filter can be observed by comparing the number of requests before and after rewriting. As you scroll down, you will notice that images below the fold are only requested after they become visible in the viewport.