Otherwise, try running Lighthouse in the Timespan mode.
If you followed step 2 above to instrument interactions, you’re all good! Use that. Synthetic testing means “running performance tests in a virtual machine, on demand”. In this case, you’ll need to do synthetic testing instead. You set up a CI check, and the CI immediately tells everyone if their PR breaches performance budgets
You want to ensure your team remembers to keep the app fast. You run npm run test-perf, and the command tells you whether the refactoring made the codebase faster or slower You refactor the codebase and want to check how that affected the performance. Sometimes, it’s useful to catch regressions before they happen. (This is known as “RUM”, or “Real User Monitoring”.) RUM catches performance regressions right after they happen. With the steps above, you’ll start collecting metrics from real users. or check the metrics on weekly/bi-weekly team sync-ups. set up alerts to get notified when the metrics get worse. Now you’re all set! Make sure to monitor these metrics regularly and – if they get worse – figure out why. Import afterFrame from 'afterframe' function measureInteraction ( ) Step 5: Keep An Eye On The Metrics Here’s how this might look with Gmail’s Compose button: For example, for an app like Gmail, that could be:įor every interaction, find the moment when it starts – and wrap it with code that would measure its duration. (Have your experience to add? Please share it on Twitter!) Step 1: Pick the Most Important Interactionsīefore you start monitoring render performance, you need to decide what to monitor.įor that, pick the interactions you care about the most. This guide should be a good starting point for setting up your monitoring system, but it might (or might not!) need fine-tuning to be useful. This means I might not be aware of some edge cases or pitfalls. However, I haven’t had a chance to implement this in a real-world app myself yet. It’s how I would approach setting up performance tests today. These steps are based on the experiences of clients I worked with, plus my experiments in the field. To track how your app behaves after it loads, you’d need to do some work.ĭisclaimer: the solution below is not battle-tested. There’s nothing like that for render performance. With loading performance, there’s a whole lot of tools you could just plug in and start collecting data. Tracking React render performance is challenging. How does this work with React 18’s concurrent rendering?. Step 1: Pick the Most Important Interactions. Now, you want to keep an eye on the app’s performance – set up measurements around interactions and learn if the app gets slower again. Say you just finished optimizing your React app and making every button click as fast as possible.
0 kommentar(er)
