Web Vitals for a healthier open web Ben Morss Developer Advocate - - PowerPoint PPT Presentation

▶
web vitals
SMART_READER_LITE
LIVE PREVIEW

Web Vitals for a healthier open web Ben Morss Developer Advocate - - PowerPoint PPT Presentation

Mar 08, 2023 513 likes •1.09k views

Web Vitals for a healthier open web Ben Morss Developer Advocate DrupalCon Ben Morss Developer Advocate at Google, where I work to help the Web be faster and more beautiful. (And I still sometimes make music) @benmorss 3 12 seconds

slide-1
SLIDE 1 DrupalCon

Web Vitals

for a healthier open web

Ben Morss

Developer Advocate

slide-2
SLIDE 2

Ben Morss

Developer Advocate at Google, where I work to help the Web be faster and more beautiful. (And I still sometimes make music)

@benmorss
slide-3
SLIDE 3 3
slide-4
SLIDE 4 DrupalCon

12 seconds

Average mobile web page load on 3G

slide-5
SLIDE 5

40%

  • f mobile connections

worldwide are 2G

slide-6
SLIDE 6 6
slide-7
SLIDE 7 DrupalCon
slide-8
SLIDE 8 DrupalCon
slide-9
SLIDE 9 DrupalCon

🔘 bit.ly/web-vitals

slide-10
SLIDE 10 DrupalCon
slide-11
SLIDE 11 htups://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
slide-12
SLIDE 12

Top stories

  • Top stories carousel will be open

to all pages, provided they meet the Google News Guidelines

  • Page experience will become a

ranking factor

  • AMP pages will be linked to,

if available

slide-13
SLIDE 13 DrupalCon

Web Vitals:

What are they?

slide-14
SLIDE 14 DrupalCon

Loading

Is it happening? contentbazaar.co/20160314/pi-way Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  • aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco contentbazaar.co/20160314/pi-way contentbazaar.co/20160314/pi-way

Interactivity

Is it responsive?

Visual Stability

Is it stable?

Pillars of UX

Essential metrics for a healthy site

slide-15
SLIDE 15

Core Web Vitals

(Loading)

LCP

Largest Contentgul Paint GOOD NEEDS IMPROVEMENT POOR 4.0 sec 2.5 sec (Interactivity)

FID

First Input Delay GOOD NEEDS IMPROVEMENT POOR 100 ms 300 ms (Visual Stability)

CLS

Cumulative Layout Shifu GOOD NEEDS IMPROVEMENT POOR 0.1 0.25

75%

slide-16
SLIDE 16 DrupalCon
slide-17
SLIDE 17 DrupalCon

Measures the render time of the largest content element (image or block of text) visible within the viewporu.

LCP

GOOD NEEDS IMPROVEMENT POOR 4 sec 2.5 sec

🔘 web.dev/lcp

slide-18
SLIDE 18 DrupalCon

Measures the time from when a user fjrst interacts with the page until the time when the browser is actually able to respond to that interaction.

FID

GOOD NEEDS IMPROVEMENT POOR 300 ms 100 ms

🔘 web.dev/fjd

slide-19
SLIDE 19 DrupalCon

Measures the sum of all unexpected layout shifus that

  • ccur throughout the

lifespan of the page

CLS

GOOD NEEDS IMPROVEMENT POOR 0.25 0.1

🔘 web.dev/cls

slide-20
SLIDE 20 DrupalCon

LCP, FID, CLS are real user measurement (RUM) metrics

Event Timing API → First Input Delay → web.dev/fjd Largest Contentgul Paint API → Largest Contentgul Paint → web.dev/lcp Layout Instability API → Cumulative Layout Shifu → web.dev/cls

Why these metrics? → bit.ly/web-vitals-science Why X threshold and P75? → bit.ly/web-vitals-methodology

slide-21
SLIDE 21 DrupalCon Chromium blog: The Science Behind Web Vitals

We analyzed millions of page impressions to understand how these metrics and thresholds afgect users. We found that when a site meets the above (Core Web Vitals) thresholds, users are

24% less likely to abandon page loads by

leaving the page before fjrst content is painted.

slide-22
SLIDE 22 DrupalCon

How do Drupal sites do?

slide-23
SLIDE 23 DrupalCon
slide-24
SLIDE 24 DrupalCon

Web Vitals:

Measuring

slide-25
SLIDE 25 DrupalCon
slide-26
SLIDE 26

Core Web Vitals

Now in your favorite tools

slide-27
SLIDE 27 DrupalCon

1.

slide-28
SLIDE 28 DrupalCon
slide-29
SLIDE 29 DrupalCon

🔘bit.ly/crux-tool

2.

slide-30
SLIDE 30 DrupalCon

🔘 g.co/chromeuxdash

slide-31
SLIDE 31

3.

slide-32
SLIDE 32 DrupalCon

4.

slide-33
SLIDE 33 DrupalCon
slide-34
SLIDE 34 DrupalCon

🔘 web.dev/pergormance-scoring

5.

slide-35
SLIDE 35 DrupalCon
slide-36
SLIDE 36 DrupalCon

🔘 bit.ly/web-vitals-extension

6.

slide-37
SLIDE 37
slide-38
SLIDE 38

import {getCLS, getFID, getLCP} from 'web-vitals'; // Measure and log each Core Web Vitals. getCLS(console.log); getFID(console.log); getLCP(console.log)

slide-39
SLIDE 39 DrupalCon
slide-40
SLIDE 40 DrupalCon

🔘 bit.ly/speed-demon-tool

slide-41
SLIDE 41 DrupalCon

Web Vitals:

Improving

slide-42
SLIDE 42 DrupalCon
slide-43
SLIDE 43 DrupalCon
slide-44
SLIDE 44 DrupalCon

Images

  • Make them smaller

○ choose smaller sizes or compress them ■ Image Optimize, squoosh.app ○ use responsive images ■ Responsive Image ○ lazy load ■ try modules like Lazyload, Blazy

slide-45
SLIDE 45 DrupalCon

JS & CSS:

  • Less, smaller

○ compress ○ minify ○ don't use all modules on all pages

  • Load them later

○ use async & defer

slide-46
SLIDE 46 DrupalCon
slide-47
SLIDE 47 DrupalCon
slide-48
SLIDE 48 DrupalCon
slide-49
SLIDE 49 DrupalCon

<!-- Old best practice --> <img src="shoe.jpg" width="640" height="360" alt="Shoe"> <!-- Then came responsive design practice --> <img src="shoe.jpg" alt="Shoe"> <style> img { width: 100%; /* or max-width: 100%; */ height: auto; } </style>

slide-50
SLIDE 50 DrupalCon

<!-- Modern best practice --> <!-- set a 640:360 (i.e a 16:9) aspect ratio --> <img src="shoe.jpg" width="640" height="360" alt="Shoe">

slide-51
SLIDE 51 DrupalCon
slide-52
SLIDE 52 DrupalCon

🔘 amp-wp.org

slide-53
SLIDE 53 DrupalCon
slide-54
SLIDE 54 DrupalCon

🔘 web.dev/vitals

slide-55
SLIDE 55

Thank you!

@benmorss benmorss.com

slide-56
SLIDE 56

🔘 web.dev/vitals