How to tackle performance
on the Web
Performance, oh I know
Performance, oh I can
I loaded in 3.14 seconds today
What? Oh man you're slower than me
The why
The what
The how
Impact on users
Impact on business
Improvement scenarios
The why
The what
The how
Metrics, metrics everywhere
Render Metrics
JS Metrics
User Metrics
Are we there yet?
-
Is it happening? -> "Did the navigation start successfully? Has the server responded?"
-
Is it useful? -> "Has enough content rendered that users can engage with it?"
-
Is it usable? -> "Can users interact with the page, or is it still busy loading?"
-
Is it delightful? -> "Are the interactions smooth and natural, free of lag and jank?"
Are we measuring this?
First Paint
(FP)
Is it happening?
First Contentful
Paint (FCP)
First Meaningful
Paint (FMP)
Time to
Interactive (TTI)
Is it happening?
Is it useful?
Is it usable?
Is it delightful?
It's all about the numbers
Function Timing
Function Size
Performance API
performance.timeOrigin
performance.navigation
performance.memory
performance.timing
Time your functions
const markerNameA = "example-marker-a"
const markerNameB = "example-marker-b"
// Run some nested timeouts, and create a PerformanceMark for each.
performance.mark(markerNameA);
setTimeout(function() {
performance.mark(markerNameB);
setTimeout(function() {
// Create a variety of measurements.
performance.measure("measure a to b", markerNameA, markerNameB);
performance.measure("measure a to now", markerNameA);
performance.measure("measure from navigation start to b", undefined, markerNameB);
performance.measure("measure from the start of navigation to now");
// Pull out all of the measurements.
console.log(performance.getEntriesByType("measure"));
// Finally, clean up the entries.
performance.clearMarks();
performance.clearMeasures();
}, 1000);
}, 1000);NetworkInformation API
The why
The what
The how
How can I start?
DevTools
Puppeteer
Lighthouse
*insert live demo here*
Every millisecond matters
-
Serve only the necessary. Don't abuse libraries!
-
External resources are render blocking. Be mindful of what and when you add!
-
JS is Single-Threaded. Have the Event Loop in mind when you write code!
-
HTTP2 is powerful, efficient and can boost data delivery performance. Try to use it when possible.
-
Split your bundles. Serve chunks of code on demand.
-
Be careful at the Critical Render Path. Try to achieve First Meaningful Paint as fast as possible.
-
Reduce your code size as much as possible. Minifiy and Uglify your app.
-
For that extra milisecond, you can send compressed resources
-
Optimize your images. From different resolutions, to different formats
-
GIFs are expensive. And huge. Use videos instead
Q & A
Thank you!
Web Performance
By alexgrigi
