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:
- BlackBerry 5.0 and older
- The Google Plus thumbnail fetcher
- Web Spiders (full list)
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.