Take it easy with transitions
I’ve been doing a few audits of late, and one thing that keeps coming up is the use of transition effects on page load (or above the fold content). This week we’ll look at some of the performance pitfalls that can arise from this practice, as well as what you should keep in mind.
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 at the detriment of web performance.
This post will look at how transitioning content above the fold can impact a page’s performance metrics, especially Largest Contentful Paint (LCP).
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. 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. Connecting 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.
Linda Liukas - Programming Playgrounds
I loved this talk by Linda Liukas about teaching kids about technology by going beyond the logic, and exploring the world of tech through curiosity, joy and wonder.
The next issue of Optimised will be in your inbox on May 27th. The website has an archive of all previous emails. It's a good place to recap on anything we've covered, and also handy to share with friends or colleagues.
Keep well, stay safe.