Improving Core Web Vitals using Speculation Rules API

In this session Sergey Chernyshev talks about a technology available in Google Chrome called Speculation Rules API.

We look at why it is so groundbreaking, how it can be used by web developers to greatly optimize their site’s load and rendering times and what are the aspects they need to consider when implementing it.

Finally, we discuss how it improves the User Experience Speed and corresponding Core Web Vitals and how much websites can benefit from using this technology.

Transcript

1. Optimizing Core Web Vitals using Speculation Rules API New York, 2024 Sergey Chernyshev
2. Core Web Vitals Measure User Experience
3. Loading of User Experience
4. Interactivity of User Experience
5. Visual Stability of User Experience
6. Human-Computer Interaction on the Web Interact Present Content Consume Content
7. Human-Computer Interaction on the Web I P1 C Load Render P2 C Load Render
8. Human-Computer Interaction on the Web I P1 C Load Render P2 C Load Render LCP
9. Speculation Rules API https://developer.mozilla.org/en-US/docs/Web/API/ Speculation_Rules_API
10. Including Speculation Rules In-line HTTP Header
11. Speculation Rules Syntax: Matching
12. Speculation Rules Syntax: Selectors
13. immediate eager moderate conservative Speculation Rules Syntax: Eagerness – on pointer / touch down – 200 ms hover
14. No Speculation I P1 C Load Render P2 C Load Render LCP
15. I P1 C Load Render P2 C Load Render Speculation: Conservative Prefetch LCP
16. I P1 C Load Render P2 C Load Render Speculation: Moderate Prefetch (Desktop) LCP
17. I P1 C Load Render P2 C Load Render Speculation: Immediate Prefetch LCP
18. Speculation Rules Syntax: Prerender
19. I P1 C Load Render P2 C Load Render Speculation: Conservative Prerender LCP
20. I P1 C Load Render P2 C Load Render Speculation: Moderate Prerender (Desktop) LCP
21. I P1 C Load Render P2 C Load Render Speculation: Immediate Prerender LCP = 0?
22. DEMO
23. 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.
24. 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/
25. Thank you! Improve User Experience!