Fix lazy-loaded content
Deferring loading of non-critical or non-visible content, also commonly known as "lazy-loading", is a common performance and UX best practice. For more information, see the guide for lazy-loading images and video. However, if not implemented correctly, this technique can inadvertently hide content from Google. This document explains how to make sure Google can crawl and index lazy-loaded content.
Load content when it's visible in the viewport
To ensure that Google sees all content on your page, make sure that your lazy-loading implementation loads all relevant content whenever it is visible in the viewport. Here are a few methods to implement lazy-loading:
- Browser built-in lazy-loading for images and iframes
- IntersectionObserver API and a polyfill
- A JavaScript library that supports loading data when it enters the viewport
The methods mentioned don't rely on user actions, such as scrolling or clicking, to load content, which is important as Google Search does not interact with your page.
Don't add lazy-loading to content that is likely to be immediately visible when a user opens a page. That might cause content to take longer to load and show up in the browser, which will be very noticeable to the user.
Make sure to test your implementation.
Support paginated loading for infinite scroll
If you are implementing an infinite scroll experience, make sure to support paginated loading. Paginated loading is important for users because it allows them to share and reengage with your content. It also allows Google to show a link to a specific point in the content, rather than the top of an infinite scrolling page.
To support paginated loading, provide a unique link to each section that users can share and load directly. We recommend using the History API to update the URL when the content is loaded dynamically.
Test
After you set up your implementation, make sure it works correctly.
You can use the URL Inspection Tool in Search Console to see if all content was loaded.
Check the rendered HTML to make sure your content is in the rendered HTML by looking for it in URL Inspection Tool. If your image or video URLs appear in the src attribute on the <img> or <video> elements in the rendered HTML, your setup works correctly.