Lazy Loading Images

By April 3, 2014 Design, Programming No Comments

Imagine this scenario: You’re looking to shop online for a brand new whatchamacallit. You Google it up, get a list of links, and select one of the first that appears relevant.

Then you wait as the page chokes and crawls along in a frozen state while the images are being loaded. Within five seconds you jump back to Google and select a different link. It works great. The page loads almost instantly and you are on your way to enjoying a brand new watchamacallit.

Your experience at the first site you visited was mildly annoying. You are a denizen of the web and your time is limited. You expect a certain modicum of performance from a business when you come to shop. But no matter, you found a business selling the same product whom also valued the quality of your shopping experience.

For the owner of the first site, a poor page load time caused them to lose a potential sale.

Consider Lazy Loading Images

Page loading times are important. For every second of load time, the likelihood of losing a visitor rises exponentially. As far back as 2010 Google made page load times a part of your sites ranking. So what can you do to improve your page load times while potentially having a positive impact on your sites ranking?

Start with your images. One of the biggest culprits of poor page load times are all of those wonderful pictures you have on your site.

Optimize and compress your images and consider lazy loading. Lazy loading images speeds up page load times because only the visible images on your site are initially loaded. As a visitor scrolls the page the images initially out of view are loaded.

Working with WordPress? Great, because there are a number of easy to install and configure plug-ins to quickly get you on your lazy loading way! A quick Google search for lazy load plugins will get you a number of choices.

A Quick Lazy Load Test

I did a quick test with the Lazy Load plug-in on one of my portfolio pages to demonstrate the impact.

  • Execute an initial page load test. You can easily find any number of free page load testers online.
  • Download and activate the lazy load plug-in.
  • That’s it. Lazy Load is already working.
  • Test your page again and compare.

My first fully loaded view without the plug-in: 4.167 seconds.

My second fully loaded view with the plug-in: 3.74 seconds.

While this may seem negligible at first glance. Don’t be fooled! Every second, heck, every millisecond counts when it comes to page speed. The impact of a plug-in such as Lazy Load is going to be especially felt on sites that are heavy on image content.

Lazy loading images is one small tool in your arsenal to speeding up page load times. Google Developers also has a great analyzer tool to help you with other facets of site optimization and page load times. Building great visitor experiences is not only about making your sites information easy to navigate and easy to find, it’s also about timely performance!