Test Results: Performance Benefits of Responsive Image Loading
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.
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:
- Test 1 - Baseline Performance of the site without any optimizations in place.
- Test 2 - Performance of the site with some standard optimizations, but without implementing Responsive Image Loading.
- 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.
Test 2 - Partially Optimized except for Responsive Image Loading
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.
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.
How To Implement Responsive Image Loading
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
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. /self-promotion
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!