Get Fast By Being Lazy

Posted on

  • email
  • twitter
  • facebook
  • share this

share this



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 <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.

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


 Request Website Magazine's Free Weekly Newsletters 


Login To Comment


Become a Member

Not already a part of our community? Sign up to participate in the discussion. It's free and quick.

Sign Up

Be the first to comment on this article

999 E Touhy Ave
Des Plaines, IL 60018

Toll Free: 1.800.817.1518
International: 1.773.628.2779
Fax: 1.773.272.0920
Email: info@websitemagazine.com

Facebook


Twitter