Slide 1
Slide 1 text
Hello, enterJS π π©πͺ
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED β’ MAY 8, 2024.
Slide 2
Slide 2 text
WEB PERFORMANCE APIS
THAT YOU (PROBABLY) NEVER KNEW EXISTED
MATHEUS ALBUQUERQUE β’ @ythecombinator
Slide 3
Slide 3 text
Matheus Albuquerque
β
π
ythecombinator
β π¨π» Sr. SWE @ Medallia
β β‘ Google Developer Expert
β β PC @ React Su
m
m
it NYC
β π§π« Mentor @ TechLabs
Slide 4
Slide 4 text
Matheus Albuquerque
β
π
ythecombinator
β π¨π» Sr. SWE @ Medallia
β β‘ Google Developer Expert
β β PC @ React Su
m
m
it NYC
β π§π« Mentor @ TechLabs
β ALL THE LINKS!
Slide 5
Slide 5 text
Why am I
here?
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Slide 6
Slide 6 text
WEB PERFORMANCE APIS
THAT YOU (PROBABLY) NEVER KNEW EXISTED
MATHEUS ALBUQUERQUE β’ @ythecombinator
Slide 7
Slide 7 text
MATHEUS ALBUQUERQUE β’ @ythecombinator
WEB PERFORMANCE STUFF
YOU ALREADY KNOW
Slide 8
Slide 8 text
YOU ALREADY KNOWβ¦
β HTTP/2
β COMPRESS JAVASCRIPT (E.G. WITH BROTLI/ZSTD) AND
USE IMAGE CDNS (40β80% SAVINGS)
β OPTIMIZE THIRD-PARTIES (DEFER/REPLACE/UPDATE
THEM)
β WORKERS TO OFF-LOAD THE MAIN THREAD
Slide 9
Slide 9 text
YOU ALREADY KNOWβ¦
β HTTPS://WWW.PATTERNS.DEV
Slide 10
Slide 10 text
Γ
Slide 11
Slide 11 text
FIXING WEB PERFORMANCE
Slide 12
Slide 12 text
FIXING WEB PERFORMANCE
Slide 13
Slide 13 text
This talk presents
Why am I here?
Measuring
Measuring (with the platform)
Optimizing (with the platform)
Why are we here?
Closing thoughts
Slide 14
Slide 14 text
This talk presents
Why am I here?
Measuring
Measuring (with the platform)
Optimizing (with the platform)
Why are we here?
Closing thoughts
Slide 15
Slide 15 text
Measuring
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Slide 16
Slide 16 text
#QUESTION π€
What does it mean to be fast?
Slide 17
Slide 17 text
#QUESTION π€
What does it mean to be fast?
If you were to summarize web
performance in one metric, whatβd be
your pick?
Slide 18
Slide 18 text
#QUESTION π€
What does it mean to be fast?
If you were to summarize web
performance in one metric, whatβd be
your pick?
e.g. load time, responsiveness, etc.
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Γ
Slide 21
Slide 21 text
#PROTIPπ‘
A lot of loading metrics don't capture
user experience. We need to think
about our metrics in terms of what
matters.
Slide 22
Slide 22 text
#QUESTION π€
What does it mean to be fast?
If you were to summarize web
performance in one metric, whatβd be
your pick?
Slide 23
Slide 23 text
WHAT DOES IT MEAN TO BE FAST?
Slide 24
Slide 24 text
#PROTIPπ‘
Load metrics are not a single number.
Slide 25
Slide 25 text
WHAT DOES IT MEAN TO BE FAST?
PERCEIVED LOAD SPEED
HOW QUICKLY A PAGE CAN LOAD AND RENDER ALL OF ITS
VISUAL ELEMENTS TO THE SCREEN
LOAD RESPONSIVENESS
HOW QUICKLY A PAGE CAN LOAD/RUN ANY REQUIRED JS IN
ORDER FOR COMPONENTS TO RESPOND TO USER INTERACTION
RUNTIME RESPONSIVENESS
AFTER THE PAGE LOAD, HOW QUICKLY CAN THE PAGE
RESPOND TO USER INTERACTION?
SMOOTHNESS
DO TRANSITIONS & ANIMATIONS RENDER AT A CONSISTENT
FRAME RATE AND FLOW FLUIDLY?
Slide 26
Slide 26 text
#PROTIPπ‘
The only way to truly know how your
site performs for your users is to
actually measure its performance as
those users are loading and
interacting with it.
Slide 27
Slide 27 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Jean-Antoine
Nollet
Slide 28
Slide 28 text
JEAN-ANTOINE NOLLET
β THE FIRST EVER RUM EXPERIMENT IN 1746
β HE GATHERED Λ200 MONKS IN CIRCUMFERENCE, WIRED
USING IRON, AND DISCHARGED A BATTERY THROUGH THE
HUMAN CHAIN
β HE WAS TESTING THE LATENCY OF AN ELECTRIC SIGNAL
WITH REAL USERS
Slide 29
Slide 29 text
#PROTIPπ‘
Browsers now provide us with many
apis to fetch performance metrics
that help site owners make sites
faster.
Slide 30
Slide 30 text
WEB PERFORMANCE STUFF
YOU ALREADY KNOW
MATHEUS ALBUQUERQUE β’ @ythecombinator
Slide 31
Slide 31 text
WEB PLATFORM PERF APIS
I DIDNβT KNOW EXISTED
MATHEUS ALBUQUERQUE β’ @ythecombinator
Slide 32
Slide 32 text
Measuring
with the platform
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Slide 33
Slide 33 text
MEASUREMENT APIS
GENERAL STUFF
DOMHighResTimeStamp, PerformanceObserver, PAGE
VISIBILITY API & LAYOUT INSTABILITY API
PROFILING
LONG TASKS API, UserAgentSpecificMemory & JS SELF-
PROFILING API
TIMING
USER TIMING, ELEMENT TIMING. EVENT TIMING, RESOURCE
TIMING, NAVIGATION TIMING & SERVER TIMING
SENSORS
BATTERY STATUS & NETWORK INFORMATION
Slide 34
Slide 34 text
#1 PAGE VISIBILITY
document.hidden;
document.visibilityState;
document.addEventListener("visibilitychange",()
=
>
{
if(document.visibilityState==="hidden"){
console.log("This window is hidden")
}
else{
console.log("This window is visible")
}
})
Slide 35
Slide 35 text
#1 PAGE VISIBILITY
β CANCEL NETWORK REQUESTS AND OTHER TIME-BASED
EVENTS
β FETCH INCOMPLETE MEDIA OR DOWNLOAD THE REST OF
YOUR BUNDLES USING DYNAMIC IMPORTS
β PAUSE VIDEOS AND CAROUSELS, IF THE USER IS NOT
WATCHING THEM
Slide 36
Slide 36 text
#2 PerformanceObserver
β SUBSCRIBE TO PERFORMANCE-RELATED EVENTS
β CALLBACKS ARE GENERALLY FIRED DURING IDLE
PERIODS
β YOU TELL THE OBSERVER WHAT TYPES OF ENTRIES TO
LISTEN FOR
Slide 37
Slide 37 text
#2 PerformanceObserver
const observer
=
new PerformanceObserver((list)
=
>
{
for (const entry of list.getEntries()) {
console.log(entry.toJSON());
}
});
observer.observe({type: 'some-entry-type'});
Slide 38
Slide 38 text
#3 LAYOUT INSTABILITY
β MANY WEBSITES HAVE DOM ELEMENTS SHIFTING AROUND
DUE TO CONTENT LOADING ASYNCHRONOUSLY
β THIS API GIVES US A LIST OF ALL LAYOUT SHIFT
EVENTS ON A PAGE
Slide 39
Slide 39 text
#3 LAYOUT INSTABILITY
const observer
=
new PerformanceObserver((list)
=
>
{
const entries
=
list.getEntries();
/
/
Shifts that are not preceded by input events
const nonInputEntries
=
entries.filter((entry)
=
>
!entry.hadRecentInput);
for (const entry of nonInputEntries) {
console.log(entry);
}
});
observer.observe({type: 'layout-shift'});
Slide 40
Slide 40 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 41
Slide 41 text
#3 LAYOUT INSTABILITY β SPOT
Slide 42
Slide 42 text
#3 LAYOUT INSTABILITY β FIX
Slide 43
Slide 43 text
TIMING β ACT I
USER TIMING
ALLOWS YOU TO MARK POINTS IN TIME AND THEN MEASURE
THE DURATION BETWEEN THOSE MARKS.
EVENT TIMING
EVENT PROCESSING TIME + TIME UNTIL THE NEXT FRAME
CAN BE RENDERED. THE BASIS FOR THE FID METRIC.
ELEMENT TIMING
MEASURE THE RENDER TIME OF SPECIFIC ELEMENTS. THE
BASIS FOR THE LCP METRIC.
Slide 44
Slide 44 text
#1 USER TIMING
/
/
Record the time i
m
m
ediately before running a task
performance.mark('myTask:start');
await doMyTask();
/
/
Record the time i
m
m
ediately after running a task
performance.mark('myTask:end');
/
/
Measure the delta between the start and end of the task
performance.measure('myTask', 'myTask:start', βmyTask:end');
observer.observe({type: 'measure'});
Slide 45
Slide 45 text
#1 USER TIMING
Slide 46
Slide 46 text
#1 USER TIMING β TOOLS
β "USER TIMING AND CUSTOM METRICS" BY STEVE SOUDERS
Slide 47
Slide 47 text
#1 USER TIMING β TOOLS
β "USER TIMING AND CUSTOM METRICS" BY STEVE SOUDERS
β "USER TIMING AND CUSTOM METRICS" BY STEVE SOUDERS
Slide 48
Slide 48 text
#2 ELEMENT TIMING
β ALLOWS YOU TO MEASURE THE RENDER TIME OF
SPECIFIC ELEMENTS
β USEFUL FOR KNOWING WHEN THE LARGEST IMAGE OR
TEXT BLOCK WAS PAINTED TO THE SCREEN
β THE BASIS FOR THE LARGEST CONTENTFUL PAINT (LCP)
METRIC
Slide 49
Slide 49 text
#2 ELEMENT TIMING
![]()
This is text I care about.
observer.observe({type: 'element'});Slide 50
Slide 50 text
#2 ELEMENT TIMING β TOOLS
β "ELEMENT TIMING: ONE TRUE METRIC TO RULE THEM ALL?" BY ANDY DAVIES
Slide 51
Slide 51 text
#2 ELEMENT TIMING
β USEFUL TO MEASURE THE EVENT PROCESSING TIME AS
WELL AS THE TIME UNTIL THE NEXT FRAME CAN BE
RENDERED
β EXPOSES A NUMBER OF TIMESTAMPS IN THE EVENT
LIFECYCLE
β THE BASIS FOR THE FIRST INPUT DELAY METRIC
Slide 52
Slide 52 text
#3 EVENT TIMING
const observer
=
new PerformanceObserver((entryList)
=
>
{
const firstInput
=
entryList.getEntries()[0];
const firstInputDelay
=
firstInput.processingStart - firstInput.startTime;
/
/
Measure the time it takes to run all event handlers
const firstInputProcessingTime
=
firstInput.processingEnd - firstInput.processingStart;
/
/
Measure the entire duration of the event
const firstInputDuration
=
firstInput.duration;
});
observer.observe({type: 'first-input'});
Slide 53
Slide 53 text
#3 EVENT TIMING
MEASURE THE LATENCYβ¦
β FROM A CLICK UNTIL WE REORDER CONTENT ON A TABLE
β TO DRAG A SLIDER TO FILTER SOME DATA
β FOR A FLYOUT TO APPEAR WHEN HOVERING A MENU ITEM
Slide 54
Slide 54 text
PROFILING
LONG TASKS API
REPORTS TASKS THAT TAKES LONGER THAN 50 MS AND IT'S
THE BASIS FOR TTI AND TBT METRICS
JS SELF-PROFILING API
PROFILE SPECIFIC COMPLEX OPERATIONS AND IDENTIFY
HOT SPOTS USING A SAMPLING PROFILER
UserAgentSpecificMemory
DETECT MEMORY LEAKS IN APPS THAT HANDLE A HUGE
VOLUME OF DATA
Slide 55
Slide 55 text
#1 LONG TASKS
Slide 56
Slide 56 text
#1 LONG TASKS
β REPORTS TASKS THAT TAKES LONGER THAN 50 MS
β USEFUL TO TRACK WHEN THE BROWSER'S MAIN THREAD
IS BLOCKED
β THE BASIS FOR TIME TO INTERACTIVE (TTI) AND
TOTAL BLOCKING TIME (TBT) METRICS
Slide 57
Slide 57 text
#1 LONG TASKS
Slide 58
Slide 58 text
#1 LONG TASKS β SPOT
observer.observe({type: 'longtask'});
Slide 59
Slide 59 text
#1 LONG TASKS β SPOT
observer.observe({type: 'longtask'});
{
name: "same-origin-descendant",
entryType: "longtask",
startTime: 1023.40999995591,
duration: 187.19000002602115,
attribution: [
{
name: "unknown",
entryType: "taskattribution",
startTime: 0,
duration: 0,
containerType: "iframe",
containerSrc: "child.html",
containerId: "",
containerName: "child1"
}
]
};
Slide 60
Slide 60 text
#2 JS SELF - PROFILING
const profiler
=
new Profiler({ sampleInterval: 10, maxBufferSize: 10000 });
/
/
Do work
.
.
.
const trace
=
await profiler.stop();
sendProfile(trace);
Slide 61
Slide 61 text
#2 JS SELF - PROFILING
β PROFILE SPECIFIC COMPLEX OPERATIONS
β PROFILE THIRD-PARTY SCRIPTS
β COMBINE WITH OTHER EVENTS/IMPORTANT METRICS,
LIKE LONG TASKS OR EVENT TIMING APIS
Slide 62
Slide 62 text
#3 UserAgentSpecificMemory
β MEASURES THE MEMORY USAGE AND DETECTS MEMORY
LEAKS
β WAITS FOR THE NEXT GC AND THEN MEASURES MEMORY
IMMEDIATELY AFTER THE UNNEEDED MEMORY HAS BEEN
RELEASED
β FORCES GC IF IT DOES NOT HAPPEN FOR 20S
Slide 63
Slide 63 text
MEMORY LEAKS
β FORGETTING TO UNREGISTER AN EVENT LISTENER
β ACCIDENTALLY CAPTURING OBJECTS FROM AN IFRAME
β NOT CLOSING A WORKER
β ACCUMULATING OBJECTS IN ARRAYS
Slide 64
Slide 64 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 65
Slide 65 text
MEMORY LEAKS
const obj
=
{ a: new Array(1000), b: new Array(2000) };
setInterval(()
=
>
{
console.log(obj.a);
}, 1000);
Slide 66
Slide 66 text
#3 UserAgentSpecificMemory
performance.measureUserAgentSpecificMemory()
Slide 67
Slide 67 text
{
name: "same-origin-descendant",
entryType: "longtask",
startTime: 1023.40999995591,
duration: 187.19000002602115,
attribution: [
{
name: "unknown",
entryType: "taskattribution",
startTime: 0,
duration: 0,
containerType: "iframe",
containerSrc: "child.html",
containerId: "",
containerName: "child1"
}
]
}
{
bytes: 1000000,
breakdown: [
{
bytes: 1000000,
attribution: [
{
url: "https://example.com",
scope: "Window",
},
],
types: ["JS", "DOM"],
},
{
bytes: 0,
attribution: [],
types: [],
},
],
}
{
"frames": [
{ "name": "Profiler" },
{ "column": 0, "line": 100, "name": "", "resourceId": 0 },
{ "name": "set innerHTML" },
{ "column": 10, "line": 10, "name": "A", "resourceId": 1 }
{ "column": 20, "line": 20, "name": "B", "resourceId": 1 }
],
"resources": [
"https://example.com/page",
"https://example.com/app.js",
],
"samples": [
{ "stackId": 0, "timestamp": 161.99500000476837 },
{ "stackId": 2, "timestamp": 182.43499994277954 },
{ "timestamp": 197.43499994277954 },
{ "timestamp": 213.32999992370605 },
{ "stackId": 3, "timestamp": 228.59999990463257 },
],
"stacks": [
{ "frameId": 0 },
{ "frameId": 2 },
{ "frameId": 3 },
{ "frameId": 4, "parentId": 2 }
]
}
LONG TASKS SELF-PROFILING USERAGENT MEMORY
Slide 68
Slide 68 text
TIMING β ACT II
RESOURCE TIMING
RETRIEVE AND ANALYZE DETAILED NETWORK TIMING DATA
REGARDING THE LOADING
SERVER TIMING
COMMUNICATE PERFORMANCE METRICS ABOUT HOW TIME IS
SPENT WHILE PROCESSING THE REQUEST
NAVIGATION TIMING
COMPLETE TIMING INFORMATION FOR NAVIGATION OF A
DOCUMENT
Slide 69
Slide 69 text
#1 RESOURCE TIMING
const observer
=
new PerformanceObserver((list)
=
>
{
for (const entry of list.getEntries()) {
/
/
If transferSize is 0, the resource was fulfilled via the cache.
console.log(entry.name, entry.transferSize === 0);
}
});
observer.observe({type: 'resource'});
Slide 70
Slide 70 text
#2 NAVIGATION TIMING
const observer
=
new PerformanceObserver((list)
=
>
{
for (const entry of list.getEntries()) {
console.log('Time to first byte', entry.responseStart);
}
});
observer.observe({type: 'navigation'});
Slide 71
Slide 71 text
#2 NAVIGATION TIMING
Slide 72
Slide 72 text
#2 NAVIGATION TIMING
/
/
ServiceWorker startup time
const workerStartupTime
=
entry.responseStart - entry.workerStart;
/
/
Request time only (excluding redirects, DNS, and connection/TLS time)
const requestTime
=
entry.responseStart - entry.requestStart;
/
/
Response time only (download)
const responseTime
=
entry.responseEnd - entry.responseStart;
/
/
Request + response time
const requestResponseTime
=
entry.responseEnd - entry.requestStart;
Slide 73
Slide 73 text
#3 SERVER TIMING
MEASURE ANY WORK THAT THE SERVER DOES TO COMPLETE
A REQUEST:
β ROUTING/AUTHENTICATING THE REQUEST
β RUNNING CONTENT THROUGH TEMPLATING SYSTEMS
β QUERYING DATABASES/API CALLS TO THIRD-PARTY
SERVICES
Slide 74
Slide 74 text
#3 SERVER TIMING
Server-Timing:
database;dur=123;desc="Database",
templating;dur=56;desc="Template processing"
Slide 75
Slide 75 text
#3 SERVER TIMING
Slide 76
Slide 76 text
#3 SERVER TIMING
Slide 77
Slide 77 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 78
Slide 78 text
SENSORS
BATTERY STATUS
INFORMATION ABOUT THE POWER SOURCE, CHARGE LEVEL,
AND OTHERS
NETWORK INFORMATION
ADAPT THE USERSβ EXPERIENCE BASED ON THE QUALITY OF
THEIR CONNECTION
Slide 79
Slide 79 text
#1 BATTERY STATUS
const batteryInfo
=
await navigator.getBattery();
batteryInfo.addEventListener("chargingchange", listener);
batteryInfo.addEventListener("chargingtimechange", listener);
batteryInfo.addEventListener("dischargingtimechange", listener);
batteryInfo.addEventListener("levelchange", listener);
Slide 80
Slide 80 text
#2 NETWORK INFORMATION
const networkInfo
=
navigator.connection;
navigator.connection.addEventListener('change', onConnectionChange);
Slide 81
Slide 81 text
#2 NETWORK INFORMATION
const networkInfo
=
navigator.connection.addEventListener('change', onConnectionChange);
{
effectiveType: "4g",
rtt: 200,
downlink: 1.65,
saveData: false,
}
Slide 82
Slide 82 text
#2 NETWORK INFORMATION
β SWITCH BETWEEN SERVING HIGH/LOW DEFINITION
CONTENT BASED ON THE USER'S NETWORK
β DECIDE WHETHER TO PRELOAD RESOURCES
β DEFER UPLOADS/DOWNLOADS WHEN USERS ARE ON A SLOW
CONNECTION
β ADAPT TO SITUATIONS WHEN USERS ARE OFFLINE
Slide 83
Slide 83 text
#2 NETWORK INFORMATION
switch (connectionType) {
case "4g":
return ;
case "3g":
return 
;
default:
return 
;
}
Slide 84
Slide 84 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 85
Slide 85 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
Improving
with the platform
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Slide 88
Slide 88 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Resource
Hints
Slide 89
Slide 89 text
RESOURCE HINTS
β MANY PERFORMANCE OPTIMIZATIONS CAN BE MADE WHEN
WE CAN PREDICT WHAT USERS MIGHT DO.
β RESOURCE HINTS ARE A SIMPLE BUT EFFECTIVE WAY
TO ALLOW DEVELOPERS TO HELP THE BROWSER TO STAY
ONE STEP AHEAD OF THE USER AND KEEP PAGES FAST.
Slide 90
Slide 90 text
RESOURCE HINTS
<
!
-
-
Preconnect
-
-
>
<
!
-
-
Preloading
-
-
>
<
!
-
-
DNS Prefetch
-
-
>
<
!
-
-
Prefetch
-
-
>
<
!
-
-
Prerender
-
-
>
Slide 91
Slide 91 text
RESOURCE HINTS
<
!
-
-
Preconnect
-
-
>
<
!
-
-
Preloading
-
-
>
<
!
-
-
DNS Prefetch
-
-
>
<
!
-
-
Prefetch
-
-
>
<
!
-
-
Prerender
-
-
>
Slide 92
Slide 92 text
PRECONNECT
β IT ALLOWS THE BROWSER TO SETUP EARLY
CONNECTIONS BEFORE THE REQUEST IS ACTUALLY
SENT TO THE SERVER. THIS INCLUDES:
β’ TLS NEGOTIATIONS
β’ TCP HANDSHAKES
β ELIMINATES ROUNDTRIP LATENCY
Slide 93
Slide 93 text
PRECONNECT
100MS 200MS 300MS 400MS 500MS 600MS 700MS
HTML
CSS
FONT 1
FONT 2
FONTS START LOADING FONTS RENDERED
Slide 94
Slide 94 text
PRECONNECT
100MS 200MS 300MS 400MS 500MS 600MS 700MS
HTML
CSS
FONT 1
FONT 2
FONTS START LOADING FONTS RENDERED
FONT 1
FONT 2
Slide 95
Slide 95 text
β¦AND MUCH MORE!
β DNS PREFETCH β’ WARNS THE BROWSER ABOUT THE
DOMAINS ITβS GOING TO NEED TO LOOK UP
β PREFETCH β’ FETCH RESOURCES IN THE BACKGROUND
AND STORE THEM IN CACHE
β PRERENDER β’ IT GOES ONE STEP FURTHER AND
EXECUTES THE FILES
Slide 96
Slide 96 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Priority
Hints
Slide 97
Slide 97 text
PRIORITY HINTS
β INCREASE THE PRIORITY OF THE LCP IMAGE
β LOWER THE PRIORITY OF ABOVE-THE-FOLD IMAGES AND
PRELOADED RESOURCES
β LOWER THE PRIORITY FOR NON-CRITICAL DATA FETCHES
β REPRIORITIZE SCRIPTS
Slide 98
Slide 98 text
PRIORITY HINTS
<
!
-
-
Increase the priority of the LCP image
-
-
>
<
!
-
-
Lower the priority of above-the-fold images
-
-
>
<
!
-
-
Lower the priority of above-the-fold images
-
-
>
Slide 99
Slide 99 text
PRIORITY HINTS
<
!
-
-
Increase the priority of the LCP image
-
-
>
<
!
-
-
Lower the priority of above-the-fold images
-
-
>
<
!
-
-
Lower the priority of above-the-fold images
-
-
>
Slide 100
Slide 100 text
PRIORITY HINTS
/
/
Important validation data
const user
=
await fetch("/user");
/
/
Less important content data
const relatedPosts
=
await fetch("/posts/suggested", { priority: "low" });
Slide 101
Slide 101 text
PRIORITY HINTS
/
/
Important validation data
const user
=
await fetch("/user");
/
/
Less important content data
const relatedPosts
=
await fetch("/posts/suggested", { priority: "low" });
Slide 102
Slide 102 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Responsive
Images
Slide 103
Slide 103 text
RESPONSIVE IMAGES
β IMAGES FOR DESKTOP AND TABLET CAN BE Λ2-4X
LARGER THAN THE MOBILE ONES.
β WITH srcset, THE BROWSER WON'T DOWNLOAD THE
LARGER IMAGES UNLESS THEY'RE NEEDED. THAT SAVES
BANDWIDTH.
Slide 104
Slide 104 text
RESPONSIVE IMAGES
Slide 105
Slide 105 text
RESPONSIVE IMAGES
Slide 106
Slide 106 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Native Lazy-
Loading
Slide 107
Slide 107 text
NATIVE LAZY-LOADING
Slide 108
Slide 108 text
NATIVE LAZY-LOADING
Slide 109
Slide 109 text
#PROTIP π‘
Lazy-loading iframes can lead to 2-3%
median data savings, 1-2% FCP
reductions, and 2% FID improvements
at the 95th percentile.
ββChrome teamβs research, 2019
Slide 110
Slide 110 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Native
Scheduler
Slide 111
Slide 111 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 112
Slide 112 text
NATIVE SCHEDULER
β A MORE ROBUST SOLUTION FOR SCHEDULING TASKS
β CONTROL AND SCHEDULE PRIORITIZED TASKS IN A
UNITED AND FLEXIBLE WAY
β INTEGRATED DIRECTLY INTO THE EVENT LOOP
β ALIGNED WITH THE WORK OF THE REACT TEAM AND IN
COOPERATION WITH GOOGLE, W3C AND OTHERS
Slide 113
Slide 113 text
NATIVE SCHEDULER
scheduler.postTask()
SCHEDULE AND CONTROL PRIORITIZING TASKS.
scheduler.wait()
YIELD AND RESUME AFTER SOME AMOUNT OF TIME OR
PERHAPS AFTER AN EVENT HAS OCCURRED.
scheduler.yield()
BREAK UP LONG TASKS BY YIELDING TO THE BROWSER AND
CONTINUING AFTER BEING RESCHEDULED.
isInputPending()
DETERMINE IF THE CURRENT TASK IS BLOCKING INPUT
EVENTS.
Slide 114
Slide 114 text
NATIVE SCHEDULER
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
β¦AND MUCH MORE!
β CSS TRICKS (E.G. font-display: swap AND will-
change)
β IMPORT ON VISIBILITY (USING AN
IntersectionObserver)
β CANVAS + WORKERS = OffscreenCanvas
Slide 117
Slide 117 text
β¦AND MUCH MORE!
β AVOID THE INITIAL HTTP TO HTTPS REDIRECTS SO
THAT PAGES LOAD FASTER USING HTTP STRICT
TRANSPORT SECURITY (HSTS)
β SEND DATA WITHOUT EXTRA ROUND TRIPS WITH QUIC
Slide 118
Slide 118 text
Move Fast &
Break Nothing β’
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Slide 119
Slide 119 text
BROWSER COMPATIBILITY
PERFORMANCE OBSERVER
USER TIMING
LONG TASKS
ELEMENT TIMING
RESOURCE TIMING
NAVIGATION TIMING
Slide 120
Slide 120 text
BROWSER COMPATIBILITY
SERVER TIMING
LAYOUT SHIFT
JS SELF-PROFILING
PAGE VISIBILITY
BATTERY STATUS
NETWORK INFORMATION
Slide 121
Slide 121 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 122
Slide 122 text
MOVE FAST & BREAK NOTHING β’
const Video
=
lazy(()
=
>
import("./Video"));
const Preview
=
lazy(()
=
>
import("./Preview"));
const networkInfo
=
useNetworkStatus();
const { With, Switch, Otherwise }
=
usePatternMatch(networkInfo);
Slide 123
Slide 123 text
MOVE FAST & BREAK NOTHING β’
Loading
.
.
.
}>
Slide 124
Slide 124 text
NETWORK STATUS: NOT SUPPORTED
Slide 125
Slide 125 text
NETWORK STATUS: NOT SUPPORTED
Slide 126
Slide 126 text
NETWORK STATUS: 4G
Slide 127
Slide 127 text
NETWORK STATUS: 3G
Slide 128
Slide 128 text
NETWORK STATUS: CODE SPLITTING
Slide 129
Slide 129 text
NETWORK STATUS: CODE SPLITTING
Slide 130
Slide 130 text
Why are we
here?
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Slide 131
Slide 131 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Browsers
Slide 132
Slide 132 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Which
browsers are
visiting our
app?
ββAPP DYNAMICS REPORT
Slide 133
Slide 133 text
BROWSER TOTAL
ββAPP DYNAMICS REPORT
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Devices &
Connection
Slide 136
Slide 136 text
#REALITYCHECK π³
Phone users experience slow First
Input Delay on 7x more websites.
ββWeb Almanac By HTTP Archive, 2021
Slide 137
Slide 137 text
BANDWIDTH MIX
ββGSM ASSOCIATION, 2022
Slide 138
Slide 138 text
THE GLOBAL LTE PICTURE
6.07 (MBPS) 44.31 (MBPS)
ββTHE STATE OF LTE BY OPEN SIGNAL, 2018
Slide 139
Slide 139 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
People
Slide 140
Slide 140 text
British Psychology Society, 2009
40% of Brits reported that they had
become physically violent toward
their computers.
Slide 141
Slide 141 text
Radware, 2013
A 500ms delay resulted in up to a
26% increase in frustration and up to
an 8% decrease in engagement.
Slide 142
Slide 142 text
Ericsson ConsumerLab, 2015
Delayed web pages caused a 38% rise in
mobile users' heart rates β equivalent to
the anxiety of watching a horror movie
alone.
Slide 143
Slide 143 text
DoubleClick, 2020
53% of mobile users abandon sites
that take over 3 seconds to load.
Slide 144
Slide 144 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Business
Slide 145
Slide 145 text
BUSINESS OUTCOMES
ββAKAMAI AND CHROME RESEARCH, 2017
β LONG TASKS DELAYED TTI
β AS FIRST-PAGE LONG TASK TIME INCREASED, OVERALL
CONVERSION RATES DECREASED
β MOBILE HAD UP TO Λ12X LONGER LONG TASKS
β OLDER DEVICES COULD BE SPENDING HALF OF THEIR
LOAD-TIME ON LONG TASKS
Slide 146
Slide 146 text
BUSINESS OUTCOMES
ββAKAMAI AND CHROME RESEARCH, 2017
Slide 147
Slide 147 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
Closing Notes
Slide 148
Slide 148 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
ALWAYS TRY TO
CORRELATE
BUSINESS
METRICS WITH
PERFORMANCE.
#1 of 6
Slide 149
Slide 149 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
DON'T TAKE
FAST NETWORKS,
CPUS AND RAM
FOR GRANTED.
#2 of 6
Slide 150
Slide 150 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
TEST ON REAL
PHONES AND
NETWORKS.
#3 of 6
Slide 151
Slide 151 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
AVOID THE
OBSERVER
EFFECT.
#4 of 6
Slide 152
Slide 152 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
GET RID OF THE
NOISE IN YOUR
METRICS.
#5 of 6
Slide 153
Slide 153 text
WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
THERE'S NO
SILVER BULLET.
IDENTIFY YOUR
CORE METRICS.
#6 of 6
Slide 154
Slide 154 text
THATβS ALL, FOLKS!
THANKS! π π©πͺ
QUESTIONS?
MATHEUS ALBUQUERQUE β’ @ythecombinator
β ALL THE LINKS!