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.
Then we found the culprit! They were the high quality images (which were apple of our clients 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 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 the you 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 initialize
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.
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.
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 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)
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.
That’s it! Thanks for reading. If you liked it, press the lovely clap button :)