$30 off During Our Annual Pro Sale. View Details »

Challenging Assumptions About LCP Best Practices (with data!)

Estela Franco
November 03, 2023
Technology
1
700

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

See All by Estela Franco
WAW23 - Exprime al máximo Lighthouse para mejorar las CWV
guaca
0
17
INP - Qué es y cómo optimizarlo
guaca
0
32

Other Decks in Technology

See All in Technology
DMMプラットフォームにおける GKE を利用した プラットフォームエンジニアリングへの 取り組み
pospome
1
180
CI/CDプロセスの拡充からはじめる技術的負債の解消/Eliminate technical debt, starting with expanding CI/CD processes
onecareer_tech
0
280
AIをWebアプリに実装するための便利なPythonライブラリ
s2terminal
0
110
Oracle Cloud Infrastructure データベース・クラウド：各バージョンのサポート期間
oracle4engineer
PRO
6
5.2k
開発生産性向上へのコミットについて理解してもらうためのスライドテンプレートを作った話
ouchi2501
0
200
The Future of encoding/json
iamshunta
2
260
【Microsoft社員が振り返る】Microsoft Ignite
yutoy
1
490
スタートアップにおける、チーム拡大を見据えたコンポーネント分割の取り組み
rynsuke
2
890
Cloud Security Day 2023パネルディスカッション資料
coconala_engineer
0
160
CPOが開発する覚悟 〜コンパウンドスタートアップにおける、爆速の新規プロダクト開発スタイル〜
mosa_siru
7
6.2k
極力楽してKubernetes環境を構築したいwith AWS, terraform, EKS, Argo-CD
bigwheel
0
140
分散ストレージはすごいぞ
sat
PRO
1
160

Featured

See All Featured
The Cult of Friendly URLs
andyhume
71
5.4k
The Cost Of JavaScript in 2023
addyosmani
10
3.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
240
20k
Writing Fast Ruby
sferik
615
59k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
How to train your dragon (web standard)
notwaldorf
71
4.8k
[RailsConf 2023] Rails as a piece of cake
palkan
17
3.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
0
280
Unsuck your backbone
ammeep
660
56k
We Have a Design System, Now What?
morganepeng
41
6.5k
Teambox: Starting and Learning
jrom
125
8.2k
Fireside Chat
paigeccino
18
2.3k

Transcript

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

    View Slide

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

    View Slide

  3. Estela Franco - @guaca
    Agenda
    Past
    Present
    Future

    View Slide

  4. Estela Franco - @guaca
    Past
    Present
    Future
    Agenda

    View Slide

  5. Estela Franco - @guaca
    Past
    Present
    Future

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. Estela Franco - @guaca
    Past
    Present
    Future

    View Slide

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

    View 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 Slide

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

    View 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 Slide

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

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 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 Slide

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

    View Slide

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

    View 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 Slide

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

    View 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 Slide

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

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 Slide

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

    View Slide

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

    View 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 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 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 Slide

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

    View Slide

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

    View Slide

  80. Estela Franco - @guaca
    Theory vs. Reality

    View Slide

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

    View Slide

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

    View Slide

  83. Estela Franco - @guaca
    PageSpeed Insights

    View Slide

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

    View Slide

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

    View Slide

  86. Estela Franco - @guaca
    Lighthouse

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View 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 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 Slide

  95. Estela Franco - @guaca
    RUM Tools

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  100. Estela Franco - @guaca
    RUM Tools

    View Slide

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

    View Slide

  102. Estela Franco - @guaca
    RUM Tools

    View Slide

  103. Estela Franco - @guaca
    RUM Tools

    View Slide

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

    View Slide

  105. Estela Franco - @guaca
    HTTP Archive

    View Slide

  106. Estela Franco - @guaca
    HTTP Archive

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  110. Estela Franco - @guaca
    HTTP Archive

    View Slide

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

    View Slide

  112. Estela Franco - @guaca
    HTTP Archive

    View Slide

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

    View Slide

  114. Estela Franco - @guaca
    Past
    Present
    Future

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View Slide

  121. Estela Franco - @guaca
    Breaking
    🥁
    News!

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

  126. Estela Franco - @guaca
    But…

    View Slide

  127. Estela Franco - @guaca

    View Slide

  128. Estela Franco - @guaca
    Chrome Data

    View Slide

  129. Estela Franco - @guaca
    Chrome Data

    View Slide

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

    View Slide

  131. Estela Franco - @guaca
    THANK YOU!

    View Slide