Improve site speed by Lazy loading images in web app
We create an Angular directive using Intersection observer API to delay loading of the images until they are needed and add some shimmer effect to improve the UX.
We spend a lot of time building new apps be it Single Page App (SPA) or Progressive Web Application (PWA) or websites using React, Vue or Angular. One such application was heavy on images on the home page. Images surely enhance the aesthetic appeal of the website but increase the site load time drastically. The browser has to fetch all the images from their source to complete loading of the page. Unfortunately, the browser will also load those images that are “below the fold”, i.e. not in the view of the user.
Fetching all images in the first load of the site leads to a slow site load. If the site doesn’t load or becomes usable in a short span of time, your users may just walk away, yes, leave your site and never return again.
The average time it takes to fully load the average mobile landing page is 22 seconds. However, research also indicates 53% of people will leave a mobile page if it takes longer than 3 seconds to load.
How do we solve the load time issue and without removing the images?
Lazy Loading Images refers to a set of techniques that defers the loading of images on a page to a later point in time, when those images are actually needed instead of loading them upfront. These techniques help in improving performance, better utilisation of the device’s resources and reducing associated costs.
All hail Lazy-loading!
Lazy, but ultimately gets the work done!
A website which lazy loads images will defer the loading of resources as long as they are not in the user’s view.. Instead it will load them as soon as the user scrolls and the image comes into the viewport. The technique of lazy loading can be applied to almost all the resources on a page but currently we just care about our “image”s!
Our trick behind lazy-loading is to not set the src attribute of your img element, instead store the image url elsewhere to be put into the src lazily when applicable.
We store the image url in the dataset attribute, lets say data-src=”https://my-image-url”. Later when user scrolls to the image, we will set the img.src to img.dataset.src
- To summarize:
- Take the original URL of an img and put it in data-src dataset
- Make sure the src attribute is blank else it will trigger image fetch
- Use Intersection Observer API to wait and observe for a callback when the image element is in viewport
- The callback takes whatever URL data is present in dataset.src and puts it in img.src thus triggering fetch.
- We also add some fancy shimmer effect to the img div so that it looks cool while our image is getting fetched
A quote from Mozilla Developers Network:
Implementing intersection detection in the past involved event handlers and loops calling methods like Element.getBoundingClientRect() to build up the needed information for every element affected. Since all this code runs on the main thread, even one of these can cause performance problems. When a site is loaded with these tests, things can get downright ugly.
Here comes “The” Intersection Observer!
This does the magic. Whenever the observer sees that the observed image is intersecting with the viewport, it fires the callback, which sets the image element’s src to the dataset.src.
We decided to take it a step further and build this into an angular directive for easy use in an SPA/PWA. The app where we needed it was an Ionic/Angular SPA!
The following snippet shows how an Angular directive can be built to lazy-load an image using Intersection Observer API
Now using the above directive is quite straight forward:
We have one more problem to solve! When the image loads lazily, depending on the size of the image, it can take some time to get downloaded and show. We want to show some nice placeholder during that time for a good user experience. We solve it using a CSS based shimmer effect which have become quite popular these days.
CSS shimmer snippet for image placeholder:
Just wrap your img in a div and put the shimmer class on that div.
Adding all pieces up, we have images with initial shimmering background. When it intersects with the viewport the src is changed, and fetch for real image is initiated. Till then, the image shimmers and later gets replaced by original image. Thus we have a website which loads smooth and looks awesome!
Unfortunately, all browsers don’t support this awesome API. In our code above, we simply bail out and load the image immediately if the browser does not support the Intersection Observer API.
The browser support for Intersection Observer can be found here.
If you would like the solution to work on non supported browsers as well, you could use a polyfill: here.
The Author Nilarnab Mookherjee is a Software development engineer at Adrobit Technologies.
We specialize in custom built solutions for startups and helps them scale from idea to launch using our expertise and over 10 years of experience in software development. Checkout more details on our home page