If your website has been feeling sluggish or unresponsive, there's a good chance it's suffering from Long Animation Frames (LoAFs). LoAFs happen when the browser takes too long to process an animation frame, leading to visual stuttering, delayed interactions, or a general feeling of “jankiness.” In my latest posts, I dive into the details of what are Long Animation Frames, why they matter, and very importantly, how to fix LoAFs.
What are Long Animation Frames (LoAFs)?**
When your site processes user interactions, it draws each visual change in what’s called a frame. A smooth experience usually means rendering around 20 frames per second. To achieve this, the browser has about 50 milliseconds to handle everything—JavaScript execution, DOM updates, layout recalculations, and more. When these tasks take longer than 50ms, the browser considers it a Long Animation Frame.
The result? Your site feels sluggish and unresponsive to users. Every time the browser struggles to render a frame, animations stutter and the site feels “frozen.” LoAFs are particularly bad for mobile users, where less powerful hardware struggles even more with rendering.
Why Do LoAFs Matter for Your Site?
The real problem with LoAFs is how they affect user experience, accessibility, and even your search engine rankings. LoAFs contribute directly to poor Interaction to Next Paint (INP) scores, one of the critical metrics in Google’s Core Web Vitals. INP measures how long it takes for your site to respond to user inputs like clicking or typing. If your INP score is bad, it indicates long delays in interactions—which LoAFs are a direct contributor to.
Since Core Web Vitals play a role in your site’s SEO ranking, fixing LoAFs not only improves performance but also gives your site a better shot at ranking higher on Google.
How to Track and Fix LoAFs
In my post, I break down how to track and fix LoAFs, starting with some of the key tools available. Tools like Request Metrics, Chrome DevTools, and Google’s web-vitals.js library can all be used to track LoAFs in both lab environments and real user monitoring (RUM) scenarios.
One of the most effective ways to fix LoAFs is by focusing on JavaScript execution. Long-running JavaScript tasks block the browser’s main thread and cause delays in rendering frames. To fix this, you can break up long tasks into smaller chunks using techniques like setTimeout to distribute work across multiple frames.
Another major cause of LoAFs is forced synchronous layouts, where a script forces the browser to recalculate the layout after every DOM change. This creates additional work that slows down rendering. Fixing this involves batching DOM reads and writes together to avoid recalculating the layout multiple times in a single frame.
Lastly, for sites built using Single Page Applications (SPAs) like React or Vue, LoAFs can be particularly challenging. SPAs tend to rely heavily on JavaScript for UI updates and transitions, which can easily trigger long frames if not optimized properly.
Ready to Toast Your LoAFs?
If you want to dive deeper into the technical details and practical strategies for reducing LoAFs on your site, check out the full post:
How to Fix Long Animation Frames and Improve Your Website
You’ll learn all about the tools, tactics, and best practices for keeping your site running buttery smooth, with fewer LoAFs and faster interactions!
Top comments (0)