Javascript SEO Guide: How to fix lazy-loading content

Lazy loading, or deferring the loading of non-critical or non-visible material, is a popular performance and UX recommended practise. This approach, however, can accidentally conceal material from Google if not applied appropriately. Now the challenge is how to ensure that Google can crawl and index material that is loaded slowly.

Let us first understand what is lazy-loading content? According to Google, “Lazy-loading is a technique that defers loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need. Where images are concerned, ‘non-critical’ is often synonymous with ‘off-screen’.”

Make sure that your lazy loading implementation loads all relevant information whenever it is visible in the viewport to guarantee that Googlebot sees everything on your website. Here are some ideas of ways to go about it:
-Images and iframes have native slow loading
-A polyfill for the IntersectionObserver API
-A JavaScript library that allows data to be loaded as it enters the viewport

Make sure to put your plan to the test.

For endless scrolling, support paginated loading
Ensure to support paginated loading if you’re building an endless scroll experience. Users value paginated loading because it allows them to share and reengage with your content. It also enables Google to display a link to a precise location inside the content rather than the top of an endless scrolling page.

Provide a unique link to each part that users may share and load directly to allow paginated loading. When the material is loaded dynamically, the search engine proposes utilising the API History to change the URL.

Test
Make that your implementation is working properly after you’ve put it up. Using a Puppeteer script to locally test your implementation is one method to achieve this. Puppeteer is a headless Chrome control library written in Node.js. Node.js is required to run the script. To check out and run the script, use the following commands:

git clone https://github.com/GoogleChromeLabs/puppeteer-examples cd puppeteer-examples npm i node lazyimages_without_scroll_events.js -h

After executing the script, carefully check the screenshots it generated to ensure they contain all of the material you want Googlebot to see and index. You may also use Search Console’s URL inspection tool to verify if all of the pictures were loaded. Make sure your pictures are loaded by looking at the screenshot and the generated HTML.

READ MORE:

JavaScript SEO Guide: All you need to know about fundamentals, issues