Google has created a guide for SEOs on how to implement lazy loading for images and videos effectively. Lazy loading is a technique that delays the loading of non-critical or non-visible content, which is considered a best practice. However, incorrect implementation might hide important content from Google. To address this, Google has released a help document detailing how to ensure it can crawl and index lazy-loaded content properly. Google’s Martin Splitt mentioned that this document is an initial version and will be expanded with more content.
Here is a summary of the current content of the help document:
### How to Ensure Google Can See Lazy-Loaded Content
Utilize the IntersectionObserver API and a polyfill to load content when it becomes visible in the viewport. This ensures Google can see all the content on the page.
### Recommendations for Infinite Scroll
When implementing an infinite scroll experience, support paginated loading. This can be achieved by providing a unique link for each section so users can share and access it directly. Google advises using the History API to update the URL dynamically as content loads.
### Testing Lazy Loading
SEOs can verify the correct functioning of lazy loading by using a Puppeteer script to test the implementation locally. Google includes a script in the help document, which requires Node.js to run. Running this script creates a set of images to ensure all important content is visible and indexable by Google.
