Google PageSpeed Insights - Animation Penalization

[Toobulo]

Hi there, 

I'm utilizing TweenMax animating CSS background-position: Although the animation is fairly short (2s) I've found that Google PageSpeed Insights harshly penalizes having this animation on the page by about 20 points putting our project into the Red due to the "Time to Interactive" metric. 

You can see the setup here: 

 

And here is an alternate, which has the same setup minus the Tween: 

See the Pen GRgRdmp by phore (@phore) on CodePen

Compare both of those CodePen examples here to see what I mean: https://developers.google.com/speed/pagespeed/insights/

It appears nothing that can be done about this other than toss the animation, since Google Lighthouse is literally waiting for the animation resolve (using a shorter TweenMax animation gives a higher score). 

Any insight would be great. 

Thanks!

-Joe

See the Pen bGNGMVe by phore (@phore) on CodePen

[ZachSaucier]

Hey Toobulo and welcome to the forums. Cool animation!

 

25 minutes ago, Toobulo said:

I've found that Google PageSpeed Insights harshly penalizes having this animation on the page by about 20 points putting our project into the Red due to the "Time to Interactive" metric.

I wonder why exactly that happens.

 

A very quick test let me improve the score from 26 on your first pen's debug link to 38 simply by setting the backgroundPosition initially (inside the ready function).

TweenMax.set(".home-hero-logo", {backgroundPosition: "0px 0px"});

Maybe that can help? The thought behind trying it is that perhaps Google does analysis on the page after the initial JavaScript is ran then compares the styles to ones after the animation. 

[Toobulo]

Hi Zach, 

 

Thanks for the warm welcome. Longtime fan of Greensock since the Adobe Flash days.

It appears that these Codepen tests within Google Pagespeed are not very consistent. At first I tried your suggestion and it seemed to help, but running the test again yielded completely different results and it seems to have really done nothing. I'd imagine some of this could be due to the fact that Codepen is loading the content within an iFrame, etc. 

 

Analyzing the results, the biggest problem is:  

 

"Minimize main-thread work - Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this."

It seems that Google is counting the animation length against me, assuming the page is not "interactive" until the animation completes. 

 

[OSUblake]

5 minutes ago, Toobulo said:

I'd imagine some of this could be due to the fact that Codepen is loading the content within an iFrame, etc. 

 

He said he was using the debug view, which doesn't use an iframe.

 

But why are you so concerned about your insights score? It's just insights, not law. You can still publish your site with a bad insight score. You're never going to get good a score loading that image.

 

 

[OSUblake]

And animating background position causes repaints, transforms don't. 

 

See the Pen MYdwRP by MAW (@MAW) on CodePen

 

 

Using a sprite sheet grid with transforms.

 

See the Pen LJjpoo by osublake (@osublake) on CodePen

 

 

[Toobulo]

33 minutes ago, OSUblake said:

 

He said he was using the debug view, which doesn't use an iframe.

 

But why are you so concerned about your insights score? It's just insights, not law. You can still publish your site with a bad insight score. You're never going to get good a score loading that image.

 

 

I'm aware that Insights score is not the law, and personally take issue with it - however it's becoming a growing headache time and time again. Clients are randomly deciding to test their score and when they see their project is in the red they freak out and is often difficult to convince them. Even if I know the truth, convincing clients that their site is still "ok" is another story. It's basically you against Google and these metrics are seemingly becoming a standard. In addition, PageSpeed is tied to SEO rankings so I don't think it's wise to completely ignore it. 

 

You mentioned that I will never get a good score loading that image - if true, wouldn't this be considered a growing concnern for the GreenSock community (or for any site who wishes to display an animation on page load?) Our answer to clients is: PageSpeed Score: Animations on Page Load = Bad? I find this troubling, especially when going to great lengths to optimize everything. 

 

[Toobulo]

24 minutes ago, OSUblake said:

And animating background position causes repaints, transforms don't. 

 

 

 

 

 

Using a sprite sheet grid with transforms.

 

 

 

 

 

Interesting. I'd be willing to try this method (sprite sheet grid with transforms) as you said it doesn't cause a repaint - however you mentioned previously that it's impossible to get a good score with my image. Would you say this would be a wasted effort to convert to sprite sheet grid w/ transforms? 

 

How did you generate that sprite with columns? 
 

Thanks!

-Joe

[ZachSaucier]

11 minutes ago, Toobulo said:

wouldn't this be considered a growing problem for any site who wishes to display an animation on page load?

Most likely they're penalizing how you're animating things on page load. Thus using the transform method may cut away a chunk of the poor rating. 

 

