Page Load Optimization by Progressive Image Loading (like Medium)
While working on the project we came across the situation where the client told us the page load time of our home page is very high and we must do anything in the world in order to reduce this load time as it is the heart of our website.
As a result, we moved to some open sources tools to analyze our web page Google Page Speed, GT Metrix, Web Page Test to name a few.
Then we found the culprit! They were the high-quality images (which were apple of our client’s eye) on the page. And it contributed more than 85% of the load time. Then we got back to the client saying we need to compress images on the page, and the client said a “BIG NO” and told us to find a solution while maintaining the high-quality resolution of images as it is!
In order to describe your whole situation to you, we decided to create a simple homepage having all the images with resolution greater than 1024 x 768 pixels. We measured load time using simple JQuery. See below for code.
This code just initializes timerStart variable with current time and at then calculates the time difference initially and after window load completes.
This is how our Sample Home Page page looks like.
It has a simple bootstrap carousel and bootstrap thumbnails. Simple isn’t it!
We have deployed it on heroku!
( While on page Press ⌘ + Shirt +R / Ctrl + Shift + R i.e. hard refresh )
Sample Home Page Link: https://boiling-meadow-22449.herokuapp.com/
Page Load Time (cache disabled): 16 seconds (shown in red in below image)
After reading many blogs on image loading we found these image rendering techniques interesting.
We implemented Lazy Loading and Progressive Image Loading only.
Lazy Loading Implementation
Delay loading of images in long web pages. Images outside of viewport won’t be loaded before user scrolls to them.
We used JQuery LazyLoad, you can find setup instructions here. We have created sample JSFiddle for it below.
After adding the Lazy Loading there was slight difference in load time also the page appeared smoother than before. But the window load time was still busy till all the images on the page loaded!
Sample Home Page with Lazy Loading: https://boiling-meadow-22449.herokuapp.com/index_lazy
Page Load Time(cache disabled): 14 seconds (Smoothing Effect)
Progressive Image Loading
Progressive Image Loading is the technique which consists of following
- Show empty place holder
- Replace it with a small low-quality image (blurry image)
- Then replace it with desired high-quality image
We have tweaked José Manuel Pérez’s code so it can work with multiple images. See below (you can also edit it in CodePen)
See the Pen xgGWNV by Ankur Vyas (@ankurace) on CodePen.
After implementing we found this is it! It is exactly what we were looking for!
Sample Home Page with Progressive Image Loading: https://boiling-meadow-22449.herokuapp.com/index_pil
Page Load Time(cache disabled): 4 seconds (Yay! Awesome!)
We were satisfied with these results as it loads the page faster and also provides smooth loading of images like Medium does!
For this we used Rails 4.2.6 with Ruby 2.3.1, you can find the complete source code here.
Thanks, @jmperezperez for wonderful article! who inspired me to write this one.
That’s it! Thanks for reading. If you liked it, press the lovely heart button 🙂
We are a very Capable and a Committed team of programmers who love working with Startups. It’s a great feeling to help someone build their dream venture.
At BoTree Technologies, we build enterprise applications with our RoR team of 25+ engineers.
We also specialize in RPA, AI, Python, Django, JavaScript and ReactJS.
Consulting is free – let us help you grow!
