Lazy loading website sections and SEO

Question

I have an interactive Wordpress website with multiple animations/images. I wanted to improve Google speed insight results, but keep the site SEO friendly.

The proposed improvement includes lazy loading of the whole sections.

The steps are as follows:

1. Output the homepage of the site with minimal semantic mark up and barely no styles. The content is hidden behind overlay

   The purpose of the point is to provide content for Google robots.

2. Use AJAX to load main screen which replaces the minimal text.

3. Lazy load other sections on scroll.

The purpose of the points is to provide better loading times and user experience.

Is such practice bad for SEO? I mean, does Google penalize it? The text content is not changed.

Answer 1

Your practice is absolutely fine, however, you'll have to check, what Google Bot fetches for your site/URL.

If your logic is doing something like: upon any event, attach/append content and display, it is a bad practice, since it is considered cloaking.

Do a Fetch & Render in Google Search Console, to see how it appears to Google Bot and User. Besides, check the HTML Code if the bot can see all the content that appears on the home page.

If the Google Bot and User can see the same content that is shown on the landing page, it is a good practice and helps you rank better in site performance.

Answer 2

The purpose of the point is to provide content for Google robots. ... The content is hidden behind overlay

Any cloaking / hiding, text filling / stuffing is def not a good idea and you could easily get penalized for this. Googlebot sure knows his ways to see how your page looks after all is loaded and the dust settled. Make sure bots get to see same content as users.

Same goes for point 2: Stuffing the page with "invisible SEO content" is black-hat and will only get you into trouble. It has been like this for years now.

Lazy load other sections on scroll.

This is probably ok. It is quite normal for a page to change after some user interactions. E.g. descriptions in tooltip-like boxes appearing on mouseover, changes in content after filtering, etc. Again, it is bad to include any hidden text, or have things strangely disappear, during or soon after page load.

To keep both users and bots happy, do the following: use pagination < prev 1 2 3 .. 19 next> and make sure users see it, whenever reaching like 95% of page X. In case a users hits the absolute bottom of the page X, some content from top of page Y gets lazyloaded (appended).

You could also add a button on bottom of page X, such as Load 20 more.. below pagination, so content of page Y does not get lazyloaded on its own, but rather upon user's request. This is super safe, the user is more in control, but still on the same page.