#Junior to Senior Handbook
- Performance Performance Tools: Dev Tools: TBD add resources here Exercise: Dev Tools:
View main thread activities in a table to sort activities based on which ones took up the most time.
Analyze frames per second (FPS) to measure whether your animations truly run smoothly.
Monitor CPU usage, JS heap size, DOM nodes, layouts per second, and more in real-time with the Performance Monitor.
Capture screenshots while recording to play back exactly how the page looked while the page loaded, or an animation fired, and so on.
View interactions to quickly identify what happened on a page after a user interacted with it.
Find scroll performance issues in real-time by highlighting the page whenever a potentially problematic listener fires.
View paint events in real-time to identify costly paint events that may be harming the performance of your animations. View main thread activity to view every event that occurred on the main thread while you were recording.
Other Resources:
https://www.thinkwithgoogle.com/feature/mobile/
https://developers.google.com/web/tools/lighthouse/
http://websitespeedranker.com/
https://developers.google.com/speed/pagespeed/insights/
https://www.crazyegg.com/blog/image-editing-tools/
Additional image manipulation tools:
XNConvert: This free, cross-platform tool can handle batched images, and performs resizing, optimization, and other transforms.
ImageOptim: This free tool is available for Mac and as an online service, and is specifically aimed at optimizing images for speed, including metadata removal (discussed above).
ResizeIt: A Mac-only desktop product that lets you change the size of multiple images simultaneously, and can convert file formats at the same time.
PicResize: One of several good browser-based tools that gives you lots of options for cropping, rotating, resizing, adding effects to, and converting images.
Gimp: This ever-popular cross-platform tool just gets better with age. Powerful and flexible, Gimp lets you perform a wide variety of image manipulation tasks including, of course, resizing.
Prefetching, preloading, prebrowsing
HTTP/2 https://developers.google.com/web/fundamentals/performance/http2/
- Make it into an open source project