Core Web Vitals

What are Core Web Vitals?

Core Web Vitals are a set of 3 key performance metrics that measure:
- loading speed,
- interactivity, and
- visual stability

of a web page.

They basically tell you the performance of your frontend

3 key performance metrics or Web Vitals are:

1. Largest Contentful Paint (LCP): Measures how quickly the main content of a page loads.
2. First Input Delay (FID): Measures how quickly the page responds to user interactions.
3. Cumulative Layout Shift (CLS): Measures the visual stability of the page by tracking unexpected layout shifts.

Why Core Web Vitals matter?

Core Web Vitals matter for businesses because they directly impact user satisfaction, engagement, and ultimately, business success:

1. Improved User Experience: Fast and stable web pages keep users happy, reducing bounce rates and increasing time spent on the site.
2. Higher Conversion Rates: A smooth and responsive website encourages users to complete desired actions, such as making purchases or filling out forms.
3. Better Search Rankings: Google uses Core Web Vitals as a ranking factor, so better scores can lead to higher visibility in search results, driving more organic traffic.
4. Competitive Advantage: Providing a superior user experience can differentiate a business from its competitors, attracting and retaining more customers.

Viewing Core Web Vitals

You can easily view the core web vitals of any web app. There are 3 simple ways to see them:

1. Using Chrome DevTools
2. Using Lighthouse in Chrome DevTools

3. Using Google PageSpeed Insights

Viewing Core Web Vitals

Using Lighthouse in Chrome DevTools

1. Open Chrome DevTools:

• Press F12 or Ctrl+Shift+I (Windows/Linux) or Cmd+Opt+I (Mac) to open DevTools.

2. Navigate to the Lighthouse Tab:

• Click on the "Lighthouse" tab.

3. Configure Lighthouse Settings:

• Choose the type of report (e.g., Desktop or Mobile).
• Ensure that "Performance" is checked.

4. Run the Lighthouse Audit:

• Click the "Generate report" button.
• Wait for Lighthouse to analyze the page and generate a report.

5. View Core Web Vitals:

• In the report, check the "Performance" section.
• Look for metrics such as LCP, FID, and CLS.
• Each metric will have a score and suggestions for improvement.

Viewing Core Web Vitals

Using Chrome DevTools:

1 - Open Chrome DevTools:

• Press F12 or Ctrl+Shift+I (Windows/Linux) or Cmd+Opt+I (Mac) to open DevTools.
• Navigate to the Performance Tab:
• Click on the "Performance" tab.

2 - Start Recording:

• Click the "Record" button (circle icon) to start recording performance data.
• Alternatively, press Ctrl+E (Windows/Linux) or Cmd+E (Mac).

3 - Interact with the Page:

• Perform typical user interactions on the page (e.g., scrolling, clicking buttons).

4 - Stop Recording:

• Click the "Stop" button (square icon) to stop recording and generate a performance trace.

5 - View Core Web Vitals:

• Look for the "Web Vitals" section in the Performance tab. It highlights LCP, FID, and CLS.
• Hover over the metrics to see detailed information and the events affecting them.

Viewing Core Web Vitals

https://vimeo.com/950986630/8d6700c5f9?share=copy

Viewing Core Web Vitals

Using Google PageSpeed Insights

1. Open Google PageSpeed Insights:

• Go to PageSpeed Insights.

2. Enter URL:

• Enter the URL of the web app you want to analyze.

3. Run Analysis:

• Click the "Analyze" button.

4. View Core Web Vitals:

• The report will display Core Web Vitals metrics prominently at the top.
• LCP, FID, and CLS will be shown with specific values and performance grades (Good, Needs Improvement, Poor).

5. Check Recommendations:

• Scroll down to see detailed recommendations for improving each metric.

Understanding Core Web Vitals

1. FCP:
   First Contentful Paint
   - measures the time until the first piece of content is rendered.
    
2. LCP:
   Largest Contentful Paint
   - focuses on loading performance,
   - indicating how quickly the main content is visible.
    
3. CLS:
   Cumulative Layout Shift
   - ensures visual stability by minimising unexpected layout shifts.
    
4. TTFB:
   Time to First Byte
   - assesses server response efficiency.

1. FID:
   First Input Delay
   - captures the delay before the browser can respond to user interactions like click, scroll etc.
    
2. TBT:
   Total Blocking Time
   - quantifies the total time the main thread is blocked, affecting user interactivity like click, scroll etc.
    
3. INP:
   Interaction to Next Paint
   - measures the responsiveness and latency of interactions.