joanleon.dev

youtube.com/c/JoanLeon

twitch.com/nucliweb

nucliresources

@nucliweb

What are Core Web Vitals?

How to measure them?

How to improve them?

Resources to learn more...

2

3

4

5

@nucliweb

Why do we need them?

1 What are Core Web Vitals?

@nucliweb

25%

What are Core Web Vitals?

1

@nucliweb

web.dev/lcp/

Web Vital

Lab

web.dev/lcp/

Field

LCP

Largest Contentful Paint

What are Core Web Vitals?

1

@nucliweb

25%

What are Core Web Vitals?

1

@nucliweb

web.dev/cls/

Web Vital

web.dev/cls/

Visual Stability

CLS

Cumulative Layout Shift

What are Core Web Vitals?

1

@nucliweb

Lab

Field

web.dev/cls/

Visual Stability

CLS

Cumulative Layout Shift

What are Core Web Vitals?

1

@nucliweb

Lab

Field

web.dev/cls/

What are Core Web Vitals?

1

@nucliweb

Web Vital

web.dev/fid/

Field

Interactivity

FID

First Input Delay

What are Core Web Vitals?

1

@nucliweb

What are Core Web Vitals?

1

web.dev/inp/

Web Vital

web.dev/inp/

Interactivity

INP

Interaction to Next Paint

What are Core Web Vitals?

1

@nucliweb

Lab

Field

web.dev/inp/

Interactivity

INP

Interaction to Next Paint

What are Core Web Vitals?

1

@nucliweb

Lab

Field

Lighthouse Scoring Calculator

@nucliweb

What are Core Web Vitals?

1

hlighthouse/scorecalc

Why do we need them?

@nucliweb

How to measure them?

3

Good Core Web Vitals

WEBSITES 8.36M

DATA 43.88 TB

How to measure them?

@nucliweb

@nucliweb

How to measure them?

3

Web Vital

Tools to measure Core Web Vitals

Google Search Console

@nucliweb

How to measure them?

3 Google Search Console

@nucliweb

How to measure them?

3 Google Search Console

@nucliweb

How to measure them?

3

@nucliweb

How to measure them?

3

@nucliweb

pagespeed.web.dev

How to measure them?

3

@nucliweb

How to measure them?

3

pagespeed.web.dev

@nucliweb

How to measure them?

3

pagespeed.web.dev

@nucliweb

How to measure them?

3

CrUX Dashboard

@nucliweb

How to measure them?

3

CrUX Dashboard

@nucliweb

How to measure them?

3

CrUX Dashboard

@nucliweb

How to measure them?

3

Chrome DevTools

@nucliweb

How to measure them?

3

@nucliweb

How to measure them?

3

treo.sh/sitespeed

@nucliweb

How to measure them?

3

debugbear.com

@nucliweb

How to measure them?

3

speedcurve.com

@nucliweb

How to measure them?

3

@nucliweb

How to measure them?

3

@nucliweb

How to measure them?

3

@s-ui/react-web-vitals

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>
  )
}

@nucliweb

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>

web-vitals

@nucliweb

How to measure them?

3

web-vitals#browser-support

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?

@nucliweb

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

@nucliweb

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

@nucliweb

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...

@nucliweb

Resources to learn more...

5

Web Almanac 2022 |

Performance

@nucliweb

Resources to learn more...

5 Web Vitals patterns

Tools to measure Core Web Vitals

Using the Web Vitals extension to debug Core Web Vitals issues

Core Web Vitals

CSS for Web Vitals

Core Web Vitals Tools To Boost Your Web Performance Scores

The Humble <img> Element And Core Web Vitals

How We Improved Our Core Web Vitals (Case Study)

How To Fix Cumulative Layout Shift (CLS) Issues

Performance Game Changer: Browser Back/Forward Cache

Understanding Core Web Vitals and Google search results

How to Optimize Interaction to Next Paint (INP)

Improved font fallbacks

@nucliweb

Resources to learn more...

5

🖥️ Slides

📺 Video

Web Performance Tips

@nucliweb

Web Performance Tips

6

2020 Chrome Extension Performance Report

@nucliweb

Web Performance Tips

6

@nucliweb

Web Performance Tips

6

@nucliweb

Web Performance Tips

6

webperf-snippets

@nucliweb

Web Performance Tips

6

webperf-snippets

@nucliweb

Web Performance Tips

6

webperf-snippets

@nucliweb

Web Performance Tips

6

webperf-snippets

@nucliweb

Web Performance Tips

6

webperf-snippets

@nucliweb

Web Performance Tips

6

webperf-snippets

@nucliweb

Web Performance Tips

6

webperf-snippets

@nucliweb

Web Performance Tips

6

webperf-snippets

@nucliweb

Web Performance Tips

6

@nucliweb

Web Performance Tips

6

Optimize Largest Contentful Paint

@nucliweb

Web Performance Tips

6

Optimize Largest Contentful Paint

@nucliweb

Web Performance Tips

6

rviscomi/capo.js

@nucliweb

Web Performance Tips

6

rviscomi/capo.js

@nucliweb

Web Performance Tips

6

estelafranco.com/spa-cwv/

@nucliweb

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});