Goal: Optimize page rendering speed and reduce the number of HTTP requests
Optimize page rendering speed and reduce the number of HTTP requests by deferring the loading of images that are not initially visible in the viewport. Applying this optimization makes a webpage comply with these PageSpeed rules:
- optimize browser rendering
- minimizing round trip times
How image lazyloading works
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 elements on each HTML page to 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 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:
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 "http://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.
Disabling Lazyloading Per-image
Image lazyloading will not defer an img tag if it has the pagespeed_no_defer attribute. Usage:
<img pagespeed_no_defer="" src=... /></code>
A blacklist is employed to exclude user-agents for image lazyloading. Blackberry 5.0, the google+ thumbnail fetcher, and web spiders will not see images lazy loaded.
Lazily loading only images below the fold
The use of beacons can be disabled using the
If they are disabled, lazyload_images will
Image lazyloading 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.