More than half of mobile users leave the webpage if it loads longer than 3 seconds. Moreover, Google will not even crawl your entire page if it takes too long to load. If your website takes longer than that 3 seconds, Google suggests you lazy load images. Lazy loading images is an approach to delay loading images until needed since they are bandwidth intensive. Keeping this in mind, let’s take a look at the benefits of lazy loading images and the different approaches.
Benefits of using lazy loading images and content for SEO
There are many reasons to lazy load images, here are the main benefits:
1. Improve page load time
Lazy loading will help speed up the loading time of your page. It is a sort of balance between giving the users the information they need and saving bandwidth. Ideally, you need to provide the information the user needs on the top of the page, to avoid having to load the rest of the page. This way you only load the valuable information they need as they scroll through.
2. Interaction with users is faster
Since the page is not entirely loaded, this allows the content to be loaded to the user faster. If you had to download an entire page, it would slow down the loading time. This will in turn result in potential leads being lost because they cannot access the information they need quickly.
Alternatively, with lazy loading, users are given access to the information instantly. The information is shown as soon as you load the page. The rest of the information is loaded later as soon as the user scrolls down his page. This feature allows your readers to read at their own pace and scroll through the page as they continue reading. So not only does it save you bandwidth, but it also provides the content to your readers as they need it.
3. Increase session duration
When users get access to your information instantly, they stay on your site for a longer duration. The longer you keep leads on your page, the more you create brand awareness. It is essential to retain customers so that you can widen your business clientele.
When your site loads quickly, your audience is more likely to remain on your page. Lazy loading also ensures that your audience can load the information they need efficiently and quickly. This approach also reduces the probability of users leaving your site. Most likely users will spend more time reading your content and getting acquainted with your business. This is important if you want to earn conversions since the more time users spend on your site, the more they will learn about your brand. Brand familiarity will give you the boost you need over other competitors.
4. Helps you maximize your resources
Since the page is not loaded entirely every time someone accesses it, you do not lose bandwidth, you save on data and you require less computation from the browser. This in turn helps you save on resources so your website can handle more traffic.
Showing the important information at the top of the page allows you to use fewer resources and save time and money.
Lazy Loading Problems and Solutions for best SEO results
Website speed is one of the most important on-page SEO factors to consider. It is also one of the easiest to control. The goal is to load your page faster than 3 seconds even on a 3G data connection.
However, it is surprising to note that most websites go over this limit. With lots of script requests and large payloads, this time limit cannot be achieved. According to Google, the average web page loading speed is 22 seconds.
Knowing this information should motivate you more to improve your website speed as it will give you an advantage against your competitors. Not only in Google search but also with your visitors.
Lazy-load Content scenarios
Firstly, you need to assess what assets your pages load. The next step is to determine what you want the user’s initial experience to be and what you can load once the user starts reading or interacting with the content.
For content or sales-focused website, it is most likely that these sites will need HTML, CSS, JavaScript, images and custom fonts. These sites also are the ones that aim for organic traffic from search engines meaning they are SEO-focused. Therefore, apart from loading the page faster, you want the content to be accessible to search engine crawlers. These crawlers will not execute your scripts or scroll your page to render lazy-loaded content.
Content can be media, code, or text/ markup. However, the most impact a page speed has are images and videos (media). Deferring their load time can have an actual impact on the loading time. On the other hand, JavaScript, CSS, HTML and Fonts are crucial to rendering pages but they tend to add bottlenecks. Delaying their load can load your content sooner. As for text, make sure that the important information is loaded to the top of the page so crawlers and visitors can see the valuable content immediately.
Solutions for different SEO scenarios
To be able to lazy load images and videos, we need to first set up some markup to make them indexable. Next, we look at how to use IntersectionObserver to lazy load assets as they scroll into view.
Markup to make media indexable by crawlers:
Crawlers will not scroll your page to trigger scripts like IntersectionObserver. This can have a bad effect on your ranking since a lot of key factors are missing from searches. Also, image searches can be a hidden source of additional organic traffic.
To overcome this, you should use the NoScript tag. By using the NoScript element you are indicating that crawlers should load the image and index it for you. Basically, the NoScript tag is a semantic mechanism to inform the browser to only render content inside the element if the browser does not support JavaScript. Since most users have JS turned on, the image will not load initially for users (only after scrolling).
IntersectionObserver callback:
IntersectionObserver works by triggering a callback when a target element comes into view. The callback allows you to execute code when the element comes into view and load assets as needed.
IntersectionObserver contains configuration parameters that indicate how close to the visible viewport an observed element should be before the callback is triggered. It also contains a root margin attribute that specifies how much vertically or horizontally the margin of an element can be.
For example, you can tell the observer to trigger a callback when the watched element is within 60px of viewport vertically. You can also set a timeout before the trigger will fire.
For more detailed information on how to implement this, see here.
Google’s guide for lazy loading
Google provides a thorough guide to lazy-loading your content. Here is an overview of the most important things to consider:
1. Load Content when it is visible in the viewport
To make sure that crawlers index all your content on your page, you need to ensure your lazy loading implementation loads all the relevant content whenever it is visible in the viewport. Google mentions 3 examples:
- Native lazy-loading for images and iframes – In Chrome, you can use the loading=lazy attribute to lazy-load images without the need to add custom lazy-loading code or JS libraries.
- IntersectionObserver API (see the section above) and polyfill (for older browsers)
- Adding a JavaScript library that allows you to load data when entering the viewport.
Next, make sure to test your implementation.
2. Add support for paginated loading for infinite scroll
It is important to add paginated loading if you are using an infinite scroll. Infinite scrolling is similar to what you see on social media sites like Facebook or Twitter. In essence, once you scroll down, and you reach the bottom of an element, you are introduced to another one. Much like new site websites that offer you articles as you reach the end of the content. Paginated loading allows for users to share and engage with your content.
To add pagination, provide a unique link to each section that the users can share and load directly. Google recommends making use of the History API to update the URL when the content is dynamically loaded.
3. Test your implementation
After setting up your implementation, you need to ensure it works properly. Google recommends you use Puppeteer script to locally test your implementation. When you run the script, you can manually review the screenshot images that it creates to ensure that they include all the content you want to be visible and indexed by crawlers.
Another approach is to use the URL Inspection tool in Google Search Console. By inspecting the URL, you an see if all the images were loaded by checking the rendered HTML and the screenshots.
Conclusion
Assets like images and videos in websites can drastically slow down your site because they are large in size and hence heavy on bandwidth. Due to this, your pages will take a longer time to load. When a user visits your website, the entire content of the page is downloaded and rendered. In lazy loading, rather than loading the complete page, you only load the content that is needed. The rest of the content is only rendered when it comes into view after scrolling.
This lazy loading approach will not only improve your speed performance on loading but will also encourage users to remain on your site, thus minimizing your bounce rates which can negatively impact your SEO. It also saves bandwidth and memory as they are not wasted with content that is not looked at.
So make sure to lazy load all your media assets to reap all the benefits and make your website SEO friendly.
Veteran content writer with focus on Technology and SEO.
