If your website feels slow or unresponsive during animations, you’re probably encountering Long Animation Frames (LoAFs). These occur when rendering a single frame takes more than 50 milliseconds, resulting in choppy visuals, lag, or what developers often refer to as “jank.”
By default, LoAFs don’t stand out in Chrome DevTools. But you can detect and analyze them in real time using the PerformanceObserver API, which helps you pinpoint what’s dragging down your animation performance.
One of the most frequent causes of LoAFs is intensive JavaScript execution. When scripts run too long, they block the main thread, preventing smooth frame rendering. To fix this, break up long-running code into smaller pieces. You can spread execution across multiple frames using setTimeout or similar methods to allow the browser breathing room for animations.
Another issue is forced synchronous layouts. These occur when you change the DOM and then immediately access layout properties like offsetWidth or scrollHeight. This forces the browser to recalculate layouts right away, which can be costly. To avoid this, group your DOM reads and writes separately, and prefer transform properties for animations to prevent expensive layout recalculations.
In modern web apps like Single Page Applications (SPAs), optimizing how components re-render and deferring non-critical JavaScript with code-splitting are also effective ways to reduce LoAFs and deliver a smoother user experience.
My sample products made at Modhello.io website
Top comments (0)