Jump to content
GreenSock

MindGamer

GSAP and Google Core Web Vitals

Recommended Posts

I'm noticing that many (if not most) of the pages where I have used GSAP are getting warnings in Google's Search Console under the newly added "Core Web Vitals" metrics.

 

The metrics like First Contentful Paint, Largest Contentful Paint, Cumulative Layout Shift are all easy to impact using GSAP.

 

Are there some general guidelines or rules-of-thumb that we should be following?

 

Currently I load a main application using a Jquery onReady to trigger the load of the application. Apparently that's no bueno.  But I'm not sure what the solution is because if I do it sooner, it's render-blocking javascript. If I do it later it's a slow LCP. 

 

Is there a best practice?  Google isn't using CWV as ranking factors yet, but they say they plan to (probably not this year, I would imagine -- as they've just introduced the new metrics). I'm hoping to get my ducks in a row before this impacts my SEO.

 

Thanks

 

 

Link to comment
Share on other sites

Hey MindGamer. I don't know how much we can add to the existing information out there. Consider inlining styles and such for content above the fold. Try to avoid requiring JS to have your layout finish. 

 

It's hard to give ambiguous aid :) 

Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

Try to avoid requiring JS to have your layout finish.

 

Ok.. thanks. Unfortunately I think this is going to be a problem with DOM animation of all kinds. It seems that an animated DOM element is an "unfinished layout" from Google's perspective.

 

Three things that I'm playing with that may help other users ... I think it remains to be seen what works... but these may be worth a try?

 

1) Largest Contentful Paint is literally the largest element on the page. A placeholder loading image in the largest element (rather than having the element hidden or empty while loading) may 'count' as being already painted.

 

2) Delaying animation for a full second or two after DOMContentLoaded might also serve to separate the animation from the initial content paint metric. (This seems a little hacky though)

 

3) Not a great solution but maybe necessary: Start all animations on a user interaction and not automatically.

 

Hopefully Google offers some better guidance on this, otherwise page animations onload might become a liability for SEO.

 

Edited by MindGamer
edited for clarity
Link to comment
Share on other sites

10 minutes ago, MindGamer said:

It seems that an animated DOM element is an "unfinished layout" from Google's perspective.

 

I don't see how animations would affect that unless you're animating properties that affect layout, like width, height, top, left, etc.

 

 

 

Link to comment
Share on other sites

1 minute ago, OSUblake said:

 

I don't see how animations would affect that unless you're animating properties that affect layout, like width, height, top, left, etc.

 

 

 

 

 

Yes, you're right, I should have been more clear. As you said, for Cumulative Layout Shift, only animations that affect height/width would make a difference.

 

The issue seems to be on the Paint side of things. (Which it remains to be seen if they actually penalize us for). 

 

The issue is more LCP. If a DOM element is (for example) rotating, it looks like Google treats it as "still painting" from what I can see. 

 

 

Link to comment
Share on other sites

  • 9 months later...

Hey Mindgamer! Came across this thread and interested to hear how you got on with reducing your LCP. We have an animation on our homepage that is impacting our LCP score. We've discussed the possibility of a placeholder loading image. Did you end up trying this? And if so, did it 'count' as being already painted?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×