What are Core Web Vitals?

How to measure them?

How to improve them?

Resources to learn more...

2

3

4

5

Why do we need them?

1

What are Core Web Vitals?

25%

What are Core Web Vitals?

1

Web Vital

Lab

Field

Loading

LCP

Largest Contentful Paint 

What are Core Web Vitals?

1

25%

What are Core Web Vitals?

1

Web Vital

Visual Stability

CLS

Cumulative Layout Shift

What are Core Web Vitals?

1

Lab

Field

Visual Stability

CLS

Cumulative Layout Shift

What are Core Web Vitals?

1

Lab

Field

What are Core Web Vitals?

1

Web Vital

Field

Interactivity

FID

First Input Delay

What are Core Web Vitals?

1

What are Core Web Vitals?

1

Web Vital

Interactivity

INP

Interaction to Next Paint

What are Core Web Vitals?

1

Lab

Field

Interactivity

INP

Interaction to Next Paint

What are Core Web Vitals?

1

Lab

Field

 Lighthouse Scoring Calculator

What are Core Web Vitals?

1

Why do we need them?

How to measure them?

3

WEBSITES 8.36M

DATA 43.88 TB

How to measure them?

How to measure them?

3

Web Vital

Google Search Console

How to measure them?

3

Google Search Console

How to measure them?

3

Google Search Console

How to measure them?

3

How to measure them?

3

How to measure them?

3

How to measure them?

3

How to measure them?

3

How to measure them?

3

How to measure them?

3

How to measure them?

3

How to measure them?

3

How to measure them?

3

How to measure them?

3

How to measure them?

3

How to measure them?

3

How to measure them?

3

How to measure them?

3

How to measure them?

3

import WebVitalsReporter from '@s-ui/react-web-vitals'

export default function App() {
  const handleReport = metric => {
    console.log(metric) // do something
  }

  return (
    <WebVitalsReporter onReport={handleReport}>
      <main />
    </WebVitalsReporter>
  )
}

How to measure them?

3

<script>
  (function () {
    var script = document.createElement('script');
    script.src = 'https://unpkg.com/web-vitals@3/dist/web-vitals.iife.js';
    script.onload = function () {
      // When loading `web-vitals` using a classic script, all the public
      // methods can be found on the `webVitals` global namespace.
      webVitals.onCLS(console.log);
      webVitals.onFID(console.log);
      webVitals.onLCP(console.log);
    };
    document.head.appendChild(script);
  })();
</script>

How to measure them?

3

  • onCLS(): Chromium
  • onFCP(): Chromium, Firefox, Safari 14.1+
  • onFID(): Chromium, Firefox (with polyfill: Safari, Internet Explorer)
  • onINP(): Chromium
  • onLCP(): Chromium
  • onTTFB(): Chromium, Firefox, Safari 15+ (with polyfill: Safari 8+, Internet Explorer)

Browser Support

How to improve them?

How to improve them?

4

LCP

Largest Contentful Paint 

Ensure the LCP resource is discoverable from the HTML source

Ensure the LCP resource is prioritized

Use a CDN to optimize document and resource TTFB

If the LCP is an image, ensure to use next-gen image formats

How to improve them?

4

CLS

Cumulative Layout Shift

Set explicit sizes on any content loaded from the page

Ensure pages are eligible for bfcache

Avoid animations/transitions that use layout-inducing CSS properties

Ensure a good web fonts loading strategy

How to improve them?

4

FID

First Input Delay

Avoid or break up long tasks

Avoid unnecessary JavaScript

Avoid large rendering updates

INP

Interaction to Next Paint

&

Resources to learn more...

Resources to learn more...

5

Web Almanac 2022 |

Performance

Resources to learn more...

5

Resources to learn more...

5

Web Performance Tips

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

Web Performance Tips

6

How to measure CWVs on SPAs

import {
  onFCP,
  onLCP,
  onCLS
} from 'web-vitals'

onFCP(({value}) => console.log('FCP: ', value), {reportSoftNavs: true});
onLCP(({value}) => console.log('LCP: ', value), {reportSoftNavs: true});
onCLS(({value}) => console.log('CLS: ', value), {reportSoftNavs: true});
Estela Franco

Web Performance Tips

6

GDPR Consent and Core Web Vitals

LCP

Largest Contentful Paint 

Web Performance Tips

6

¿?

Core Web Vitals

By Joan León

Core Web Vitals

Discover how to improve user experience and search engine ranking by understanding Core Web Vitals. Learn how to measure and improve them, as well as other important metrics. Presented by @nucliweb.

  • 1,066