Knowledge Academy

Core Web Vitals are key metrics for evaluating web page performance and user experience, which have an important impact on SEO. By optimizing LCP, INP, and CLS, you can improve the user experience of web pages, thereby improving search engine rankings. Regularly monitoring and optimizing these metrics is an important strategy for maintaining and improving SEO effectiveness.

Largest Contentful Paint (LCP) - Largest Contentful Paint

Definition: Measures the time from when the user starts loading the page to when the main content of the page is rendered. Ideally, this time should be within 2.5 seconds.

Importance: LCP reflects the loading speed of the page, directly affecting the user's first impression and satisfaction.

Interaction to Next Paint (INP) - Interaction to Next Paint

Definition: Measures the time it takes for the page to respond and perform the next paint after the user interacts with the page (such as clicking a button, entering text). Ideally, INP should be within 200 milliseconds.

Importance: INP reflects the interactive response speed of the page, affecting the user's experience and interaction with the website.

Cumulative Layout Shift (CLS) - Cumulative Layout Shift

Definition: Measures the visual stability of page content, especially unexpected movements of elements during page loading. Ideally, the CLS score should be less than 0.1.

Importance: CLS reflects the visual stability of the page, avoiding confusion and misoperations caused by sudden content movements for users.

How to Optimize Core Web Vitals

1. Optimize LCP

Optimize server response time: Use fast and reliable hosting, optimize database queries.

Use CDN: Distribute content to servers closer to users.

Image optimization: Compress and lazy-load images.

Preload critical resources: Preload fonts, stylesheets, and scripts for main content.

2. Optimize INP

Reduce JavaScript execution time: Optimize and reduce JavaScript code, use code splitting and lazy loading.

Optimize main thread work: Minimize long tasks, optimize animations and event handling.

3. Optimize CLS

Set dimensions for all elements: Especially images and videos, ensure space is reserved before loading.

Avoid dynamically inserting content: Avoid inserting new content after page load, or use transition animations.

Use tools to monitor Core Web Vitals

Google Search Console: Provides detailed reports on Core Web Vitals to help identify pages that need optimization.

PageSpeed Insights: Provides specific scores and improvement suggestions for LCP, INP, and CLS.

Lighthouse: Available in Chrome browser's developer tools, generates detailed reports about page performance.

Web Vitals extension: Chrome browser extension that can monitor and report core metrics of web pages in real-time.

Detailed Specifications:

1. Types of web page loading speed metrics include: CLS, INP, LCP;

2. Common states of web page loading speed include: Poor, Needs Improvement, Good. Need to diagnose and analyze based on the status of the three different metrics, and improve the performance of each metric;

3. Web page loading speed testing tool: https://developers.google.com/speed/pagespeed/insights/

Example:

Official Google Explanation:

1. Core Web Vitals
       Core Web Vitals are a subset of web metrics that apply to all web pages, should be measured by all website owners, and will be displayed in all Google tools. Each Core Web Vital represents a different aspect of user experience, is measurable in practice, and reflects real-world experiences that correspond to user-centered key results.

       The metrics that constitute Core Web Vitals will evolve over time. The current 2020 targets focus on three aspects of user experience (loading, interactivity, and visual stability), specifically including the following metrics (and their respective thresholds):

2. Other Web Metrics
       While Core Web Vitals are key metrics for understanding and delivering excellent user experiences, there are other supporting metrics.

       These other metrics can serve as alternatives or complementary metrics to the three Core Web Vitals, helping to capture a wider range of experiences or diagnose specific issues.

       For example, Time to First Byte (TTFB) and First Contentful Paint (FCP) metrics are both important aspects of loading experience and help diagnose LCP issues (excessively long server response times or resources blocking rendering).

       Similarly, metrics such as Total Blocking Time (TBT) are lab metrics that are critical for discovering and diagnosing potential interactive issues that may affect INP. However, they are not within the scope of Core Web Vitals because they cannot be measured in the field and do not reflect user-centered results.