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 SpeedGT MetrixWeb 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.

Sample Home Page
Sample Home Page (Thanks google.com for the images)

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)

Page Load Time
Normal Page Load Time

After reading many blogs on image loading we found these image rendering techniques interesting.

  1. Medium Progressive Image Loading
  2. Lazy Loading
  3. Facebook’s 200 bytes Technique

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)

Page Load Time - Lazy Loading Implementation

Progressive Image Loading

Progressive Image Loading is the technique which consists of following

  1. Show empty place holder
  2. Replace it with a small low-quality image (blurry image)
  3. 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!)

Page Load Time with Progressive Image Loading
Image Loading

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.

Click here for more details…

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!