Toobulo

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.

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.

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

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

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.

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.

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: https://codepen.io/phore/pen/bGNGMVe And here is an alternate, which has the same setup minus the Tween: https://codepen.io/phore/pen/GRgRdmp 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