Improving Core Web Vitals using Speculation Rules API

Sergey Chernyshev

December 06, 2024

Tweet Share

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!