Using Lazy loading for Offscreen media

Sometimes we have a long webpage and because everyone relates and likes media such as images, videos, audio, etc, we have also included media across that page. When someone visits that page, the web browser downloads the entire page and shows it to the user visiting the page. Now the user is waiting for the entire page to load until he can access the website properly this leads to longer load time. This long wait is mostly because we have all the media across the page which the user might not even see when he first visits the page. This leads to bad user experience and this is not good for SEO. Now one solution to solve this problem is to reduce the media contents on your website, but the owners do not want to dilute the quality of their website by doing so.

Many of us must have encountered this type of scenario. This happens a lot these days, mostly with all these ecommerce platforms where they have product images across the page. Sometimes all we do is search for a product and buy the one which comes at the top and not even bother to scroll down. So, all the extra time which the browser took to download other images went for a waste. However, this problem has a solution called as Lazy Loading.

Lazy loading is technique that defers loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need. Basically, what Lazy loading does is that it when you open a webpage it will only load those images which you will be able to see on the screen at the first instance. This means all the images which are offscreen will not be loaded. Thereby reducing the number of HTTP request mechanism and improving the loading time. Now the owner of the website is happy and so is the user. The speed and the quality of website are both retained. As the user scrolls the webpage the lazy loader keeps on loading the media as needed thereby serving the need of the visitor and helping the website increase speed, give better user experience and eventually help the SEO.

Benefits of Lazy Loading:

  • It saves data. When we have unlimited data, it doesn’t matter much. However, when we access a website on our mobile, it is not always that we et high speed internet. Lazy loading helps is such cases to browse through the website quickly.
  •  It saves your processing time, battery and other resources which can be better utilized for some other task.

How to implement Lazy loading on your website?

If you are working with WordPress, implementing Lazy loading is very easy. You can use a plugin to do your job. I use the ‘Lazy Loader’ plugin. Once you activate the plugin, you can go to the media section of the dashboard and select the media which you would like to load below the fold of the screen.

Used with care, lazy loading images and video can seriously lower the initial load time and page payloads on your site. Users won’t incur unnecessary network activity and processing costs of media resources they may never see, but they can still view those resources if they want.

As far as performance improvement techniques go, lazy loading is reasonably uncontroversial. If you have a lot of inline imagery in your site, it’s a perfectly fine way to cut down on unnecessary downloads. Your site’s users and project stakeholders will appreciate it!

Leave a Comment