Lazyload Images

PageSpeed Service was turned off on August 3rd, 2015. Please see Turndown Information for PageSpeed Service.

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 rewriter implements the PageSpeed rules for optimizing browser rendering and minimizing round trip times.

Description

The Lazyload Images rewriter 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.

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:

Example

The effect of this rewriter 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.