Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Challenging Assumptions About LCP Best Practices (with data!)

Estela Franco
November 03, 2023

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.

Estela Franco

November 03, 2023
Tweet

More Decks by Estela Franco

Other Decks in Technology

Transcript

  1. Estela Franco - @guaca
    Challenging
    assumptions about
    LCP best practices
    (with data!)

    View full-size slide

  2. Estela Franco - @guaca
    Why are you still
    talking about LCP?
    Everyone knows all about LCP and how to optimize its values.

    View full-size slide

  3. Estela Franco - @guaca
    Agenda
    Past
    Present
    Future

    View full-size slide

  4. Estela Franco - @guaca
    Past
    Present
    Future
    Agenda

    View full-size slide

  5. Estela Franco - @guaca
    Past
    Present
    Future

    View full-size slide

  6. Estela Franco - @guaca
    LCP CLS
    FID
    Classic Core Web Vitals

    View full-size slide

  7. Estela Franco - @guaca
    INP
    New metric on the block!
    Traveling from
    March 2024!

    View full-size slide

  8. Estela Franco - @guaca
    Bad news for FID…
    New metric on the block!

    View full-size slide

  9. Estela Franco - @guaca
    The WebPerf Community is on fire!
    New metric on the block!

    View full-size slide

  10. Estela Franco - @guaca
    INP
    New guy on the block!

    View full-size slide

  11. Estela Franco - @guaca
    Past
    Present
    Future

    View full-size slide

  12. Estela Franco - @guaca
    LCP
    Metrics evolution over time

    View full-size slide

  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

    View full-size slide

  14. Estela Franco - @guaca
    CLS
    Metrics evolution over time

    View full-size slide

  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

    View full-size slide

  16. Estela Franco - @guaca
    FID
    Metrics evolution over time
    https://bit.ly/fid-changelog

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  19. Estela Franco - @guaca
    INP
    Metrics evolution over time
    https://bit.ly/inp-changelog

    View full-size slide

  20. Estela Franco - @guaca
    Why are you still
    talking about LCP?
    Everyone knows all about LCP and how to optimize its values.

    View full-size slide

  21. Estela Franco - @guaca
    Let the data do the talking!

    View full-size slide

  22. Estela Franco - @guaca
    Let the data do the talking!
    CrUX data | Aug 2021 vs Aug 2022 vs Aug 2023

    View full-size slide

  23. Estela Franco - @guaca
    Let the data do the talking!
    CrUX data | Aug 2021 vs Aug 2022 vs Aug 2023

    View full-size slide

  24. Estela Franco - @guaca
    Let the data do the talking!
    CrUX data | Aug 2021 vs Aug 2022 vs Aug 2023

    View full-size slide

  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.

    View full-size slide

  26. Estela Franco - @guaca
    Why is LCP still an issue?
    HTTP Archive Data - Aug 2023

    View full-size slide

  27. Estela Franco - @guaca
    Why is LCP still an issue?

    View full-size slide

  28. Estela Franco - @guaca
    Why is LCP still an issue?
    TTFB
    Resource
    Load Delay
    Resource
    Load Time
    Element
    Render
    Delay

    View full-size slide

  29. Estela Franco - @guaca
    Why is LCP still an issue?
    https://web.dev/articles/optimize-lcp
    HTML Document

    View full-size slide

  30. Estela Franco - @guaca
    Why is LCP still an issue?
    https://web.dev/articles/optimize-lcp
    Stylesheets

    View full-size slide

  31. Estela Franco - @guaca
    Why is LCP still an issue?
    https://web.dev/articles/optimize-lcp
    Image
    (LCP element)

    View full-size slide

  32. Estela Franco - @guaca
    Why is LCP still an issue?
    https://web.dev/articles/optimize-lcp
    JavaScript

    View full-size slide

  33. Estela Franco - @guaca
    Why is LCP still an issue?

    View full-size slide

  34. Estela Franco - @guaca
    Why is LCP still an issue?
    TTFB

    View full-size slide

  35. Estela Franco - @guaca
    Why is LCP still an issue?
    TTFB RLD

    View full-size slide

  36. Estela Franco - @guaca
    Why is LCP still an issue?
    TTFB RLD RLT

    View full-size slide

  37. Estela Franco - @guaca
    Why is LCP still an issue?
    TTFB RLD RLT ERD

    View full-size slide

  38. Estela Franco - @guaca
    Optimizing LCP sub-parts
    TTFB

    View full-size slide

  39. Estela Franco - @guaca
    Optimizing LCP sub-parts
    TTFB
    ● Hosting

    View full-size slide

  40. Estela Franco - @guaca
    Optimizing LCP sub-parts
    TTFB
    ● Hosting
    ● Optimize your backend

    View full-size slide

  41. Estela Franco - @guaca
    Optimizing LCP sub-parts
    TTFB
    ● Hosting
    ● Optimize your backend
    ● Use a CDN

    View full-size slide

  42. Estela Franco - @guaca
    Optimizing LCP sub-parts
    TTFB
    ● Hosting
    ● Optimize your backend
    ● Use a CDN
    ● Cache content

    View full-size slide

  43. Estela Franco - @guaca
    Optimizing LCP sub-parts
    TTFB
    ● Hosting
    ● Optimize your backend
    ● Use a CDN
    ● Cache content
    ● Avoid page redirects

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  46. Estela Franco - @guaca
    Optimizing LCP sub-parts
    Resource
    Load Delay

    View full-size slide

  47. Estela Franco - @guaca
    Optimizing LCP sub-parts
    Resource
    Load Delay
    ● Discoverability

    View full-size slide

  48. Estela Franco - @guaca
    Optimizing LCP sub-parts
    Resource
    Load Delay
    ● Discoverability
    ○ Avoid JS-generated LCP elements

    View full-size slide

  49. Estela Franco - @guaca
    Optimizing LCP sub-parts
    Resource
    Load Delay
    ● Discoverability
    ○ Avoid JS-generated LCP elements.
    ○ Preload images from stylesheets.

    View full-size slide

  50. Estela Franco - @guaca
    Optimizing LCP sub-parts
    Resource
    Load Delay
    ● Discoverability
    ○ Avoid JS-generated LCP elements.
    ○ Preload images from stylesheets.
    ● Priority

    View full-size slide

  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.

    View full-size slide

  52. Estela Franco - @guaca
    Optimizing LCP sub-parts
    Resource
    Load Delay

    View full-size slide

  53. Estela Franco - @guaca
    Optimizing LCP sub-parts
    Resource
    Load Delay

    View full-size slide

  54. Estela Franco - @guaca
    Optimizing LCP sub-parts
    Resource
    Load Delay

    View full-size slide

  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/

    View full-size slide

  56. Estela Franco - @guaca
    Avoid lazy-loading LCP resources
    Resource
    Load Delay
    https://almanac.httparchive.org/en/2022/performance#fig-15
    June 2022
    18%

    View full-size slide

  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/

    View full-size slide

  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/

    View full-size slide

  59. Estela Franco - @guaca
    Avoid lazy-loading LCP resources
    Resource
    Load Delay
    https://make.wordpress.org/performance/roadmap-2023/#category-images

    View full-size slide

  60. Estela Franco - @guaca
    Avoid lazy-loading LCP resources
    Resource
    Load Delay
    https://wordpress.org/plugins/lazy-load-control-for-elementor/

    View full-size slide

  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

    View full-size slide

  62. Estela Franco - @guaca
    Avoid lazy-loading LCP resources
    Resource
    Load Delay
    https://github.com/HTTPArchive/custom-metrics/pull/94/files

    View full-size slide

  63. Estela Franco - @guaca
    Avoid lazy-loading LCP resources
    Resource
    Load Delay
    https://performance.shopify.com/blogs/blog/how-fast-is-your-shopify-theme

    View full-size slide

  64. Estela Franco - @guaca
    Continue looking at the
    data and publishing
    your findings!

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  67. Estela Franco - @guaca
    Leverage fetchpriority attribute
    Resource
    Load Delay
    https://web.dev/articles/optimize-lcp
    2.6 s → 1.9 s

    View full-size slide

  68. Estela Franco - @guaca
    Optimizing LCP sub-parts
    Resource
    Load Time

    View full-size slide

  69. Estela Franco - @guaca
    Optimizing LCP sub-parts
    Resource
    Load Time
    ● Reduce the size of the resource.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  73. Estela Franco - @guaca
    Optimizing LCP sub-parts
    Element
    Render
    Delay

    View full-size slide

  74. Estela Franco - @guaca
    Optimizing LCP sub-parts
    Element
    Render
    Delay
    ● Reduce or inline render-blocking
    stylesheets.

    View full-size slide

  75. Estela Franco - @guaca
    Optimizing LCP sub-parts
    Element
    Render
    Delay
    ● Reduce or inline render-blocking
    stylesheets.
    ● Defer or inline render-blocking JavaScript.

    View full-size slide

  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.

    View full-size slide

  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).

    View full-size slide

  78. Estela Franco - @guaca
    Optimal sub-part times
    https://web.dev/articles/optimize-lcp

    View full-size slide

  79. Estela Franco - @guaca
    Optimal sub-part times
    ~40% <10% ~40% <10%
    https://web.dev/articles/optimize-lcp

    View full-size slide

  80. Estela Franco - @guaca
    Theory vs. Reality

    View full-size slide

  81. Estela Franco - @guaca
    https://bit.ly/lcp-poll

    View full-size slide

  82. Estela Franco - @guaca
    Where is the
    data?

    View full-size slide

  83. Estela Franco - @guaca
    PageSpeed Insights

    View full-size slide

  84. Estela Franco - @guaca
    PageSpeed Insights
    PROS:
    ● No development
    needed

    View full-size slide

  85. Estela Franco - @guaca
    PageSpeed Insights
    PROS:
    ● No development
    needed
    CONS:
    ● Synth data

    View full-size slide

  86. Estela Franco - @guaca
    Lighthouse

    View full-size slide

  87. Estela Franco - @guaca
    Lighthouse
    PROS:
    ● No development
    needed

    View full-size slide

  88. Estela Franco - @guaca
    Lighthouse
    PROS:
    ● No development
    needed
    CONS:
    ● “It works on my
    machine ¯\_(ツ)_/¯”
    alert

    View full-size slide

  89. Estela Franco - @guaca
    WebVitals Chrome extension
    https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

    View full-size slide

  90. Estela Franco - @guaca
    WebVitals Chrome extension
    PROS:
    ● No development
    needed
    https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

    View full-size slide

  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

    View full-size slide

  92. Estela Franco - @guaca
    JavaScript
    https://web.dev/articles/optimize-lcp
    ● LCP API
    ● Navigation Timing
    API
    ● Resource Timing
    API

    View full-size slide

  93. Estela Franco - @guaca
    JavaScript
    https://web.dev/articles/optimize-lcp
    ● LCP API
    ● Navigation Timing
    API
    ● Resource Timing
    API
    CONS:
    ● It requires
    development

    View full-size slide

  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

    View full-size slide

  95. Estela Franco - @guaca
    RUM Tools

    View full-size slide

  96. Estela Franco - @guaca
    RUM Tools
    TTFB
    Resource
    Load Delay
    Resource
    Load Time
    Element
    Render
    Delay

    View full-size slide

  97. Estela Franco - @guaca
    RUM Tools
    TTFB
    Resource
    Load Delay
    Resource
    Load Time
    Element
    Render
    Delay

    View full-size slide

  98. Estela Franco - @guaca
    RUM Tools
    TTFB
    Resource
    Load Delay
    Resource
    Load Time
    Element
    Render
    Delay

    View full-size slide

  99. Estela Franco - @guaca
    RUM Tools
    TTFB
    Resource
    Load Delay
    Resource
    Load Time
    Element
    Render
    Delay

    View full-size slide

  100. Estela Franco - @guaca
    RUM Tools

    View full-size slide

  101. Estela Franco - @guaca
    RUM Tools
    TTFB
    Resource
    Load Delay
    Resource
    Load Time
    Element
    Render
    Delay

    View full-size slide

  102. Estela Franco - @guaca
    RUM Tools

    View full-size slide

  103. Estela Franco - @guaca
    RUM Tools

    View full-size slide

  104. Estela Franco - @guaca
    How’s everyone
    doing?

    View full-size slide

  105. Estela Franco - @guaca
    HTTP Archive

    View full-size slide

  106. Estela Franco - @guaca
    HTTP Archive

    View full-size slide

  107. Estela Franco - @guaca
    HTTP Archive
    PROS:
    ● Create your custom
    query for your needs

    View full-size slide

  108. Estela Franco - @guaca
    HTTP Archive
    PROS:
    ● Create your custom
    query for your needs
    CONS:
    ● Query party 🎉

    View full-size slide

  109. Estela Franco - @guaca
    HTTP Archive
    Kudos to Philip and Rick!

    View full-size slide

  110. Estela Franco - @guaca
    HTTP Archive

    View full-size slide

  111. Estela Franco - @guaca
    HTTP Archive
    3.6 M
    7.8 M
    22.9 M

    View full-size slide

  112. Estela Franco - @guaca
    HTTP Archive

    View full-size slide

  113. Estela Franco - @guaca
    Remember, remember…
    Lab data
    !==
    Field data

    View full-size slide

  114. Estela Franco - @guaca
    Past
    Present
    Future

    View full-size slide

  115. Estela Franco - @guaca
    What’s next?

    View full-size slide

  116. Estela Franco - @guaca
    What’s next?
    ● Collect data from Real Users
    ○ JavaScript
    ○ RUM tools

    View full-size slide

  117. Estela Franco - @guaca
    What’s next?
    ● Collect data from Real Users
    ○ JavaScript
    ○ RUM tools
    ● Define hypothesis & prioritize implementations

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  120. Estela Franco - @guaca
    What if I don’t have
    budget or resources?

    View full-size slide

  121. Estela Franco - @guaca
    Breaking
    🥁
    News!

    View full-size slide

  122. Estela Franco - @guaca
    Coming soon to CrUX…

    View full-size slide

  123. Estela Franco - @guaca
    Coming soon…
    TTFB
    Resource
    Load Delay
    Resource
    Load Time
    Element
    Render Delay

    View full-size slide

  124. Estela Franco - @guaca
    LCP sub-parts data in CrUX!
    The reaction I expect from the
    WebPerf Community 🤩

    View full-size slide

  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

    View full-size slide

  126. Estela Franco - @guaca
    But…

    View full-size slide

  127. Estela Franco - @guaca

    View full-size slide

  128. Estela Franco - @guaca
    Chrome Data

    View full-size slide

  129. Estela Franco - @guaca
    Chrome Data

    View full-size slide

  130. Estela Franco - @guaca
    Did you get it right? 🤯

    View full-size slide

  131. Estela Franco - @guaca
    THANK YOU!

    View full-size slide