Challenging Assumptions About LCP Best Practices (with data!)

When optimizing LCP, we can implement many techniques to improve its values. Each of these techniques focuses on a specific sub-part of LCP. But do you know which of these parts is more critical? Which optimizations should you prioritize to make a significant impact? In this talk, Estela will challenge the classic assumptions about optimizing LCP (using Chrome data!) and show how you can better prioritize your efforts to improve this metric.

Transcript

1. Estela Franco - @guaca Challenging assumptions about LCP best practices (with data!)
2. Estela Franco - @guaca Why are you still talking about LCP? Everyone knows all about LCP and how to optimize its values.
3. Estela Franco - @guaca Agenda Past Present Future
4. Estela Franco - @guaca Past Present Future Agenda
5. Estela Franco - @guaca Past Present Future
6. Estela Franco - @guaca LCP CLS FID Classic Core Web Vitals
7. Estela Franco - @guaca INP New metric on the block! Traveling from March 2024!
8. Estela Franco - @guaca Bad news for FID… New metric on the block!
9. Estela Franco - @guaca The WebPerf Community is on fire! New metric on the block!
10. Estela Franco - @guaca INP New guy on the block!
11. Estela Franco - @guaca Past Present Future
12. Estela Franco - @guaca LCP Metrics evolution over time
13. Estela Franco - @guaca LCP Metrics evolution over time • Chrome 77: ◦ Experimental metric exposed via API • Chrome 79: ◦ Metric is elevated to stable • Chrome 81: ◦ Metric definition improvements • Chrome 83: ◦ Metric definition improvements • Chrome 86: ◦ Metric definition improvements • Chrome 88: ◦ Metric definition improvements • Chrome 96 ◦ Metric bug fix • Chrome 98 ◦ Metric bug fix • Chrome 99 ◦ Implementation optimizations • Chrome 111 ◦ Implementation optimizations • Chrome 112 ◦ Metric definition improvements • Chrome 116 ◦ Metric definition improvements ◦ Implementation optimizations https://bit.ly/lcp-changelog
14. Estela Franco - @guaca CLS Metrics evolution over time
15. Estela Franco - @guaca CLS Metrics evolution over time https://bit.ly/cls-changelog • Chrome 77 ◦ Experimental metric exposed via API • Chrome 79 ◦ Metric is elevated to stable • Chrome 85 ◦ Metric definition improvements • Chrome 86 ◦ Metric definition changes and bug: • Chrome 87 ◦ Metric definition improvements • Chrome 88 ◦ Metric definition improvements • Chrome 89 ◦ Metric definition improvements • Chrome 90 ◦ Metric definition improvements • Chrome 91 ◦ Metric definition improvements • Chrome 93 ◦ Metric definition improvements • Chrome 98 ◦ Metric definition improvements • Chrome 116 ◦ Implementation optimizations
16. Estela Franco - @guaca FID Metrics evolution over time https://bit.ly/fid-changelog
17. Estela Franco - @guaca FID Metrics evolution over time https://bit.ly/fid-changelog • Chrome 75 ◦ Metric definition improvement • Chrome 77 ◦ Metric exposed via API • Chrome 83 ◦ Metric definition improvement • Chrome 91 ◦ Chrome change affecting metric
18. Estela Franco - @guaca INP Metrics evolution over time https://bit.ly/inp-changelog • Chrome 96 ◦ Experimental metric exposed via API • Chrome 109 ◦ Implementation optimizations • Chrome 111 ◦ Metric bug fix
19. Estela Franco - @guaca INP Metrics evolution over time https://bit.ly/inp-changelog
20. Estela Franco - @guaca Why are you still talking about LCP? Everyone knows all about LCP and how to optimize its values.
21. Estela Franco - @guaca Let the data do the talking!
22. Estela Franco - @guaca Let the data do the talking! CrUX data | Aug 2021 vs Aug 2022 vs Aug 2023
23. Estela Franco - @guaca Let the data do the talking! CrUX data | Aug 2021 vs Aug 2022 vs Aug 2023
24. Estela Franco - @guaca Let the data do the talking! CrUX data | Aug 2021 vs Aug 2022 vs Aug 2023
25. Estela Franco - @guaca That’s WHY I’m still talking about LCP Everyone knows all about LCP and how to optimize its values but data says LCP is still bad.
26. Estela Franco - @guaca Why is LCP still an issue? HTTP Archive Data - Aug 2023
27. Estela Franco - @guaca Why is LCP still an issue?
28. Estela Franco - @guaca Why is LCP still an issue? TTFB Resource Load Delay Resource Load Time Element Render Delay
29. Estela Franco - @guaca Why is LCP still an issue? https://web.dev/articles/optimize-lcp HTML Document
30. Estela Franco - @guaca Why is LCP still an issue? https://web.dev/articles/optimize-lcp Stylesheets
31. Estela Franco - @guaca Why is LCP still an issue? https://web.dev/articles/optimize-lcp Image (LCP element)
32. Estela Franco - @guaca Why is LCP still an issue? https://web.dev/articles/optimize-lcp JavaScript
33. Estela Franco - @guaca Why is LCP still an issue?
34. Estela Franco - @guaca Why is LCP still an issue? TTFB
35. Estela Franco - @guaca Why is LCP still an issue? TTFB RLD
36. Estela Franco - @guaca Why is LCP still an issue? TTFB RLD RLT
37. Estela Franco - @guaca Why is LCP still an issue? TTFB RLD RLT ERD
38. Estela Franco - @guaca Optimizing LCP sub-parts TTFB
39. Estela Franco - @guaca Optimizing LCP sub-parts TTFB • Hosting
40. Estela Franco - @guaca Optimizing LCP sub-parts TTFB • Hosting • Optimize your backend
41. Estela Franco - @guaca Optimizing LCP sub-parts TTFB • Hosting • Optimize your backend • Use a CDN
42. Estela Franco - @guaca Optimizing LCP sub-parts TTFB • Hosting • Optimize your backend • Use a CDN • Cache content
43. Estela Franco - @guaca Optimizing LCP sub-parts TTFB • Hosting • Optimize your backend • Use a CDN • Cache content • Avoid page redirects
44. Estela Franco - @guaca Optimizing LCP sub-parts TTFB • Hosting • Optimize your backend • Use a CDN • Cache content • Avoid page redirects • Use a service worker
45. Estela Franco - @guaca Optimizing LCP sub-parts TTFB • Hosting • Optimize your backend • Use a CDN • Cache content • Avoid page redirects • Use a service worker • Use 103 Early Hints for render-critical resources
46. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Delay
47. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Delay • Discoverability
48. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Delay • Discoverability ◦ Avoid JS-generated LCP elements
49. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Delay • Discoverability ◦ Avoid JS-generated LCP elements. ◦ Preload images from stylesheets.
50. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Delay • Discoverability ◦ Avoid JS-generated LCP elements. ◦ Preload images from stylesheets. • Priority
51. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Delay • Discoverability ◦ Avoid JS-generated LCP elements. ◦ Preload images from stylesheets. • Priority ◦ Avoid lazy-loading LCP resources.
52. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Delay
53. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Delay
54. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Delay
55. Estela Franco - @guaca Avoid lazy-loading LCP resources Resource Load Delay https://calendar.perfplanet.com/2022/lazy-loading-lcp-images-why-does-this-anti-pattern-happen/
56. Estela Franco - @guaca Avoid lazy-loading LCP resources Resource Load Delay https://almanac.httparchive.org/en/2022/performance#fig-15 June 2022 18%
57. Estela Franco - @guaca Avoid lazy-loading LCP resources Resource Load Delay https://calendar.perfplanet.com/2022/lazy-loading-lcp-images-why-does-this-anti-pattern-happen/
58. Estela Franco - @guaca Avoid lazy-loading LCP resources Resource Load Delay https://calendar.perfplanet.com/2022/lazy-loading-lcp-images-why-does-this-anti-pattern-happen/
59. Estela Franco - @guaca Avoid lazy-loading LCP resources Resource Load Delay https://make.wordpress.org/performance/roadmap-2023/#category-images
60. Estela Franco - @guaca Avoid lazy-loading LCP resources Resource Load Delay https://wordpress.org/plugins/lazy-load-control-for-elementor/
61. Estela Franco - @guaca Avoid lazy-loading LCP resources Resource Load Delay https://performance.shopify.com/blogs/blog/shopify-google-improving-lcp-with-new-liquid-features
62. Estela Franco - @guaca Avoid lazy-loading LCP resources Resource Load Delay https://github.com/HTTPArchive/custom-metrics/pull/94/files
63. Estela Franco - @guaca Avoid lazy-loading LCP resources Resource Load Delay https://performance.shopify.com/blogs/blog/how-fast-is-your-shopify-theme
64. Estela Franco - @guaca Continue looking at the data and publishing your findings!
65. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Delay • Discoverability ◦ Avoid JS-generated LCP elements. ◦ Preload images from stylesheets. • Priority ◦ Avoid lazy-loading LCP resources.
66. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Delay • Discoverability ◦ Avoid JS-generated LCP elements. ◦ Preload images from stylesheets. • Priority ◦ Avoid lazy-loading LCP resources. ◦ Leverage fetchpriority attribute.
67. Estela Franco - @guaca Leverage fetchpriority attribute Resource Load Delay https://web.dev/articles/optimize-lcp 2.6 s → 1.9 s
68. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Time
69. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Time • Reduce the size of the resource.
70. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Time • Reduce the size of the resource. • Reduce the distance the resource has to travel.
71. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Time • Reduce the size of the resource. • Reduce the distance the resource has to travel. • Reduce the network contention.
72. Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Time • Reduce the size of the resource. • Reduce the distance the resource has to travel. • Reduce the network contention. • Eliminate the network time entirely.
73. Estela Franco - @guaca Optimizing LCP sub-parts Element Render Delay
74. Estela Franco - @guaca Optimizing LCP sub-parts Element Render Delay • Reduce or inline render-blocking stylesheets.
75. Estela Franco - @guaca Optimizing LCP sub-parts Element Render Delay • Reduce or inline render-blocking stylesheets. • Defer or inline render-blocking JavaScript.
76. Estela Franco - @guaca Optimizing LCP sub-parts Element Render Delay • Reduce or inline render-blocking stylesheets. • Defer or inline render-blocking JavaScript. • Break up long tasks.
77. Estela Franco - @guaca Optimizing LCP sub-parts Element Render Delay • Reduce or inline render-blocking stylesheets. • Defer or inline render-blocking JavaScript. • Break up long tasks. • Use SSR (or SSG).
78. Estela Franco - @guaca Optimal sub-part times https://web.dev/articles/optimize-lcp
79. Estela Franco - @guaca Optimal sub-part times ~40% <10% ~40% <10% https://web.dev/articles/optimize-lcp
80. Estela Franco - @guaca Theory vs. Reality
81. Estela Franco - @guaca https://bit.ly/lcp-poll
82. Estela Franco - @guaca Where is the data?
83. Estela Franco - @guaca PageSpeed Insights
84. Estela Franco - @guaca PageSpeed Insights PROS: • No development needed
85. Estela Franco - @guaca PageSpeed Insights PROS: • No development needed CONS: • Synth data
86. Estela Franco - @guaca Lighthouse
87. Estela Franco - @guaca Lighthouse PROS: • No development needed
88. Estela Franco - @guaca Lighthouse PROS: • No development needed CONS: • “It works on my machine ¯\_(ツ)_/¯” alert
89. Estela Franco - @guaca WebVitals Chrome extension https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma
90. Estela Franco - @guaca WebVitals Chrome extension PROS: • No development needed https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma
91. Estela Franco - @guaca WebVitals Chrome extension PROS: • No development needed CONS: • “It works on my machine ¯\_(ツ)_/¯” alert https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma
92. Estela Franco - @guaca JavaScript https://web.dev/articles/optimize-lcp • LCP API • Navigation Timing API • Resource Timing API
93. Estela Franco - @guaca JavaScript https://web.dev/articles/optimize-lcp • LCP API • Navigation Timing API • Resource Timing API CONS: • It requires development
94. Estela Franco - @guaca JavaScript https://web.dev/articles/optimize-lcp • LCP API • Navigation Timing API • Resource Timing API PROS: • Synth and RUM data CONS: • It requires development
95. Estela Franco - @guaca RUM Tools
96. Estela Franco - @guaca RUM Tools TTFB Resource Load Delay Resource Load Time Element Render Delay
97. Estela Franco - @guaca RUM Tools TTFB Resource Load Delay Resource Load Time Element Render Delay
98. Estela Franco - @guaca RUM Tools TTFB Resource Load Delay Resource Load Time Element Render Delay
99. Estela Franco - @guaca RUM Tools TTFB Resource Load Delay Resource Load Time Element Render Delay
100. Estela Franco - @guaca RUM Tools
101. Estela Franco - @guaca RUM Tools TTFB Resource Load Delay Resource Load Time Element Render Delay
102. Estela Franco - @guaca RUM Tools
103. Estela Franco - @guaca RUM Tools
104. Estela Franco - @guaca How’s everyone doing?
105. Estela Franco - @guaca HTTP Archive
106. Estela Franco - @guaca HTTP Archive
107. Estela Franco - @guaca HTTP Archive PROS: • Create your custom query for your needs
108. Estela Franco - @guaca HTTP Archive PROS: • Create your custom query for your needs CONS: • Query party 🎉
109. Estela Franco - @guaca HTTP Archive Kudos to Philip and Rick!
110. Estela Franco - @guaca HTTP Archive
111. Estela Franco - @guaca HTTP Archive 3.6 M 7.8 M 22.9 M
112. Estela Franco - @guaca HTTP Archive
113. Estela Franco - @guaca Remember, remember… Lab data !== Field data
114. Estela Franco - @guaca Past Present Future
115. Estela Franco - @guaca What’s next?
116. Estela Franco - @guaca What’s next? • Collect data from Real Users ◦ JavaScript ◦ RUM tools
117. Estela Franco - @guaca What’s next? • Collect data from Real Users ◦ JavaScript ◦ RUM tools • Define hypothesis & prioritize implementations
118. Estela Franco - @guaca What’s next? • Collect data from Real Users ◦ JavaScript ◦ RUM tools • Define hypothesis & prioritize implementations • Validate in the lab ◦ PageSpeed Insights ◦ Lighthouse ◦ Chrome extension ◦ JavaScript
119. Estela Franco - @guaca What’s next? • Collect data from Real Users ◦ JavaScript ◦ RUM tools • Define hypothesis & prioritize implementations • Validate in the lab ◦ PageSpeed Insights ◦ Lighthouse ◦ Chrome extension ◦ JavaScript • Validate in the field
120. Estela Franco - @guaca What if I don’t have budget or resources?
121. Estela Franco - @guaca Breaking 🥁 News!
122. Estela Franco - @guaca Coming soon to CrUX…
123. Estela Franco - @guaca Coming soon… TTFB Resource Load Delay Resource Load Time Element Render Delay
124. Estela Franco - @guaca LCP sub-parts data in CrUX! The reaction I expect from the WebPerf Community 🤩
125. Estela Franco - @guaca What’s next? • Collect data from Real Users ◦ JavaScript ◦ RUM tools ◦ CrUX • Define hypothesis & prioritize implementations • Validate in the lab ◦ PageSpeed Insights ◦ Lighthouse ◦ Chrome extension ◦ JavaScript • Validate in the field
126. Estela Franco - @guaca But…
127. Estela Franco - @guaca
128. Estela Franco - @guaca Chrome Data
129. Estela Franco - @guaca Chrome Data
130. Estela Franco - @guaca Did you get it right? 🤯
131. Estela Franco - @guaca THANK YOU!