Long Frames and INP – Understanding the Post Load Performance

Vinicius is a tech lead for Gillian and has worked for companies like Volvo, Spotify, and Kleiner. He has six years of experience in performance optimization.

Long frames and INP are metrics that help assess the post-load performance of web applications, focusing on user interactions and responsiveness beyond the initial load time.

Introduced in 2015, the RAIL model stands for Response, Animation, Idle, and Load. It provides a framework for understanding user interactions and improving responsiveness.

INP assesses overall page responsiveness by focusing on the longest interaction observed, replacing the first input delay as a core metric to consider post-load performance.

The Long Animation Frame API helps identify performance issues by providing detailed data on the execution time and delays in animation frames, improving attribution models for performance issues.

Developers traditionally focus on load time because slow loading can lead to high bounce rates and user frustration, often sidelining ongoing interaction performance.

It provides a more comprehensive breakdown of work done during animation frames, offering better insights into delays caused by various tasks, including styling and layout.

The Long Task API lacks detailed attribution, failing to identify specific scripts or functions causing performance issues, and does not account for styling and layout tasks.

Post-load performance is crucial because users spend most of their time interacting with the application after it loads. Improving this can enhance user experience and reduce frustration.