Google has created a document that offers guidance to SEOs on implementing lazy loading for images and video.
Lazy loading refers to the technique of deferring loading of non-critical or non-visible content.
It’s considered a best practice, however, if it’s not implemented correctly it could hide important content from Google.
That’s why Google created a help document which explains how to make sure it can crawl and index lazy-loaded content.
Google’s Martin Splitt says this is just a glimpse of the first version and there will eventually be more content added.
Here is an overview of what is in the help document so far.
How to ensure Google can see lazy-loaded content
Load content when it’s visible in the viewport by using the IntersectionObserver API and a polyfill. This will ensure Google see all content on the page.
Recommendations for infinite scroll
Support paginated loading when utilizing an infinite scroll experience.
Paginated loading can be supported by providing a unique link to each section that users can share and load directly.
Google specifically recommends using the History API to update the URL when the content is loaded dynamically.
Testing lazy-loading
SEOs can make sure lazy-loading works correctly by using a Puppeteer script to locally test the implementation.
Google provides a script to use for the test in the help document. Running the script will require Node.js.
Running the script will create a set of images that can be examined to make sure all important content is visible and can be indexed by Google.