Continuous performance

The web applications we build today are getting bigger and bigger, and performance is incredibly important. There are many strategies you can employ and many tools you can leverage to ensure your web app is fast enough. How can you ensure everyone on your team is following the guidelines? How can you avoid deploying something to production that will slow down your web app? In this talk, you'll see how seriously performance is taken at DAZN. We're defining a performance budget, configuring Lighthouse, and running it in the CI before each deployment. The following metrics represent important points in the page load lifecycle. Each one answers questions about the user experience. This analysis was discussed in a speech by Maurizio Mangione at Codemotion Milano 2019.

• Micro Frontend: Architecture Methods

• Micro Frontend: metodiche di architettura

• Time-based metrics:
  
  • WebPageTest
  • LightHouse – plugin chrome: Lighthouse It's a tool used manually or programmatically to provide this type of user-centric metrics. Each metric is described in detail in the Lighthouse documentation: take, for example, Time to Interactive.

• Time-based metrics:
  
  • First happy painting: what's happening? Did the navigation start correctly? Did the server respond?
  • First significant painting: is it useful? Has enough content been made available to allow users to interact with it?
  • Interaction time: Is it usable? Can users interact with the page, or is it still loading?
  • Long activities (absence of): Is it delightful? Are interactions fluid and natural, free of lag and jank?

• Measure Performance:
  
  • Quantity based metrics
  • Bundle size: Another major culprit I've seen causing poor performance on many websites is the way resources are bundled and loaded. I've found the technique of bundling resources into smaller chunks to be quite effective in improving performance. If you can manage it, loading critical resources on page load while loading non-critical resources on demand can make a huge difference. For example, using modern build tools like Webpack , possiamo ottenere questo risultato con tecniche come la Webpack suddivisione del codice e lo scuotimento degli alberi.

• Overall page weight

• Third party

Where to start

• Checklist

• LightHouse

• WebpageTest

For example, using integrations Lighthouse come Foo , you can automatically test your website's performance over time. It provides a historical view of key metrics such as 'First Significant Draw', 'First Idle CPU', 'First Happy Draw', 'Speed ​​Index', 'Interactivity Time', and 'Estimated Input Latency'.

Website performance has become increasingly important in modern web development. Given the different ways users view and interact with websites, we need to examine website performance from a user-centric perspective.