So today I attended Umar Hansa’s workshop on Chrome dev tools. Although his hand-outs contain lots of information, I made the following extra notes:
- Set timestamps in code with Performance marks.
- React also recommends using dev tools to profile components.
- Send (performance?) statistics to the server when the browser is idle using navigator.sendBeacon.
- To see what the browser actually does when changing or applying a CSS style is made clear with CSS triggers. Note the differences between browsers!
- Using font-display: swap we can tell the browser to apply a default font while waiting for the custom font to load.