What is lazy loading?

Lazy loading is a design pattern which delays the loading of an asset until it needs to be displayed. Using Lazy loading you can dramatically lower the amount in which a user needs to load on your website as it means that only the images immediately visible on the website will need to be loaded straight away which also drastically improves the sites efficiency. You can also see huge performance increases in instances where a network service needs to be initialised which can be costly on performance.

You can implement lazy loading in a variety of ways for example having a placeholder that can be loaded quicker in multiple instances in place of content that cannot be seen. You can also have no content out of the view box which is great for efficiency but means that as someone scrolls the site needs to be constantly adding in content line by line which could lead to a poor user experience. You can also have lazy loading implemented to partially load in content for example load all the code but don’t display anything until its needed.

You can see examples of lazy loading in a plethora of different sites but a good example is https://medium.com/ which has lightweight placeholders in place when it is not critical to load the image in.

medium.png

To find out more about implementing lazy loading in your site visit: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

 

 

2 thoughts on “What is lazy loading?”

  1. Great post. I was checking constantly this weblog and I’m
    inspired! Extremely helpful information specially the final section 🙂 I take care of such info a lot.

    I used to be seeking this particular info for a very long time.
    Thanks and good luck.

Leave a Reply

Your email address will not be published. Required fields are marked *