User Timing API
Wilson Mendes
@willmendesneto
Google Developer Expert Web technologies
because #perfmatters
HI, IT'S ME
DURING THE FREE TIME...
How long is 2 seconds?
Speed feedback
Speed metrics
Budgets
~1.2 seconds
~1.4 seconds
wpostats.com
How about 5G ?
A real picture of internet in the world
How faster is that?
Download speeds for anywhere from 100 Mb to 10Gbit per second. 5G is expected to be as much as 10-100 times faster than 4G. Plus: 4G gets improved as a side effect as well
Downloading 1 episode of Game of Thrones within 90 sec (4K) or 35 sec (1080p), or fetching the entire season in 15 mins (4K)
You ready ?
4
64
Measuring Performance
A real picture of internet in the world
Step 1: Define baselines
Page load errors
Web Vitals
Core Web Vitals
Core Web Vitals
Core Web Vitals
Core Web Vitals
📈 Real user Monitoring
Setting performance budget
async load components
critical path management
optimistic preloading
What else?
What if we missed
something?
Which metric is the
best for my app ?
Not sure ?
Just don't measure technology
🙂
👑 King 👑
User experience
is the
Title Text
User Timing API
...can be a good solution
Marks and measures
Performance timeline API
measure javascript execution
simple instrumentation
UX Speed metrics
Concerns
Chaos scenario
...will help you in this journey
standard
standard
standard
Works on Client/Server
Small bundle
Lightweight
Concerns
Perf-marks in action
Demo Time
shut up and show me your code
<quick-recap/>
User perception matters
Always measure
Define baselines
Validate impact of techniques
Standards will always help you
Next steps
... or "Measurements will drive ... ?"
Performance priorization
Alerts & monitoring
A/B Test
Faster UX by ... design?
Perf-Marks NPM package
Web Perf - cases & experiments
Web.Dev - Performance
Thank you 👋
Wilson Mendes
@willmendesneto
Google Developer Expert Web technologies
User Timing API: because performance matters
By willmendesneto
User Timing API: because performance matters
Are you working with large frontend application and you are facing problems in your project? Problems like memory leaks, and performance bottlenecks can be real issues in your site and there are some of the features there are really useful to improve the performance of your web app… but what if it’s not enough? How to combine performance validation between backend and frontend via instrumentation, analysing and improving the reliability of your web app by user journey improvements? What if you want to track a specific feature in your code? In this talk, I will share my experience and decisions creating frontend components and applications focused on performance, how to manage quality, monitoring, and other techniques that will make your application blaze fast!
