toddhgardner

If your website feels sluggish, especially when interacting with buttons or animations, you might be dealing with Long Animation Frames (LoAFs). LoAFs occur when the browser takes longer than 50 milliseconds to render a single animation frame, causing your site to feel unresponsive or “janky” to users.

The LoAF API, introduced in Chrome 123, tracks these long animation frames, offering insights into why your website’s animations might be running slowly. Unlike the Long Tasks API, which measures long-running tasks on the main thread, LoAF focuses on the time taken to render animations, making it more useful for diagnosing performance issues related to user interactions.

One of the key contributors to LoAFs is heavy JavaScript execution. When event handlers or scripts do too much work within a single frame, the browser can’t keep up, leading to sluggish performance. Breaking up large JavaScript tasks and deferring non-urgent work can significantly reduce LoAFs.

Another major cause is forced synchronous layouts, which occur when you modify the DOM and immediately query layout properties, forcing the browser to recalculate the layout on the spot. This can be avoided by batching DOM updates or using CSS transform for animations.

Tools like PerformanceObserver can help you monitor LoAFs in real time, or you can capture them with Real User Monitoring (RUM) tools like Request Metrics to see how they affect real users.

By fixing LoAFs, you’ll make your site smoother, more responsive, and provide a better user experience overall. Learn more about tracking, analyzing, and fixing LoAFs.