Jump to content
Search Community

GSAP and Google Core Web Vitals

MindGamer test
Moderator Tag

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

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
  • Like 1
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

  • 2 years later...

Our animation uses pinning to pin the sections to the page until some information fades into the view, then pinning stops. 

When pinning begins our CLS scores tank. 

 

We are basically doing patagonia.com's growing picture frame section animation. But it doesn't look like they're using Greensock.

I doubt many look at CLS as pinning happens, but any thoughts on this would be appreciated.

Link to comment
Share on other sites

Hi @Zach-Attack

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Assuming your question is GSAP-related, would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

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.
×
×
  • Create New...