What Is Lazy Loading?

When a user accesses an online webpage, they are required to download all the content on the page including images, videos, JavaScripts and any other type of files present. Naturally, downloading these resources can take time. Some users may be disgruntled with how long this takes and some may simply give up and bounce before even loading the page.

This is where lazy loading comes into play. With lazy loading, the user only downloads the content which they can actually see. That means when the user is at the top of the page, they won’t have to download the content at the bottom of the page since they can’t see it and it, therefore, isn’t relevant. This works great for increasing load times and user experience!

Impact on SEO

As you may already know, SEO crawlers don’t view pages as people do. Unprofessional and amateur implementation of lazy loading can have a negative effect on SEO since the crawler won’t be able to index all the content on the webpage. This is because a crawler is a bot and does not have a viewport, which is what is used to determine whether the content is visible to a viewer or not. Since they have no viewport, the webpage has no idea when to load the rest of the web page’s content – hence it doesn’t get indexed.

Google has released a batch of documents on how to implement lazy loading without adversely affecting your own SEO. An easy way is to provide links for lazy loaded content. Crawlers follow all links provided in a webpage, so they will access these links and the previously-unloaded content will be loaded and indexed. This solution is called paginated loading. You can see Google’s in-depth explanation, guide and implementation of this solution online.

Examples of lazy loading

WordPress provides a lazy loading solution called Infinite Scroll. This allows the automatic loading of more posts and blogs once the user reaches the end of a page or list. According to WordPress, users read more posts and blogs when using Infinite Scroll as opposed to the traditional page-based loading.

Benefits

Using lazy loading provides numerous benefits to both the user and the website in general, including:

  • Optimising content delivery and user experience.
  • Faster page load speed by reducing the number of resources to be loaded.
  • Higher retention as users are constantly being fed new content.
  • Lower resource costs as fewer files have to be downloaded.

Conclusion

Lazy loading is great at streamlining user experience and cutting down on resource costs. Content is delivered to users when the user needs them. If the user is going to leave the page without even scrolling, what’s the point in making them download content which they don’t even see? Lazy loading solves this and saves you bandwidth and allows users to load your website faster.

Blogs