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

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

It has 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)

Normal Page Load Time

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

  1. Medium Progressive Image Loading

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.

JS Filddle to implement Lazy Load

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 with Lazy Loading

Progressive Image Loading

Progressive Image Loading is the technique which consists of following

  1. Show empty place holder

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)

Progressive Image Loading with Multiple Images

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

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 clap button :)

Ruby On Rails Developer, JavaScript Lead, Quick Learner, Reader, Writer, Always in Mood !!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store