Pushing Webperf Limits - We Love Speed 2024.pptx
scalerotors9
19 views
159 slides
Sep 19, 2024
Slide 1 of 159
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
About This Presentation
In this deep dive talk, we’ll skip the basics and look at some advanced tuning techniques to make a modern website lightning fast.
Using plenty of graphs and data, we’ll show how these solutions have helped make scalemates.com the fastest (and largest) scale modeling website in the world.
Afte...
Slide Content
Pushing # WebPerf Limits @TimVereecke
WE LOVE SPEED
WE (REALLY) LOVE SPEED
Why bother?
CORE WEB VITALS GOOD NEEDS IMPROVEMENT POOR
75% GOOD
75% GOOD GOOD ENOUGH?
SEO: Yes! UX: No! 75% GOOD GOOD ENOUGH?
SEO: Yes! UX: Nooooo ! 75% GOOD 25% NOT GOOD GOOD ENOUGH?
90% How to get here?
95% How to get here?
98% How to get here?
99% How to get here?
1. COMMON PRACTICES 2. DESIGN CHOICES 3. FRESH TECHNIQUES
1. COMMON PRACTICES 2. DESIGN CHOICES 3. FRESH TECHNIQUES
1. COMMON PRACTICES Minification H3 CDN Fast DNS TLS 1.3 AVIF/WEBP Brotli Remove unused … fetchpriority=high Reduce JS 103 Early Hints Preload fonts Tuned DB Long max-age preconnect Use srcset Loading=lazy .woff2 Keep-alive No document.write () … BfCache Reduce 3 rd parties Reduce DOM Elements
97 1. COMMON PRACTICES
1. COMMON PRACTICES 2. DESIGN CHOICES 3. FRESH TECHNIQUES
Pushing the limits Design Choices
2011 requestmap.herokuapp.com
2024 requestmap.herokuapp.com
2011 MPA
2024 MPA
Pushing the limits CLS
GOOD NEEDS IMPROVEMENT POOR 0.100 0.250 CLS
GOOD NEEDS IMPROVEMENT POOR 0.100 0.250 CLS 0.000
0.002
html{ overflow-y:scroll ; scrollbar-gutter:stable }
Ad Blockers
970x90 300x250
<style> .bannerAd{width:300px;height:250px} </style>
<style> .av{width:300px;height:250px} </style> Extra Wrapper
<style> .av{width:300px;height:250px} </style> Extra Wrapper
HTML Streaming
FCP
FCP FCP+
FCP FCP+
FCP FCP+
<body class="bgl"> <body class=bgl>
21 lines, 2484 bytes
9 lines, 1009 bytes
Logged in User
<link rel =expect href =… blocking=render >
Chrome 124 (experimental)
GOOD NEEDS IMPROVEMENT POOR 0.100 0.250 EXPECTED 0.000
GOOD NEEDS IMPROVEMENT POOR 0.100 0.250 CLS Frequency EXPECTED 0.000
GOOD NEEDS IMPROVEMENT POOR 0.100 0.250 CLS Frequency EXPECTED 0.000 % of pageviews with any layout shift
# AimForZero
Wild Wild Web
Pushing the limits LCP
GOOD NEEDS IMPROVEMENT POOR 2.5s 4.0s LCP
<picture> <source media=" (min-width:1440px) " srcset=" 1080.jpg 1x, 1440.jpg 1.5x, 2160.jpg 2x " > <source media=" (min-width:700px) " srcset=" 720.jpg 1x, 1080.jpg 1.5x, 1440.jpg 2x " > <source media=" (min-width:500px) " srcset=" 540.jpg 1x, 720.jpg 1.5x, 1080.jpg 2x " > <source media=" (max-width:500px) " srcset=" 360.jpg 1x, 540.jpg 1.5x, 720.jpg 2x " > < img fetchpriority= high src= 720.jpg … > </picture>
<picture> <source media=" (min-width:1440px) " srcset=" 1080.jpg 1x, 1440.jpg 1.5x, 2160.jpg 2x " > <source media=" (min-width:700px) " srcset=" 720.jpg 1x, 1080.jpg 1.5x, 1440.jpg 2x " > <source media=" (min-width:500px) " srcset=" 540.jpg 1x, 720.jpg 1.5x, 1080.jpg 2x " > <source media=" (max-width:500px) " srcset=" 360.jpg 1x, 540.jpg 1.5x, 720.jpg 2x " > < img fetchpriority= high src= 720.jpg … > </picture>
<picture> <source media=" (min-width:1440px) " srcset=" 1080.jpg 1x, 1440.jpg 1.5x, 2160.jpg 2x " > <source media=" (min-width:700px) " srcset=" 720.jpg 1x, 1080.jpg 1.5x, 1440.jpg 2x " > <source media=" (min-width:500px) " srcset=" 540.jpg 1x, 720.jpg 1.5x, 1080.jpg 2x " > <source media=" (max-width:500px) " srcset=" 360.jpg 1x, 540.jpg 1.5x, 720.jpg 2x " > < img fetchpriority= high src= 720.jpg … > </picture>
<picture> <source media=" (min-width:1440px) " srcset=" 1080.jpg 1x, 1440.jpg 1.5x, 2160.jpg 2x " > <source media=" (min-width:700px) " srcset=" 720.jpg 1x, 1080.jpg 1.5x, 1440.jpg 2x " > <source media=" (min-width:500px) " srcset=" 540.jpg 1x, 720.jpg 1.5x, 1080.jpg 2x " > <source media=" (max-width:500px) " srcset=" 360.jpg 1x, 540.jpg 1.5x, 720.jpg 2x " > < img fetchpriority= high src= 720.jpg … > </picture>
<picture> <source media=" (min-width:1440px) " srcset=" 1080.jpg 1x, 1440.jpg 1.5x, 2160.jpg 2x " > <source media=" (min-width:700px) " srcset=" 720.jpg 1x, 1080.jpg 1.5x, 1440.jpg 2x " > <source media=" (min-width:500px) " srcset=" 540.jpg 1x, 720.jpg 1.5x, 1080.jpg 2x " > <source media=" (max-width:500px) " srcset=" 360.jpg 1x, 540.jpg 1.5x, 720.jpg 2x " > < img fetchpriority= high src= 720.jpg … > </picture>
<picture> <source media=" (min-width:1440px) " srcset=" 1080.jpg 1x, 1440.jpg 1.5x, 2160.jpg 2x " > <source media=" (min-width:700px) " srcset=" 720.jpg 1x, 1080.jpg 1.5x, 1440.jpg 2x " > <source media=" (min-width:500px) " srcset=" 540.jpg 1x, 720.jpg 1.5x, 1080.jpg 2x " > <source media=" (max-width:500px) " srcset=" 360.jpg 1x, 540.jpg 1.5x, 720.jpg 2x " > < img fetchpriority= high src= 720.jpg … > </picture> CDN Efficiency
CDN Efficiency Dimensions Edge Hits 2160px 965 1440px 3561 1080px 6203 720px 9011 540px 323 360px 153
CDN Efficiency Dimensions Edge Hits 2160px 965 1440px 3561 1080px 6203 720px 9011 540px 323 360px 153
<picture> <source media=" (min-width:1440px) " srcset=" 1080.jpg 1x, 1440.jpg 1.5x, 2160.jpg 2x " > <source media=" (min-width:700px) " srcset=" 720.jpg 1x, 1080.jpg 1.5x, 1440.jpg 2x " > <source media=" (min-width:500px) " srcset=" 540.jpg 1x, 720.jpg 1.5x, 1080.jpg 2x " > <source media=" (max-width:500px) " srcset=" 360.jpg 1x , 540.jpg 1.5x, 720.jpg 2x " > < img fetchpriority= high src= 720.jpg … > </picture> CDN Efficiency
< img srcset= "540.jpg 540w, 720.jpg 720w, 1080.jpg 1080w, 1440.jpg 1440w, 2160.jpg 2160w … >
< img srcset= "540.jpg 540w, 720.jpg 720w, 1080.jpg 1080w, 1440.jpg 1440w, 2160.jpg 2160w … > No DPR Capping
< img srcset= "540.jpg 540w, 720.jpg 720w, 1080.jpg 1080w, 1440.jpg 1440w , 2160.jpg 2160w … > Viewport 360px DPR 4x No DPR Capping
Wrong LCP Candidates
LCP Candidate
LCP Candidate
Late discovered = SLOW
Plan A: Send more bytes
Plan B: Fast Fallback Banner Fast Fallback Banner
Plan B: Fast Fallback Banner Early discovered < img >
Plan B: Fast Fallback Banner Early discovered < img >
Beating Latency
High Latency
Old School
Old School
Replication Test
Before After
Q1 2023
Today
Potential
DE-FRA US-SFO US-EWR 150 ms faster
Before Distributed Cloud Search Facets Performance 90ms faster
Redirects
Redirects Are STUPID!!!
Redirect Liquidation
Request Old URL
Request Old URL See New URL
Request Old URL Redirect Liquidated See New URL
Not a Crawler
Full Partial Before
HTML Browser Caching
… B Guest network ma=90 #2 network ma=300 C Guest #3 network ma=90 G Guest #9 network ma=600 F Guest #8 network ma=300 E Guest #7 cached age=89 A Guest #6 network ma=600 D Guest #5 cached age=28 B Guest #4 Repeated A Guest #1 network ma=600
… B Guest network ma=90 #2 network ma=300 C Guest #3 network ma=90 G Guest #9 network ma=600 F Guest #8 network ma=300 E Guest #7 cached age=89 A Guest #6 network ma=600 D Guest #5 cached age=28 B Guest #4 Repeated A Guest #1 network ma=600 Repeated
… B Guest network ma=90 #2 A Guest network ma=600 #1 network ma=300 C Guest #3 network ma=90 G Guest #9 network ma=600 F Guest #8 network ma=300 E Guest #7 cached age=89 A Guest #6 network ma=600 D Guest #5 cached age=28 B Guest #4 Repeated
The problem starts here…
… B Guest network ma=90 #2 A Guest network ma=600 #1 network ma=300 C Guest #3 network no-cache G Logged in #9 network no-cache F Logged in #8 network no-cache E Logged in #7 cached age=89 A Guest #6 network no-cache D Logged in #5 cached age=28 B Guest #4 Wrong Context Logged in user thinks they are logged out Repeated Log in
… B Guest network ma=90 #2 A Guest network ma=600 #1 network no-cache G Logged in #9 network no-cache F Logged in #8 network no-cache E Logged in #7 network ma=300 C Guest #3 cached age=89 A Guest #6 network no-cache D Logged in #5 cached age=28 B Guest #4 Wrong Context Logged in user thinks they are logged out Repeated max(max-ages)=mma RLI Risk Zone Log in
Clear-Site-Data: cache
Clear-Site-Data: cache Before Reverted 60s 30s 45s 15s LCP over time
RLI-BCB
Recently Logged In Browser Cache Bypassing
RLI Risk Zone
Standard RLI Risk Zone
Removes ?rli=1 in the browser
… B Guest network ma=90 #2 A Guest network ma=600 #1 network ma=300 C Guest #3 network no-cache G Logged in #9 network no-cache F ?rli=1 Logged in #8 network no-cache E ?rli=1 Logged in #7 network no-cache A ?rli=1 Logged in #6 network no-cache D ?rli=1 Logged in #5 cached age=28 B Guest #4 Repeated max(max-ages)=mma Log in RLI Risk Zone Remove ?rli=1 in browser 3 Link to A?rli=1 on server 2 Add Cookie RLI=1 on server 1
Progressive Speculation
Nearly INSTANT performance
<script type=" speculationrules "> {" prerender ": [{"source": " document ","where ":{" selector_matches":"nav a, a.article "}," eagerness ":"moderate "} ]} </script> https:// developer.mozilla.org / en -US/docs/Web/API/ Speculation_Rules_API
<script type=" speculationrules "> {" prerender ": [{"source": " document ","where ":{" selector_matches":"nav a, a.article "}," eagerness ":"moderate "} ]} </script> Action prerender | prefetch https:// developer.mozilla.org / en -US/docs/Web/API/ Speculation_Rules_API
<script type=" speculationrules "> {" prerender ": [{"source": " document ","where ":{" selector_matches":"nav a, a.article "}," eagerness ":"moderate "} ]} </script> Action prerender | prefetch Eagerness eager | moderate | conservative https:// developer.mozilla.org / en -US/docs/Web/API/ Speculation_Rules_API
-700 -300 -200 -300 -100 - 100 100 300 200 500 400 700 800 | | | | | | | | | | | | | | | | Click Conservative (Prefetch) +200ms Page A Moderate (Prefetch) Standard -400 -700 | | Page B LCP LCP LCP
-700 -300 -200 -300 -100 - 100 100 300 200 500 400 700 800 | | | | | | | | | | | | | | | | Click Conservative (Prefetch) +200ms Page A Moderate (Prefetch) Standard -400 -700 | | Page B Mouse Down LCP LCP LCP
-700 -300 -200 -300 -100 - 100 100 300 200 500 400 700 800 | | | | | | | | | | | | | | | | Click Conservative (Prefetch) +200ms Page A Moderate (Prefetch) Standard -400 -700 | | Page B Mouse Down LCP LCP LCP
-700 -300 -200 -300 -100 - 100 100 300 200 500 400 700 800 Hover | | | | | | | | | | | | | | | | Click Conservative (Prefetch) Page A Moderate (Prefetch) Standard -400 -700 | | Page B Mouse Down LCP LCP LCP +200ms
-700 -300 -200 -300 -100 - 100 100 300 200 500 400 700 800 Hover | | | | | | | | | | | | | | | | Click Conservative (Prerender) Page A Moderate (Prerender) Standard -400 -700 | | Page B Mouse Down LCP LCP LCP +200ms
-700 -300 -200 -300 -100 - 100 100 300 200 500 400 700 800 Hover | | | | | | | | | | | | | | | | Click Conservative (Prerender) +200ms Page A Moderate (Prerender) -400 -700 | | Page B Mouse Down LCP LCP LCP Standard
-700 -300 -200 -300 -100 - 100 100 300 200 500 400 700 800 Hover | | | | | | | | | | | | | | | | Click Conservative (Prerender) +200ms Page A Moderate (Prerender) -400 -700 | | Page B Mouse Down LCP LCP LCP Standard
-700 -300 -200 -300 -100 - 100 100 300 200 500 400 700 800 Hover | | | | | | | | | | | | | | | | Click Page A -400 -700 | | Page B Mouse Down LCP Standard LCP Conservative (Progressive) 1 2
-700 -300 -200 -300 -100 - 100 100 300 200 500 400 700 800 Hover | | | | | | | | | | | | | | | | Click Page A -400 -700 | | Page B Mouse Down LCP LCP Standard LCP Conservative (Progressive) Moderate (Progressive) +200ms 1 2
Pushing the limits INP
MPA
Beyond CWV
2.25x more pixels 1080px 720px
View Transitions 100ms “slower”
CORE WEB VITALS
P75
P99
Thank you! @TimVereecke
Questions? @TimVereecke
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 19
- Slides 159
- Age 437 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
28 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views