What are Core Web Vitals

• LCP (Largest Contentful Paint): time to largest visible element. ≤ 2.5s = good
• INP (Interaction to Next Paint): long tail of click latency (replaced FID March 2024). ≤ 200ms
• CLS (Cumulative Layout Shift): total layout shift without user interaction. ≤ 0.1
• Measured via Chrome UX Report (CrUX) — real-user data over 28 days
• Pass threshold = 75th percentile across ≥ 28 days

LCP: 1.8s ✅  |  INP: 180ms ✅  |  CLS: 0.04 ✅

• TTL
• CWV in Runet 2026
• Cache-Control

The Largest Contentful Paint (LCP) metric measures the time it takes for the largest visible content element on a webpage to load and become visible to the user. This element could be an image, a video, or a block of text. Google considers LCP a crucial factor in assessing user experience because it directly impacts how quickly users perceive a page as loading.

To achieve a good LCP score, it’s essential to optimize your website’s loading performance. Here are some strategies:

• Optimize Images: Ensure that images are properly compressed and served in modern formats like WebP.
• Use a Content Delivery Network (CDN): CDNs can reduce latency by serving content closer to the user’s geographical location.
• Minimize Render-Blocking Resources: Defer loading JavaScript and CSS that block the rendering of the page.

Monitoring LCP can be done using tools like Google PageSpeed Insights or the Lighthouse audit in Chrome DevTools. Regular assessments ensure that your site meets the threshold of LCP ≤ 2.5 seconds.

Interaction to Next Paint (INP) is a metric introduced by Google to measure the responsiveness of a webpage to user interactions. It replaces First Input Delay (FID) and focuses on the latency of user actions, such as clicks or key presses, and how quickly the next frame updates following that interaction. A low INP score indicates that users can interact with the webpage without noticeable delays.

To enhance your INP score, consider implementing the following techniques:

• Reduce Main Thread Work: Minimize JavaScript execution time to free up the main thread for user interactions.
• Optimize Event Listeners: Use passive event listeners where appropriate to improve responsiveness.
• Prioritize Critical Tasks: Use requestIdleCallback or other methods to manage tasks efficiently without blocking user interactions.

To measure INP, utilize tools like WebPageTest or Chrome's Performance panel. Strive for an INP score of ≤ 200ms to ensure a smooth user experience.

Cumulative Layout Shift (CLS) quantifies the visual stability of a webpage by measuring how much the content shifts during the loading process. A high CLS score can lead to a frustrating user experience, as elements may unexpectedly move, causing accidental clicks or difficulty reading text.

To reduce CLS, implement the following practices:

• Specify Size for Images and Videos: Always define width and height attributes for images and video elements to reserve space in the layout.
• Use CSS for Fonts: Avoid using web fonts that can cause layout shifts by incorporating font-display: swap in your CSS.
• Avoid Inserting Content Above Existing Content: Always add new content below the fold or at the end of the page to prevent shifting previously loaded elements.

Tools like Google Lighthouse and the Web Vitals Chrome extension can help you monitor your CLS score. Aim for a CLS score of ≤ 0.1 to ensure a stable and pleasant browsing experience.