Recently our Angular web app went alive. A developer who is new to web development asked me a question: How can you quickly tell whether a page is lagging?
The answer is Core Web Vitals.
Core Web Vitals are a standardized set of metrics used to measure user experience. Deeply integrated into the Chrome Performance panel, they act like a “health checkup report” for browser performance.
At the top of the panel in the “Web Vitals” timeline, the three most critical metrics are directly highlighted:
LCP (Largest Contentful Paint)
INP / FID (Interaction to Next Paint / First Input Delay)
CLS (Cumulative Layout Shift)
To determine whether a page is lagging or slow, simply check the status and values of these three metrics.
Here is a fluent, clear, and elegantly structured translation into standard English:
1. LCP (Loading Smoothness): Check the Color and Timing
- Metric Meaning: LCP measures the time it takes for the largest visible content element (such as a hero image or main heading) to render after a user navigates to the page. It reflects how smooth or sluggish the initial loading phase feels.
- How to Evaluate: Find the vertical line labeled LCP on the top Web Vitals timeline.
- Check the Color: A green marker indicates fast loading, while yellow or red signifies slowness.
- Check the Timing: If the LCP marker takes too long to appear—or if the Main thread directly below it is filled with long yellow task blocks when it does—it means JavaScript execution is blocking rendering, leaving users staring at a blank screen or a frozen loader.
2. INP (Interaction Responsiveness): Look for Red Triangle Warnings and Delay Values
- Metric Meaning: INP (Interaction to Next Paint, which officially replaced FID in 2024) measures the delay between a user action (like clicking or typing) and the browser providing visual feedback. It directly reflects responsiveness during user interactions.
- How to Evaluate: INP is the single most critical metric for diagnosing sluggishness that builds up over time.
- Look for Red Triangles: If Chrome displays a red triangle warning icon above a task block labeled INP or Event: click/keydown, it indicates that the interaction triggered a long task and delayed the response.
- Check the Value: Look at the INP score at the top of the panel. If the value exceeds 200 ms (yellow warning) or 500 ms (red poor performance), users will noticeably feel a delay or an unresponsible UI. Tracing down to the Main thread beneath that event will reveal the exact long-running JavaScript callback responsible.
3. CLS (Visual Stability): Look for Blue Layout Shift Bars
- Metric Meaning: CLS measures the total score of all unexpected layout shifts (elements suddenly jumping around) that occur over the page’s lifecycle. It reflects the visual stability of the page.
- How to Evaluate: Blue bars marked with CLS or Layout Shift on the Web Vitals timeline indicate that a layout shift occurred.
- If these blue bars appear frequently or show large shift scores, users will experience the page “jumping around,” severely disrupting reading and interaction.
- This is typically caused by images or ads lacking fixed dimensions, causing the layout to reflow unexpectedly as they load.
Summary: A Quick 3-Step Troubleshooting Guide
- Open the Panel: Press F12 to open Developer Tools and switch to the Performance panel.
- Record the Interaction: Click the record button and interact with the page normally under typical network conditions (let it load, click buttons, scroll through lists).
- Scan the Top Metrics Bar:
- Is LCP Red? Slow Load. Check for huge JavaScript bundles blocking the render pipeline.
- Is there a Red Triangle on INP? Slow Interaction. Check if event handler callbacks are executing complex calculations.
- Are CLS bars frequent? Visual Instability. Ensure images have pre-reserved aspect ratios and dynamically injected elements do not disrupt the layout.
By following these metrics, you can quickly locate and quantify performance bottlenecks without having to dive deep into complex call stacks right away.