Tweet
Tweet

Slide 1

Slide 1 text

Optimizing Core Web Vitals using Speculation Rules API New York, 2024 Sergey Chernyshev

Slide 2

Slide 2 text

Core Web Vitals Measure User Experience

Slide 3

Slide 3 text

Loading of User Experience

Slide 4

Slide 4 text

Interactivity of User Experience

Slide 5

Slide 5 text

Visual Stability of User Experience

Slide 6

Slide 6 text

Human-Computer Interaction on the Web Interact Present Content Consume Content

Slide 7

Slide 7 text

Human-Computer Interaction on the Web I P1 C Load Render P2 C Load Render

Slide 8

Slide 8 text

Human-Computer Interaction on the Web I P1 C Load Render P2 C Load Render LCP

Slide 9

Slide 9 text

Speculation Rules API https://developer.mozilla.org/en-US/docs/Web/API/ Speculation_Rules_API

Slide 10

Slide 10 text

Including Speculation Rules In-line HTTP Header

Slide 11

Slide 11 text

Speculation Rules Syntax: Matching

Slide 12

Slide 12 text

Speculation Rules Syntax: Selectors

Slide 13

Slide 13 text

immediate eager moderate conservative Speculation Rules Syntax: Eagerness – on pointer / touch down – 200 ms hover

Slide 14

Slide 14 text

No Speculation I P1 C Load Render P2 C Load Render LCP

Slide 15

Slide 15 text

I P1 C Load Render P2 C Load Render Speculation: Conservative Prefetch LCP

Slide 16

Slide 16 text

I P1 C Load Render P2 C Load Render Speculation: Moderate Prefetch (Desktop) LCP

Slide 17

Slide 17 text

I P1 C Load Render P2 C Load Render Speculation: Immediate Prefetch LCP

Slide 18

Slide 18 text

Speculation Rules Syntax: Prerender

Slide 19

Slide 19 text

I P1 C Load Render P2 C Load Render Speculation: Conservative Prerender LCP

Slide 20

Slide 20 text

I P1 C Load Render P2 C Load Render Speculation: Moderate Prerender (Desktop) LCP

Slide 21

Slide 21 text

I P1 C Load Render P2 C Load Render Speculation: Immediate Prerender LCP = 0?

Slide 22

Slide 22 text

DEMO

Slide 23

Slide 23 text

Safe Speculation Make sure speculation requests are safe to make - avoid stateful GET requests like: ● Sign-out & Language switching URLs. ● "Add to cart" URLs. ● Server-side action URLs, e.g. sending an SMS & etc Filter the pages in the Speculation Rules. Watch Sec-Purpose HTTP request header for “prefetch” or “prerender”. Send an error response code from server to cancel speculation if necessary. For unsafe client code, use prerenderingchange to attach JS code.

Slide 24

Slide 24 text

45% LCP improvement “Cloudflare currently has tens of millions of domains using Speed Brain. We have measured the LCP at the 75th quantile (p75) for these sites and found an improvement for these sites between 40% and 50% (average around 45%).” – Cloudflare Speed Brain announcement https://blog.cloudflare.com/introducing-speed-brain/

Slide 25

Slide 25 text

Thank you! Improve User Experience!