Vinicius Dallacqua WebCloud

Report: Most Common Causes of Poor Interaction to Next Paint (INP) Scores

This report outlines the most common causes of poor Interaction to Next Paint (INP) scores, drawing from recent research and analysis. INP is a crucial Core Web Vital that measures a website's responsiveness to user interactions, such as clicks and key presses. Understanding and addressing the causes of poor INP is essential for improving user experience and search engine rankings.

1. Executive Summary

Poor INP scores are primarily caused by excessive CPU processing, long tasks, and rendering delays. Optimizing JavaScript execution, minimizing main thread work, and efficiently handling third-party scripts are key strategies for improving INP. INP measures the time between user input and UI updates, so reducing any delays in this process is crucial. A good INP is less than 200ms, while over 500ms is considered poor [debugbear.com/docs/metrics/interaction-to-next-paint].

2. Understanding Interaction to Next Paint (INP)

Interaction to Next Paint (INP) Optimization Report

This report summarizes the common causes of poor Interaction to Next Paint (INP) scores and provides actionable insights for optimization. INP measures the time between a user interaction and the next visual update on the page, reflecting a website's responsiveness. As of March 2024, INP is a Core Web Vital, directly impacting search performance. A good INP score is less than 200 milliseconds; scores over 500 milliseconds are considered poor and can negatively affect search rankings Measure And Optimize Interaction to Next Paint (INP).

Summary of Findings

The primary causes of poor INP scores are related to excessive CPU processing, long tasks, rendering delays, and unoptimized JavaScript execution. Optimizing website code, minimizing long tasks, and employing asynchronous techniques are crucial for improving INP and ensuring a responsive user experience.

Analysis of Search Resul

Common Causes and Optimization Strategies for Poor Interaction to Next Paint (INP)

Interaction to Next Paint (INP) is a Core Web Vital metric that assesses a page's overall responsiveness to user interactions. It measures the time between a user interaction (like a click or key press) and the next visual update on the page. A poor INP score indicates that the page is slow to respond to user input, leading to a frustrating user experience. To provide a good experience, pages should strive for an INP of ≤ 200 ms (Long Animation Frames API | Web Platform | Chrome for Developers). This report summarizes the most common causes of poor INP scores and outlines strategies for optimization.

Summary of Findings

The primary causes of poor INP scores are related to JavaScript execution, rendering bottlenecks (Long Animation Frames), and the impact of third-par

Trace events analysis

{
"width": 600,
"height": 400,
"timeline": {
	"min": 3375003509,
	"max": 3375288.8310000002,
	"range": 3375288.8310000002
},

Trace events analysis

{
\"width\": 600,
\"height\": 400,
\"timeline\": {
\t\"min\": 3375003509,
\t\"max\": 3375288.8310000002,
\t\"range\": 3375288.8310000002
},

LCP Performance Analysis Report

Trace URL: https://www.volvocars.com/se/build/xc90-hybrid LCP Candidate Timing: 5619.998ms (5.6 seconds) LCP Candidate Type: image

Summary: The Largest Contentful Paint (LCP) for this page occurs at approximately 5.6 seconds, which is significantly outside the recommended threshold of 2.5 seconds. The primary bottleneck identified in the LCP phase timings is the Load Delay phase, accounting for over 5.5 seconds of the total LCP time. This indicates that the browser knew what the LCP image was relatively early (low TTFB), but was heavily delayed in starting to fetch it.

LCP Candidate Phase Timings Breakdown:

LCP report based on trace analysis

Your LCP value is 5619.998 and your score is bad

Your Largest Contentful Paint (LCP) is a critical user-centric metric that measures the loading performance of your page by marking the render time of the largest image or text block visible within the viewport. A poor LCP score, like the one observed, indicates that users are waiting a significant amount of time to see the main content of your page, which can negatively impact user experience and engagement.

Analyzing the breakdown of your LCP time reveals that the primary bottleneck is the "Load Delay" of the LCP candidate, which is an image. This suggests that while the image itself loads quickly once discovered, its discovery or loading was significantly delayed. Optimizing the critical rendering path and ensuring the LCP image is discovered and loaded early are key areas for improvement.

Actionable Optimizations

The main contributor to your poor LCP is the substantial load delay of the largest contentful ima

LCP report based on trace analysis

Your LCP value is 5619.998 and your score is bad

Your Largest Contentful Paint (LCP) is a Core Web Vital that measures the loading performance of your page's main content. A score of 5619.998 ms is considered "bad", indicating that users are waiting too long to see the primary content on your page. The goal is to achieve an LCP of 2.5 seconds or less for a good user experience.

Analyzing the trace data helps pinpoint the specific reasons behind this slow LCP. The breakdown of the LCP time reveals that the delay is primarily caused by the time it takes for the browser to start loading the LCP image, rather than the server response or the image download itself.

Actionable Optimizations

The primary bottleneck identified in the trace data is the significant delay before the Largest Contentful Paint image begins loading. To improve your LCP score, focus on ensuring the LCP image is discovered and prioritized for loading as early as possible during the page load proc

LCP report based on trace analysis

Your LCP value is 5619.998 and your score is bad

Your Largest Contentful Paint (LCP) is a Core Web Vital that measures the loading performance of your page's main content. A score of 5619.998 ms is considered "bad", indicating that users are waiting too long to see the primary content on your page. The goal is to achieve an LCP of 2.5 seconds or less for a good user experience.

Analyzing the trace data helps pinpoint the specific reasons behind this slow LCP. The breakdown of the LCP time reveals that the delay is primarily caused by the time it takes for the browser to start loading the LCP image, rather than the server response or the image download itself.

Actionable Optimizations

The primary bottleneck identified in the trace data is the significant delay before the Largest Contentful Paint image begins loading. To improve your LCP score, focus on ensuring the LCP image is discovered and prioritized for loading as early as possible during the page load proc

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html dir="ltr" lang="en">

	<head>
	<link rel="preload" as="image" href="https://yn20j37lsyu3f9lc.public.blob.vercel-storage.com/newsletter/hero_images/hero10-taJvUCnqp9iW0762iFFqNBlmDijgOp.jpg" />
	<link rel="preload" as="image" href="https://yn20j37lsyu3f9lc.public.blob.vercel-storage.com/newsletter/hero_images/hero7-xpRpL1p7QKoUqUFdhiCTJwNLV13A0c.jpg" />
	<link rel="preload" as="image" href="https://yn20j37lsyu3f9lc.public.blob.vercel-storage.com/newsletter/hero_images/hero6-UQ8uRXzcUGxGO1cGFqaStqtCC2ZdrO.jpg" />
	<link rel="preload" as="image" href="https://yn20j37lsyu3f9lc.public.blob.vercel-storage.com/newsletter/hero_images/hero1-8w9G16t8DdxYMLvy9jwuWszxWjS310.jpg" />
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
	<meta name="x-apple-disable-message-reformatting" />