Take it easy with transitions
Transitions and animations can make for wonderful website experiences. Cassie Evans’s personal website is a playful, whimsy corner of the internet that is delightfully crafted. But as with a lot of things, transitions and animations can be overused on websites. And, at times, that can come detriment of web performance.
This post will look at how transitioning content above the fold can impact a page’s performance metrics.
Okay, so a quick admission. I’m not a huge fan of pages that fade in entire sections of content as you scroll. So, even though we’ll be concentrating on content ‘above the fold’, I’ve got some biases when it comes to what we’ll talk about for the rest of this article.
Full page fade
This is something I’ve seen on a few sites recently, and it’s a very, very easy way to absolute trash your site’s Core Web Vital scores.
I was recently looking at a site that was pulling in all their assets from multiple external domains. They were using jQuery UI as part of their theme to fade in the page once all the content had been loaded. Connections to the external origins was setting their page load back by about 500 milliseconds. Meanwhile waiting for jQuery and its dependencies to load (also from external origins) was tacking on another 1.5 seconds. The jQuery code was then waiting for the rest of the page’s content to download before revealing the page.
It’s little wonder that LCP timings on mobile were upwards of 5 seconds in this case.
This is another one that I see regularly. Rather than transitioning in the full page, effects are added to individual elements above the fold. While this is better than waiting for the entire page to load, poor implementation can still lead to LCP or CLS blowouts.
Minimise your reliance on JS
Know your LCP
It could be the case that the element you’re fading in is also the LCP candidate for the page. In this case, you’ll want to be sure to check how the transition effect impacts your LCP timings.
Watch out for layout shifts
Sprinkles are good
As with a lot of things, when used in moderation transitions can add a remarkable amount of character to a website. Being selective in how you apply transitions above the fold can go a long way to ensuring they’re not negatively impacting on your site’s performance too.