yottaa sprocket Support Login

Receive the latest application performance news, tips, studies and more!

Test Results: Performance Benefits of Responsive Image Loading

Ari Weil
Ari Weil on Jan 24, 2013 12:38:00 PM


eCommerce sites have it pretty hard when it comes to web performance.Whereas most sites can cache a majority of pages, the typical eCommerce web site updates product pages regularly, and some even create customized pages that are unique to each visitor. This prevents these sites from benefitting from the huge performance boost offered by caching.
What’s more, these pages are filled with the largest types of files found on most websites: images. These two factors make it difficult for eCommerce sites to be fast sites…or does it?In this post, we look at one image optimization technique, Responsive Image Loading, that can be used on image-heavy sites.  We ran tests to measure the performance gains that can be had by implementing Responsive Image Loading. Read on for our results!

 

Image Optimization Techniques


There are a few techniques that can be used to speed up even the most image-heavy eCommerce sites. In this post we'll to cover a technique for limiting the number of images that have to be downloaded when you first open the page. The technique is usually called Responsive Image Loading, though sometimes you might also see it referred to as Lazy Loading.
The idea of Responsive Image Loading is that only the images currently in view are downloaded by your browser. If you have to scroll down to see a lot of images, then you stand to gain a huge benefit by implementing Responsive Image Loading. Let’s take a look at that benefit.


Testing Methodology


We ran three tests using WebSiteTest.com on a sample page we created on a test site: latituding.com. The page is a simple version of what you might find on an eCommerce webpage. It has a grid of 48 images representing things that might be for sale. 

An overview of the tests performed:

  1. Test 1 - Baseline Performance of the site without any optimizations in place.
  2. Test 2 - Performance of the site with some standard optimizations, but without implementing Responsive Image Loading.
  3. Test 3 - Performance of the site with Responsive Image Loading

All three tests were performed across 10 locations around the world. In each location we collected 10 samples. Then all 100 samples were averaged together to get a final number. And while there are many stats you need to be concerned with when it comes to Web Performance, the number one statistic we are focusing on is Time to Interact, which is when the customer can start using the page.


First Test - Baseline Performance

In the first test, we wanted to get a baseline showing how the site performs with no optimizations in place. As you can see, it’s not good. With 51 images being loaded with a total size of 22 MB, the average 9 second Time to Interact is understandable. It's a huge site with huge images.

Lat LL Test1


Test 2 - Partially Optimized except for Responsive Image Loading


The next test looks at the benefits of general Front-end optimization. This includes the techniques we've written about in the past like JavaScript minification and concatenation.

In the image below you can see that the image count and size stayed the same but total number of requests went from 111 down to 64. Most of this comes from the concatenation of CSS and JavaScript. From 18 down to 3 JavaScripts and from 36 down to 7 CSS files. All of these benefits result in an overall Time to Interact of 5.5 seconds from the original 9 seconds, a 38% savings.

Test 2 Summary


Test 3 - Optimized with Responsive Image Loading

The final test is the topic of this blog post: What happens when we implement Responsive Image Loading? The changes are significant: the number of images has gone from 51 down to 16 with a size change from 22 MB down to less than 7 MB. This resuts in an overall Time to Interact of about 4 seconds on average across all testing locations around the world.Remember, this is because all the images that appear ‘below the fold’, or below the bottom edge of the browser window, won’t get loaded until you scroll down to that part of the page. If you have a lot of images scattered down a very long page, this method can be extremely beneficial.

Test 3 Summary


Impact of Responsive Image Loading on Page Performance


As you have seen, the benefits of Responsive Image Loading can be significant; in our case, it was about a 52% increase.  Page load time (Time to Interact) was reduced from 8.7 seconds to 4.2 seconds.Summary Plot


How To Implement Responsive Image Loading


Unfortunately, its not a very easy solution to implement. You basically have two options for implementing Responsive Image Loading: 1) use a special JavaScript library and modify all of your pages’ markup or 2) implement a server side module which includes a JavaScript library and modifies the markup for you. 


Client Only


Do a search online for Responsive Image Loading or Lazy Load Images. You should get a few hits, mostly for jQuery libraries such as Mike Tuupola’s Lazy Load Plugin. When implementing this plugin, you need to update your img tags to use a placeholder image in the src attribute and store the real image url in the data-original attribute. That’s easy enough to do when you have 5–10 images on a single page, but when you have 10,000 images across hundreds of pages, you’ll probably want a better solution.


Server + Client


Server Options


The other solution depends on what your server is running. Tweak your search to add that server type to your Lazy Load search: Lazy Load Images Drupal, Lazy Load Images WordPress, etc. These modules all basically do the same thing: modify your existing HTML automatically for you. The downside is that you need to modify the server which, depending on the size of your company, may either involve working with a web ops team, or learning new skills you may not be familiar with.


Let Yottaa Do It For You


Actually, there is a third option which doesn’t require either modifying your markup or installing a module on your server: sign up for a Yottaa account and we will take care of it for all of your pages automatically. That’s what we did for this experiment. 

Have you implemented Responsive Image Loading? We would love to hear how you have put it in place on your site and what the benefits have been!

Ari Weil

VP of Products | I am a hands-on, results-focused, resourceful and creative product leader with a track record for successful solutions from initial concept throughout the product lifecycle. Filling various management and operational roles at each company I've worked, I enjoy and thrive under pressure. Nirvana is a dynamic, fast-paced organization where creativity, quality, collaboration and customer focus are key to delivering truly impactful products. Specialties: Product management, lifecycle management, networking and communication, database administration, performance tuning, production deployment and support, some system administration background. Experienced and engaging public speaker and evangelist.