Rick Viscomi - Optimizing Web Vitals

Transcript

1. @rick_viscomi Optimizing Core Web Vitals Tech SEO Connect 2024, Raleigh
2. @rick_viscomi Wait, a Chrome guy at an SEO conference?
3. @rick_viscomi httparchive.org/reports/chrome-ux-report Percent of sites with good INP on mobile
4. @rick_viscomi WEB PERF < 💚 > SEO
5. @rick_viscomi PROJECT FEATHER blog.chriszacharias.com/page-weight-matters
6. @rick_viscomi SUNDAY CITIZEN goo.gle/sunday-citizen-cwv
7. @rick_viscomi CORE WEB VITALS LCP, INP & CLS web.dev/articles/vitals
8. @rick_viscomi 9 WAYS TO BOOST YOUR WEBSITE SPEED IN 2024: THE ULTIMATE GUIDE TO CORE WEB VITALS NEAR ME Number 4 will shock you! 😱 web.dev/articles/top-cwv
9. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • Loading performance ◦ <= 2500ms "Good" ◦ > 4000ms "Poor" • Percent of websites with good LCP ◦ 73% on desktop ◦ 61% on mobile web.dev/articles/lcp
10. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • Special considerations ◦ LCP changes as the page loads ◦ LCP stops at user interaction web.dev/articles/lcp
11. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • Special considerations ◦ Elements that are NOT considered ▪ Fullscreen images ▪ Invisible content ▪ Image placeholders web.dev/articles/lcp
12. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • Special considerations ◦ LCP is affected by viewport size ◦ LCP is affected by user state web.dev/articles/lcp
13. @rick_viscomi • Special considerations ◦ One LCP for all soft navigations in single page apps LARGEST CONTENTFUL PAINT (LCP) developer.chrome.com/docs/web-platform/soft-navigations-experiment
14. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) web.dev/articles/optimize-lcp Chrome DevTools trace
15. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) Waterfall diagram
16. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) web.dev/articles/optimize-lcp LCP phases TTFB Load delay Load duration Render delay
17. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • LCP phases ◦ Time to First Byte (TTFB) web.dev/articles/top-cwv
18. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • LCP phases ◦ Time to First Byte (TTFB) ▪ Back/forward cache ▪ Speculative prerendering #1 web.dev/articles/top-cwv
19. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • LCP phases ◦ Time to First Byte (TTFB) ▪ Avoid redirects web.dev/articles/optimize-ttfb
20. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • LCP phases ◦ Time to First Byte (TTFB) ▪ Use a CDN web.dev/articles/top-cwv #2
21. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • LCP phases ◦ Resource load delay web.dev/articles/optimize-lcp
22. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • LCP phases ◦ Resource load delay ▪ Make the image discoverable in the HTML source ▪ Avoid loading=lazy (and data-src) web.dev/articles/top-cwv #3
23. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • LCP phases ◦ Resource load delay ▪ Prioritize the image with fetchpriority=high #3 web.dev/articles/top-cwv
24. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • LCP phases ◦ Resource load duration web.dev/articles/optimize-lcp
25. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) web.dev/blog/common-misconceptions-lcp
26. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • LCP phases ◦ Resource load duration ▪ Smaller file size web.dev/articles/optimize-lcp
27. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • LCP phases ◦ Resource load duration ▪ Faster connections web.dev/articles/optimize-lcp
28. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • LCP phases ◦ Element render delay web.dev/articles/optimize-lcp
29. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • LCP phases ◦ Element render delay ▪ Limitations of preloading web.dev/articles/optimize-lcp
30. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • LCP phases ◦ Element render delay ▪ Web fonts web.dev/learn/performance/optimize-web-fonts
31. @rick_viscomi LARGEST CONTENTFUL PAINT (LCP) • LCP phases ◦ Element render delay ▪ Main thread blocked web.dev/articles/optimize-lcp
32. @rick_viscomi INTERACTION TO NEXT PAINT (INP) • Interaction responsiveness ◦ <= 200ms "Good" ◦ > 500ms "Poor" • Percent of websites with good INP ◦ 97% on desktop ◦ 76% on mobile web.dev/articles/inp
33. @rick_viscomi web.dev/articles/inp INTERACTION TO NEXT PAINT (INP) Chrome DevTools trace
34. @rick_viscomi INTERACTION TO NEXT PAINT (INP) Interaction diagram web.dev/articles/inp
35. @rick_viscomi INTERACTION TO NEXT PAINT (INP) web.dev/articles/inp INP phases Input delay Processing duration Presentation delay
36. @rick_viscomi INTERACTION TO NEXT PAINT (INP) • LCP phases ◦ Input delay ▪ Avoid unnecessary JavaScript web.dev/articles/top-cwv #4
37. @rick_viscomi • LCP phases ◦ Processing duration ▪ Yield to break up long tasks INTERACTION TO NEXT PAINT (INP) web.dev/articles/top-cwv #5
38. @rick_viscomi • LCP phases ◦ Processing duration ▪ Avoid large rendering updates INTERACTION TO NEXT PAINT (INP) web.dev/articles/top-cwv #6
39. @rick_viscomi • LCP phases ◦ Presentation delay ▪ Avoid large rendering updates INTERACTION TO NEXT PAINT (INP) web.dev/articles/top-cwv #6
40. @rick_viscomi CUMULATIVE LAYOUT SHIFT (CLS) • Layout stability ◦ <= 0.10 "Good" ◦ > 0.25 "Poor" • Percent of websites with good CLS ◦ 72% on desktop ◦ 79% on mobile web.dev/articles/cls
41. @rick_viscomi CUMULATIVE LAYOUT SHIFT (CLS) • Explicitly set sizes on content loaded from the page web.dev/articles/cls #7
42. @rick_viscomi CUMULATIVE LAYOUT SHIFT (CLS) • Ensure the page is bfcache-eligible web.dev/articles/cls #8
43. @rick_viscomi • Avoid animating layout-inducing CSS properties CUMULATIVE LAYOUT SHIFT (CLS) web.dev/articles/cls #9
44. @rick_viscomi REAL-USER DATA CrUX & RUM
45. @rick_viscomi • Source of truth for CWV "How slow are my users' experiences?" • Not a substitute for diagnostic tools "Why are they slow?" CHROME UX REPORT (CrUX) developer.chrome.com/docs/crux/methodology
46. @rick_viscomi REAL USER MEASUREMENT (RUM) • Diagnostic data for CWV "Why are user experiences slow?" • Additional metrics and info ◦ Where the time was spent ◦ What the user was doing web.dev/articles/vitals-measurement-getting-started
47. @rick_viscomi web.dev/articles/vitals-ga4
48. @rick_viscomi web.dev/articles/vitals-ga4
49. @rick_viscomi web.dev/articles/vitals-ga4
50. @rick_viscomi web.dev/articles/inp
51. @rick_viscomi
52. @rick_viscomi web.dev/articles/vitals-ga4
53. @rick_viscomi WEB PERF < 💚 > SEO
54. @rick_viscomi Optimizing Core Web Vitals Tech SEO Connect 2024, Raleigh