you can still optimize it, by passing the components, that needs to be a client component (background, ...) as client components. A background for example is not important for google. More important is text. For text, I would do something like this:

<span className="sr-only">Some Text</span>

Like that the text is rendered for google, but not for the user. Keep in mind: the span is an addition to your animated text

so the same text I have in my framer motion animated div I can just repeat with classname sr-only and it will work? I've heard crawlers penilize for using "display-none" and hiding content, won't that be the same case with sr-only approach? @B33fb0n3

Try it and take a look at your network tab and also take a look at the html that will be generated. Everything should be fine, when you only add the html without changing anything at the css front

You can use lazy motion

By framer

If google framer motion lazy motion it should show a sample tutorial on making it lazy load the animation

it says it reduced bundle size, but how does it change the fact that it's still client rendered

AFAIK the issue is that the crawlers cant access the client rendered content and index it or something of that nature

Hmm the only thing i can think of at the moment is to use sitemap

And screen reading only too tags

sitemap is only for sites, not for the content of the sites

my personal website used to hide everything at the start but only fade them in (opacity: 0 -> 1) on load. Google has no problems with it, it could read it pretty well

not sure about display:none though

so you could instead of display:none, simply hide it by opacity or transition or similar methods

this is exactly what I am using ,a couple of opacity 0 to 1 effects using framer motion, but what I've read about SEO is that almost any client side content does not get picked up by crawlers

that what joulev said. You can for example position it absolute like this:
{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}

it did get picked up by crawlers for me, so no need to be too worried about it

though now i have completely redesigned the thing so no longer have a live demo for you

Okay.. so I shouldn't worry then I guess

Just weird that most info on the internet suggest otherwise, maybe it's either old info or incomplete

display:none or area-hidden=true could actually have an impact

though opacity:0 i don't think has any impact on SEO

I'm not doing any of those in my website

I'm just doing fade in animations for my h1 and some components

and an animated background that acts as a spotlight and it requires the mouse move and mouse offset events

@joulev did you go through google search console to verify your domain's ownership?

or did it just work

it just worked, yes

well let's consider this matter solved, I guess time will tell if my website will get indexed properly (since I got the domain just 2-3 days ago) and I don't really have any content on my website YET 😅 thanks joulev

well... worst case can always go to search console, verify the domain and have a look at what google sees