Search
+1 (617) 7782998 | info@iispeed.com

Image lazyloading

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:

  1. optimize browser rendering
  2. 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

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:

 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>

Supported browsers

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

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 CriticalImagesBeaconEnabled directive. If they are disabled, lazyload_images will not inject the JavaScript and will revert to lazily loading all images.

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.

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.

Configuration

For PageSpeed on IIS and PageSpeed on ATS

Enable
pagespeed EnableFilters lazyload_images

Disable
pagespeed DisableFilters lazyload_images

Risk Classification

Moderate

Examples that demonstrate optimization in real time are available here.

PageSpeed optimization, powered by the official Google PageSpeed SDK

Share View Comments
.
Some content on this website represents a modified version of the official Google PageSpeed documentation