December 24, 2024
The Long Animation Frames API helps developers identify frames exceeding their ideal rendering duration. These long frames can cause dropped animations, janky interactions, and degraded Interaction to Next Paint (INP) scores. This API provides detailed insights into problematic frames, enabling precise optimizations.
Here’s how to measure and analyze long animation frames programmatically:
if ('LongAnimationFrameTimeline' in window) {
const timeline = new LongAnimationFrameTimeline();
timeline.onlonganimationframe = (entry) => {
console.group('Long Animation Frame Detected');
console.log(`Frame Duration: ${entry.duration}ms`);
console.log(`Start Time: ${entry.startTime}`);
console.log(`End Time: ${entry.startTime + entry.duration}`);
console.groupEnd();
};
timeline.observe({ type: 'longanimationframe', buffered: true });
} else {
console.warn('Long Animation Frames API is not supported in this browser.');
}
What It Does:
To visualize and analyze long animation frames in the browser:
How to Fix:
You can enable buffered observation to track historical long frames:
const timeline = new LongAnimationFrameTimeline();
timeline.observe({ type: 'longanimationframe', buffered: true });
setTimeout(() => {
const entries = timeline.takeRecords();
entries.forEach(entry => {
console.log(`Buffered Frame: ${entry.duration}ms at ${entry.startTime}`);
});
}, 5000); // Check after 5 seconds
Why It’s Useful:
Buffered observations allow developers to analyze frames after they occur, which is helpful during heavy interaction testing.
Download our service guide to understand how we can help you optimise your site speed
Interaction to Next Paint (INP) measures how quickly a webpage responds visually after user interaction. Long animation frames inflate INP, negatively impacting:
Avoid performing heavy computations in animation loops. Use Web Workers to offload intensive tasks.
// Example: Offloading computations to a Web Worker
const worker = new Worker('worker.js');
worker.postMessage('heavyTask');
worker.onmessage = (e) => {
console.log('Worker Result:', e.data);
};
Reduce layout recalculations by batching style updates. Avoid toggling multiple DOM styles during animations.
// Poor: Causes multiple reflows
element.style.width = '100px';
element.style.height = '50px';
// Better: Batch changes
element.style.cssText = 'width: 100px; height: 50px;';
Use GPU-accelerated properties like transform and opacityfor smoother animations.
/* Optimized animation using GPU */
.animated-element {
transform: translate3d(0, 0, 0); /* Enable GPU acceleration */
will-change: transform, opacity;
}
Break large tasks into smaller chunks to prevent blocking the main thread. Use requestIdleCallbackfor low-priority tasks.
requestIdleCallback(() => {
// Defer non-critical work
performHeavyComputation();
});
Leverage Chrome DevTools and the Long Animation Frames API together for precise profiling and frame-by-frame debugging.
Steps to Profile Key Frames:
The Long Animation Frames API is a game-changer for improving animation performance. By analyzing long-running frames and adopting optimization strategies, developers can significantly enhance INP scores, deliver seamless animations, and create exceptional user experiences.
This new tool, combined with established best practices, empowers teams to build faster, smoother, and more responsive applications. Start exploring and optimizing today!
Catch Metrics is the leading solution to help solve ad stack performance problems.Get in touchto learn more from our experts
Download our service guide to understand how
we can help you optimise your site speed