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!

  • 9,194