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

Made with Slides.com

Web Performance

  • 551

More from alexgrigi