PageSpeed Service was turned off on August 3rd, 2015. Please see Turndown Information for PageSpeed Service.
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.
The Lazyload Images rewriter 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.
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:
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.