Slide 1
Slide 1 text
Hello, Frontmania ✋ 🇳🇱
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED • THE 5TH OF OCTOBER, 2022.
Slide 2
Slide 2 text
WEB PERFORMANCE APIS
YOU (PROBABLY) DIDN’T KNOW EXISTED
MATHEUS ALBUQUERQUE
Slide 3
Slide 3 text
Å
I’M MATHEUS 🙋
↝ @YTHECOMBINATOR ON THE
WEB
↝ SR. SOFTWARE ENGINEER
@MEDALLIA
↝ MENTOR @TECHLABS
Slide 4
Slide 4 text
Disclaimers
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 5
Slide 5 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
#1
THE IDEA BEHIND
THIS SESSION IS
HEAVILY INSPIRED
BY ZENO'S
SESSION BACK IN
2016.
Slide 6
Slide 6 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
#1
SESSION BACK IN
2016.
Slide 7
Slide 7 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
#2 45 MINUTES IS A
LOT OF TIME, I
KNOW…
🥱
Slide 8
Slide 8 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
#2
LOT OF TIME, I
KNOW…
🥱
Slide 9
Slide 9 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
#3
🤯 = DEEP DIVE,
FURTHER
DISCUSSIONS
AFTER THE
SESSION
Slide 10
Slide 10 text
Why am I
here?
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 11
Slide 11 text
WEB PERFORMANCE APIS
YOU (PROBABLY) DIDN’T KNOW EXISTED
MATHEUS ALBUQUERQUE
Slide 12
Slide 12 text
WEB PERFORMANCE STUFF
YOU ALREADY KNOW
MATHEUS ALBUQUERQUE
Slide 13
Slide 13 text
↝ HTTP/2
↝ COMPRESS JAVASCRIPT (E.G. WITH BROTLI) AND
USE IMAGE CDNS (40–80% SAVINGS)
↝ OPTIMIZE THIRD-PARTIES (DEFER/REPLACE/
UPDATE THEM)
↝ WORKERS TO OFF-LOAD THE MAIN THREAD
YOU ALREADY KNOW…
Slide 14
Slide 14 text
— HTTPS://WWW.PATTERNS.DEV
YOU ALREADY KNOW…
Slide 15
Slide 15 text
— HTTPS://WWW.PATTERNS.DEV
YOU ALREADY KNOW…
Slide 16
Slide 16 text
#QUESTION 🤔
We're all already doing (some of)
these, right?
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Å
Slide 19
Slide 19 text
Å
— APP DYNAMICS REPORT, LAST THREE MONTHS
Slide 20
Slide 20 text
Å
— APP DYNAMICS REPORT, LAST THREE MONTHS
Slide 21
Slide 21 text
Å
— APP DYNAMICS REPORT, LAST THREE MONTHS
Slide 22
Slide 22 text
Å
FIXING WEB PERFORMANCE
Slide 23
Slide 23 text
Å
FIXING WEB PERFORMANCE
Slide 24
Slide 24 text
This talk presents
Why am I here?
Measuring
Measuring (with the platform)
Optimizing (with the platform)
Why are we here?
Closing thoughts
Slide 25
Slide 25 text
This talk presents
Why am I here?
Measuring
Measuring (with the platform)
Optimizing (with the platform)
Why are we here?
Closing thoughts
Slide 26
Slide 26 text
Measuring
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 27
Slide 27 text
#QUESTION 🤔
What does it mean to be fast?
Slide 28
Slide 28 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 29
Slide 29 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 30
Slide 30 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
If you were to summarize
web performance in one
metric, what’d be your
pick?
Slide 31
Slide 31 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
If you were to summarize
web performance in one
metric, what’d be your
pick?
1st/2nd/3rd ANSWERS ↝ REACT
BRUSSELS DISCOUNT CODE 🇧🇪
OTHERS ↝ STICKERS 💅
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Å
Slide 34
Slide 34 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 35
Slide 35 text
#QUOTE 🦄
"My app loads in n seconds…"
— Front-End Engineers, ca. 2022
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
#PROTIP💡
Load metrics are not a single number.
Slide 38
Slide 38 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 39
Slide 39 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
If you were to summarize
web performance in one
metric, what’d be your
pick?
Slide 40
Slide 40 text
MEASURING
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 41
Slide 41 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 42
Slide 42 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Jean-Antoine
Nollet
Slide 43
Slide 43 text
↝ 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
JEAN-ANTOINE NOLLET
Slide 44
Slide 44 text
#PROTIP💡
Browsers now provide us with many
apis to fetch performance metrics
that help site owners make sites
faster.
Slide 45
Slide 45 text
WEB PERFORMANCE STUFF
YOU ALREADY KNOW
MATHEUS ALBUQUERQUE
Slide 46
Slide 46 text
WEB PLATFORM PERF APIS
I DIDN’T KNOW EXISTED
MATHEUS ALBUQUERQUE
Slide 47
Slide 47 text
Measuring
with the platform
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 48
Slide 48 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 49
Slide 49 text
document.hidden;
document.visibilityState;
document.addEventListener("visibilitychange",()
=
>
{
if(document.visibilityState==="hidden"){
console.log("This window is hidden")
}
else{
console.log("This window is visible")
}
})
PAGE VISIBILITY
Slide 50
Slide 50 text
↝ 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
PAGE VISIBILITY
Slide 51
Slide 51 text
↝ SUBSCRIBE TO PERFORMANCE-RELATED EVENTS
↝ CALLBACKS ARE GENERALLY FIRED DURING IDLE
PERIODS
↝ YOU TELL THE OBSERVER WHAT TYPES OF ENTRIES
TO LISTEN FOR
PerformanceObserver
Slide 52
Slide 52 text
const observer
=
new PerformanceObserver((list)
=
>
{
for (const entry of list.getEntries()) {
console.log(entry.toJSON());
}
});
observer.observe({type: 'some-entry-type'});
PerformanceObserver
Slide 53
Slide 53 text
↝ 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
LAYOUT INSTABILITY
Slide 54
Slide 54 text
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'});
LAYOUT INSTABILITY
Slide 55
Slide 55 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 56
Slide 56 text
Å
LAYOUT INSTABILITY
Slide 57
Slide 57 text
Å
LAYOUT INSTABILITY
Slide 58
Slide 58 text
TIMING (1st ACT)
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 59
Slide 59 text
/
/
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'});
USER TIMING
Slide 60
Slide 60 text
USER TIMING
Slide 61
Slide 61 text
USER TIMING + TOOLS
— "USER TIMING AND CUSTOM METRICS" BY STEVE SOUDERS
Slide 62
Slide 62 text
USER TIMING + TOOLS
— "USER TIMING AND CUSTOM METRICS" BY STEVE SOUDERS
Slide 63
Slide 63 text
↝ 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
ELEMENT TIMING
Slide 64
Slide 64 text
This is text I care about.
observer.observe({type: 'element'}); ELEMENT TIMINGSlide 65
Slide 65 text
ELEMENT TIMING + TOOLS
— "ELEMENT TIMING: ONE TRUE METRIC TO RULE THEM ALL?" BY ANDY DAVIES
Slide 66
Slide 66 text
↝ 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
EVENT TIMING
Slide 67
Slide 67 text
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'});
EVENT TIMING
Slide 68
Slide 68 text
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
EVENT TIMING
Slide 69
Slide 69 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 70
Slide 70 text
LONG TASKS
Slide 71
Slide 71 text
↝ 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
LONG TASKS
Slide 72
Slide 72 text
LONG TASKS
Slide 73
Slide 73 text
observer.observe({type: 'longtask'});
LONG TASKS
Slide 74
Slide 74 text
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"
}
]
};
LONG TASKS
Slide 75
Slide 75 text
const profiler
=
new Profiler({ sampleInterval: 10, maxBufferSize: 10000 });
/
/
Do work
.
.
.
const trace
=
await profiler.stop();
sendProfile(trace);
JS SELF-PROFILING
Slide 76
Slide 76 text
↝ PROFILE SPECIFIC COMPLEX OPERATIONS
↝ PROFILE THIRD-PARTY SCRIPTS
↝ COMBINE WITH OTHER EVENTS/IMPORTANT
METRICS, LIKE LONG TASKS OR EVENT TIMING
APIS
JS SELF-PROFILING
Slide 77
Slide 77 text
↝ 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
UserAgentSpecificMemory
Slide 78
Slide 78 text
↝ FORGETTING TO UNREGISTER AN EVENT LISTENER
↝ ACCIDENTALLY CAPTURING OBJECTS FROM AN
IFRAME
↝ NOT CLOSING A WORKER
↝ ACCUMULATING OBJECTS IN ARRAYS
MEMORY LEAKS
Slide 79
Slide 79 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 80
Slide 80 text
const obj
=
{ a: new Array(1000), b: new Array(2000) };
setInterval(()
=
>
{
console.log(obj.a);
}, 1000);
MEMORY LEAKS
Slide 81
Slide 81 text
performance.measureUserAgentSpecificMemory()
UserAgentSpecificMemory
Slide 82
Slide 82 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 83
Slide 83 text
TIMING (2nd ACT)
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 84
Slide 84 text
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'});
RESOURCE TIMING
Slide 85
Slide 85 text
NAVIGATION TIMING
Slide 86
Slide 86 text
const observer
=
new PerformanceObserver((list)
=
>
{
for (const entry of list.getEntries()) {
console.log('Time to first byte', entry.responseStart);
}
});
observer.observe({type: 'navigation'});
NAVIGATION TIMING
Slide 87
Slide 87 text
/
/
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;
NAVIGATION TIMING
Slide 88
Slide 88 text
MEASURE ANY WORK THAT THE SERVER DOES TO
COMPLETE A REQUEST:
↝ ROUTING/AUTHENTICATING THE REQUEST
↝ QUERYING DATABASES/API CALLS TO THIRD-PARTY
SERVICES
↝ RUNNING CONTENT THROUGH TEMPLATING SYSTEMS
SERVER TIMING
Slide 89
Slide 89 text
Server-Timing:
database;dur=123;desc="Database",
templating;dur=56;desc="Template processing"
SERVER TIMING
Slide 90
Slide 90 text
SERVER TIMING
Slide 91
Slide 91 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 92
Slide 92 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 93
Slide 93 text
const batteryInfo
=
await navigator.getBattery();
batteryInfo.addEventListener("chargingchange", listener);
batteryInfo.addEventListener("chargingtimechange", listener);
batteryInfo.addEventListener("dischargingtimechange", listener);
batteryInfo.addEventListener("levelchange", listener);
BATTERY STATUS
Slide 94
Slide 94 text
const networkInfo
=
navigator.connection;
navigator.connection.addEventListener('change', onConnectionChange);
NETWORK INFORMATION
Slide 95
Slide 95 text
NETWORK INFORMATION
const networkInfo
effectiveType: "4g",
rtt: 200,
downlink: 1.65,
saveData: false,
}
Slide 96
Slide 96 text
↝ 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
NETWORK INFORMATION
Slide 97
Slide 97 text
switch (connectionType) {
case "4g":
return ;
case "3g":
return 
;
default:
return 
;
}
NETWORK INFORMATION
Slide 98
Slide 98 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 99
Slide 99 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
Improving
with the platform
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 102
Slide 102 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Resource
Hints
Slide 103
Slide 103 text
↝ 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
RESOURCE HINTS
Slide 104
Slide 104 text
<
!
-
-
Preconnect
-
-
>
<
!
-
-
Preloading
-
-
>
<
!
-
-
DNS Prefetch
-
-
>
<
!
-
-
Prefetch
-
-
>
<
!
-
-
Prerender
-
-
>
RESOURCE HINTS
Slide 105
Slide 105 text
<
!
-
-
Preconnect
-
-
>
<
!
-
-
Preloading
-
-
>
<
!
-
-
DNS Prefetch
-
-
>
<
!
-
-
Prefetch
-
-
>
<
!
-
-
Prerender
-
-
>
RESOURCE HINTS
Slide 106
Slide 106 text
↝ 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
PRECONNECT
Slide 107
Slide 107 text
100MS 200MS 300MS 400MS 500MS 600MS 700MS
HTML
CSS
FONT 1
FONT 2
FONTS START LOADING FONTS RENDERED
Slide 108
Slide 108 text
100MS 200MS 300MS 400MS 500MS 600MS 700MS
HTML
CSS
FONT 1
FONT 2
FONTS START LOADING FONTS RENDERED
FONT 1
FONT 2
Slide 109
Slide 109 text
↝ 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
…AND MUCH MORE!
Slide 110
Slide 110 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Priority
Hints
Slide 111
Slide 111 text
↝ 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
PRIORITY HINTS
Slide 112
Slide 112 text
<
!
-
-
Increase the priority of the LCP image
-
-
>
<
!
-
-
Lower the priority of above-the-fold images
-
-
>
<
!
-
-
Lower the priority of above-the-fold images
-
-
>
Slide 113
Slide 113 text
<
!
-
-
Increase the priority of the LCP image
-
-
>
<
!
-
-
Lower the priority of above-the-fold images
-
-
>
<
!
-
-
Lower the priority of above-the-fold images
-
-
>
Slide 114
Slide 114 text
/
/
Important validation data
const user
=
await fetch("/user");
/
/
Less important content data
const relatedPosts
=
await fetch("/posts/suggested", { priority: "low" });
PRIORITY HINTS
Slide 115
Slide 115 text
/
/
Important validation data
const user
=
await fetch("/user");
/
/
Less important content data
const relatedPosts
=
await fetch("/posts/suggested", { priority: "low" });
PRIORITY HINTS
Slide 116
Slide 116 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Responsive
Images
Slide 117
Slide 117 text
↝ 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.
RESPONSIVE IMAGES
Slide 118
Slide 118 text
RESPONSIVE IMAGES
Slide 119
Slide 119 text
RESPONSIVE IMAGES
Slide 120
Slide 120 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Native Lazy-
Loading
Slide 121
Slide 121 text
NATIVE LAZY-LOADING
Slide 122
Slide 122 text
NATIVE LAZY-LOADING
Slide 123
Slide 123 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 124
Slide 124 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Native
Scheduler
Slide 125
Slide 125 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 126
Slide 126 text
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.
NATIVE SCHEDULER
Slide 127
Slide 127 text
NATIVE SCHEDULER
Slide 128
Slide 128 text
No content
Slide 129
Slide 129 text
↝ CSS TRICKS (E.G. font-display: swap AND
will-change)
↝ IMPORT ON VISIBILITY (USING AN
IntersectionObserver)
↝ CANVAS + WORKERS = OffscreenCanvas
…AND MUCH MORE!
Slide 130
Slide 130 text
↝ 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
…AND MUCH MORE!
Slide 131
Slide 131 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 132
Slide 132 text
SERVICES & OSS
Slide 133
Slide 133 text
#PROTIP 💡
Start with observability services or
libraries like web-vitals. Then create
your own abstractions on top of the
web (e.g. React hooks).
Slide 134
Slide 134 text
Move Fast &
Break Nothing ™
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 135
Slide 135 text
BROWSER COMPATIBILITY
PERFORMANCE OBSERVER
USER TIMING
LONG TASKS
ELEMENT TIMING
RESOURCE TIMING
NAVIGATION TIMING
Slide 136
Slide 136 text
BROWSER COMPATIBILITY
SERVER TIMING
LAYOUT INSTABILITY
JS SELF-PROFILING
PAGE VISIBILITY
BATTERY STATUS
NETWORK INFORMATION
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 139
Slide 139 text
const Video
=
lazy(()
=
>
import("./Video"));
const Preview
=
lazy(()
=
>
import("./Preview"));
const networkInfo
=
useNetworkStatus();
const { With, Switch, Otherwise }
=
usePatternMatch(networkInfo);
MOVE FAST & BREAK NOTHING ™
Slide 140
Slide 140 text
Loading
.
.
.
}>
MOVE FAST & BREAK NOTHING ™
Slide 141
Slide 141 text
No content
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
No content
Slide 144
Slide 144 text
No content
Slide 145
Slide 145 text
No content
Slide 146
Slide 146 text
Why are we
here?
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 147
Slide 147 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Browsers
Slide 148
Slide 148 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Which
browsers are
visiting our
app?
— APP DYNAMICS REPORT, LAST THREE MONTHS
Slide 149
Slide 149 text
BROWSER TOTAL
Slide 150
Slide 150 text
No content
Slide 151
Slide 151 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Devices &
Connection
Slide 152
Slide 152 text
#REALITYCHECK 😳
Phone users experience slow First
Input Delay on 7x more websites.
— Web Almanac By HTTP Archive, 2021
Slide 153
Slide 153 text
BANDWIDTH MIX
— GSM ASSOCIATION, 2022
Slide 154
Slide 154 text
6.07 (MBPS) 44.31 (MBPS)
— THE STATE OF LTE BY OPEN SIGNAL, 2018
THE GLOBAL LTE PICTURE
Slide 155
Slide 155 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
People
Slide 156
Slide 156 text
THE TIME IT TAKES TO LOAD A PAGE
HOW EASY IT IS TO FIND WHAT I'M LOOKING FOR
HOW WELL THE SITE FITS MY SCREEN
HOW SIMPLE THE SITE IS TO USE
HOW ATTRACTIVE THE SITE LOOKS
— SPEED MATTERS, VOL. 3
HOW IMPORTANT IS SPEED?
Slide 157
Slide 157 text
#RESEARCH 📚
40% of Brits reported that they had
become physically violent toward
their computers.
— British Psychology Society, 2009
Slide 158
Slide 158 text
#RESEARCH 📚
A 500ms delay resulted in up to a 26%
increase in frustration and up to an
8% decrease in engagement.
— Radware research, 2013
Slide 159
Slide 159 text
#RESEARCH 📚
Delayed web pages caused a 38%
rise in mobile users' heart rates —
equivalent to the anxiety of watching
a horror movie alone.
— Ericsson ConsumerLab neuro research, 2015
Slide 160
Slide 160 text
#RESEARCH 📚
53% of mobile users abandon sites
that take over 3 seconds to load.
— DoubleClick, 2020
Slide 161
Slide 161 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Business
Slide 162
Slide 162 text
↝ 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
BUSINESS OUTCOMES
— AKAMAI AND CHROME RESEARCH, 2017
Slide 163
Slide 163 text
BUSINESS OUTCOMES
— AKAMAI AND CHROME RESEARCH, 2017
Slide 164
Slide 164 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Closing Notes
Slide 165
Slide 165 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
ALWAYS TRY TO
CORRELATE
BUSINESS
METRICS WITH
PERFORMANCE.
#1
Slide 166
Slide 166 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
DON'T TAKE
FAST NETWORKS,
CPUS AND RAM
FOR GRANTED.
#2
Slide 167
Slide 167 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
TEST ON REAL
PHONES AND
NETWORKS.
#3
Slide 168
Slide 168 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
AVOID THE
OBSERVER
EFFECT.
#4
Slide 169
Slide 169 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
GET RID OF THE
NOISE IN YOUR
METRICS.
#5
Slide 170
Slide 170 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
THERE'S NO
SILVER BULLET.
IDENTIFY YOUR
CORE METRICS.
#6
Slide 171
Slide 171 text
We’re hiring! 🗺
Mostly in…
🇺🇸🇲🇽🇦🇷🇺🇾🇪🇸🇨🇿🇮🇱🇮🇳
Slide 172
Slide 172 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 173
Slide 173 text
WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
Slide 174
Slide 174 text
Å
Slide 175
Slide 175 text
THAT’S ALL, FOLKS! THANKS!
QUESTIONS?
MATHEUS ALBUQUERQUE