Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Estela Franco - @guaca Agenda Past Present Future

Slide 4

Slide 4 text

Estela Franco - @guaca Past Present Future Agenda

Slide 5

Slide 5 text

Estela Franco - @guaca Past Present Future

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Estela Franco - @guaca Past Present Future

Slide 12

Slide 12 text

Estela Franco - @guaca LCP Metrics evolution over time

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Estela Franco - @guaca CLS Metrics evolution over time

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Estela Franco - @guaca Optimizing LCP sub-parts TTFB

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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.

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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/

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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/

Slide 58

Slide 58 text

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/

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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.

Slide 66

Slide 66 text

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.

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

Estela Franco - @guaca Optimizing LCP sub-parts Resource Load Time ● Reduce the size of the resource. ● Reduce the distance the resource has to travel.

Slide 71

Slide 71 text

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.

Slide 72

Slide 72 text

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.

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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.

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Estela Franco - @guaca Theory vs. Reality

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

Estela Franco - @guaca Where is the data?

Slide 83

Slide 83 text

Estela Franco - @guaca PageSpeed Insights

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Estela Franco - @guaca Lighthouse

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

Estela Franco - @guaca RUM Tools

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

Estela Franco - @guaca RUM Tools

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

Estela Franco - @guaca RUM Tools

Slide 103

Slide 103 text

Estela Franco - @guaca RUM Tools

Slide 104

Slide 104 text

Estela Franco - @guaca How’s everyone doing?

Slide 105

Slide 105 text

Estela Franco - @guaca HTTP Archive

Slide 106

Slide 106 text

Estela Franco - @guaca HTTP Archive

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

Estela Franco - @guaca HTTP Archive

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

Estela Franco - @guaca HTTP Archive

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

Estela Franco - @guaca Past Present Future

Slide 115

Slide 115 text

Estela Franco - @guaca What’s next?

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

Estela Franco - @guaca Breaking 🥁 News!

Slide 122

Slide 122 text

Estela Franco - @guaca Coming soon to CrUX…

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

Estela Franco - @guaca But…

Slide 127

Slide 127 text

Estela Franco - @guaca

Slide 128

Slide 128 text

Estela Franco - @guaca Chrome Data

Slide 129

Slide 129 text

Estela Franco - @guaca Chrome Data

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

Estela Franco - @guaca THANK YOU!