Get Fast By Being Lazy

Page speed is increasingly important to those that want to provide a good user experience, an experience that is also in line with the expectations of search engines.

There are several ways to speed up the Web experience, but many are experimenting with deferring the loading of images that are not in the client's viewport.

By using the lazy load technique, designers defer the loading of images until they become visible in the client's viewport or when 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 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.

There are several javascript and jquery offerings that can get the job done including, Lazy Load, bLazy, Unveil and others.