Presented by Jeff Cross of Nrwl at ng-conf 2021.
We'll be looking at an app that resembles real-world performance issues, and will cover 4 tools to identify the root causes:
- Chrome Devtools:
- Lighthouse for measuring startup performance
- Network tab to understand how resources are being loaded
- Performance tab to see full view of app performance
- Code Coverage to see what CSS and JS aren't being used
- Source Map Explorer to see what's inside bundles
To run the app with production configuration, follow these steps:
npm installnpx nx build victor-videos --prodnpx nx build prod-server --prodnode dist/apps/prod-server/main.js- Open
localhost:3333
The UAAO doc created during the workshop can be viewed here: https://docs.google.com/document/d/1JCC9SuKSgQ3nDltLrJCmTUtWrLJRvWWIX0FdywvNl88/edit?usp=sharing
To learn more about the UAAO process, and see a more thorough example, go to https://go.nrwl.io/uaao.
Here are some of my favorite resources that I refer back to often.
This book is the canonical source for all things related to internet plumbing, written and updated by someone who's at the forefront of Internet standards, Ilya Grigorik (Google). And it's FREE on the web here: https://hpbn.co/
Speaking of Ilya Grigorik, if you want to understand everything that goes into rendering a page, this article by Ilya Grigorik on Chrome Web Fundamentals is your friend: https://developers.google.com/web/fundamentals/performance/critical-rendering-path
This is my cheat sheet for remembering the nuanced behaviors of <link> and <script> tags with different attributes applied. Written by none other than Addy Osmani (Google) https://addyosmani.com/blog/script-priorities/
This Twitter thread includes over 50 insightful Web performance tips. I learned a few things! https://twitter.com/iamakulov/status/1275769142809944064
The video's almost 2 years old, but still a good overview of Chrome's performance tools, straight from the people working on the tools (Paul Irish and Elizabeth Sweeny): https://www.youtube.com/watch?v=mLjxXPHuIJo