5 minutes ago, Toobulo said:

Would you say this would be a wasted effort to convert to sprite sheet grid w/ transforms?

Can't know that until you try  I think it has a good shot of helping.

[Toobulo]

1 minute ago, ZachSaucier said:

Most likely they're penalizing how you're animating things on page load. Thus using the transform method may cut away a chunk of the poor rating. 

 

Can't know that until you try  I think it has a good shot of helping.

 

Great, this is really what I was looking for. Thanks to you both and I'll report back any findings with the transform method. 

[OSUblake]

34 minutes ago, Toobulo said:

How did you generate that sprite with columns? 

 

I use TexturePacker, but there are free alternatives out there.

https://www.codeandweb.com/texturepacker

 

34 minutes ago, Toobulo said:

Interesting. I'd be willing to try this method (sprite sheet grid with transforms) as you said it doesn't cause a repaint - however you mentioned previously that it's impossible to get a good score with my image. Would you say this would be a wasted effort to convert to sprite sheet grid w/ transforms? 

 

It might help a little, but I think the main problem is that your image is just too big. It takes a lot of memory to move around image of that size. You're image is 798 x 48678 in size. Once that image is loaded and decoded into memory, it's going to be over 150MB in size! That can cause performance problems. I think video might be a better solution if you really need to get that score down.

 

41 minutes ago, Toobulo said:

You mentioned that I will never get a good score loading that image - if true, wouldn't this be considered a growing problem for any site who wishes to display an animation on page load?

 

No. You can display an animation on load and get a perfect score. It depends on what you're animating. 

 

 

[Toobulo]

2 minutes ago, OSUblake said:

I think a video might be a better solution.

I would have gone with video, however the background of the element needs to be transparent and from my knowledge currently there is no widely supported video format with alpha channel for the web. 

[OSUblake]

You can do transparency with webm. It has pretty good support.

https://caniuse.com/#search=webm

 

 

[Shrug ¯\_(ツ)_/¯]

18 hours ago, Toobulo said:

putting our project into the Red due to the "Time to Interactive" metric. 

58 minutes ago, Toobulo said:

troubling, especially when going to great lengths to optimize everything. 

1 hour ago, OSUblake said:

You're never going to get good a score loading that image.

 

I would agree with @OSUblake.

 

@Toobulo Why not break this down into a regular structural build ?

 

Because with your current sprite sheet approach you require loading an image (that from your example) is 2.8 mb with tons of wasted pixels. That is an issue for page load and time to execution based upon its size. Instead why not create the box and growth text via regular HTML & CSS. The leaves used on each side are all the same, so break those down into separate optimized images of each leaf. Or better yet since your just scaling them, make just the two groupings of leaves for each side as two optimized images. Then load and position them as needed into your stucture and animate everything with a Timeline via x,y, scale, rotation, morph, masks, etc., (not a sprite sequence), because that 2.8 mb image is not really an optimized approach. You could even utilize SVG if desired.

 

¯\_(ツ)_/¯ 

[Toobulo]

16 minutes ago, Shrug ¯\_(ツ)_/¯ said:

 

I would agree with @OSUblake.

 

@Toobulo Why not break this down into a regular structural build ?

 

Because with your current sprite sheet approach you require loading an image (that from your example) is 2.8 mb with tons of wasted pixels. That is an issue for page load and time to execution based upon its size. Instead why not create the box and growth text via regular HTML & CSS. The leaves used on each side are all the same, so break those down into separate optimized images of each leaf. Or better yet since your just scaling them, make just the two groupings of leaves for each side as two optimized images. Then load and position them as needed into your stucture and animate everything with a Timeline via x,y, scale, rotation, morph, masks, etc., (not a sprite sequence), because that 2.8 mb image is not really an optimized approach. You could even utilize SVG if desired.

 

¯\_(ツ)_/¯ 

 

You are right in that the animation could be broken down and restructured for this use-case - however we didn't want to do anything drastic just yet in the event that we had some tweaks to the animation itself and our main source of this animation is created in After Effects (as this will be exported to various other media outside of the web). In addition, I'd imagine it would take some time to replicate the kinetic typography reveal exactly the way it is as I believe some plugin was used for that. 

I'll certainly keep this in mind moving forward as this would certainly reduce much of the weight as you mention. 

 

 

[ZachSaucier]

44 minutes ago, Toobulo said:

this animation is created in After Effects

Lottie exports certain animations to SVG/Canvas (though I've had more trouble with Canvas exports) + JS code that you could try as well.