Lazyload Images

Configuration

The 'Lazyload Images' filter is enabled by specifying

Apache:
ModPagespeedEnableFilters lazyload_images
Nginx:
pagespeed EnableFilters lazyload_images;
in the configuration file.

Objective

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.

Description

The lazyload_images filter defers loading of images until they become visible in the client's viewport or the page's onload 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 <img> elements on each HTML page to data-pagespeed-lazy-src. It attaches an 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 1.8.31.2 and later, all images on the page that haven't yet been loaded will be forcefully loaded after the page's onload event 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 onload, set:

Apache:
ModPagespeedLazyloadImagesAfterOnload off
Nginx:
pagespeed LazyloadImagesAfterOnload off;

Blank Url

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:

Apache:
ModPagespeedLazyloadImagesBlankUrl "https://www.gstatic.com/psa/static/1.gif"
Nginx:
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 the data-pagespeed-no-defer attribute (preferred) or pagespeed_no_defer attribute (deprecated). Usage: 

<img data-pagespeed-no-defer src=.../>

User-Agent Blacklist

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

By default lazyload_images injects JavaScript that uses a beacon to report back to the server the images that are visible in the client's initial viewport (above the fold). It takes a few accesses of a page for the data to be reported back and processed but eventually the above-the-fold images will be known and will be loaded immediately while all the other below-the-fold images will be lazily loaded; until then all images are lazily loaded.

The use of beacons can be disabled using the ModPagespeedCriticalImagesBeaconEnabled directive. If they are disabled, lazyload_images will not inject the JavaScript and will revert to lazily loading all images.

Example

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.

Risks

The computation of each image's position in the viewport may consume additional CPU cycles on the client side. Sites that employ JavaScript libraries to implement lazy-loading may not work properly with this mechanism.