Join us for a final tech meetup before the summer social event!
This time we'll tackle multiple perspective in this open discussion about optimizations and trade-offs in web performance.
Make sure we'll cover things like:
- The critical rendering path
- Browser hints and optimization techniques
- JavaScript loading and execution times
- Image optimizations
- Reducing the size of your app
- Rendering at 60fps
- Tools and platforms
- Which are the critical resources
- How we can use
asyncanddeferto remove JS from the critical path - Using resource hints to preload critical resources
- Inline critical css if possible - https://jonassebastianohlsson.com/criticalpathcssgenerator/
- Minify + Gzip + Code Split (using dynamic imports in webpack)
- For React try https://github.com/jamiebuilds/react-loadable
- Leverage tree-shaking
- Use the picture element to load different modern encodings (webp, mozjpeg, etc.)
- Use srcset to specify responsive images
- Try out lazysizes for lazy loading offscreen images
- A great ebook by Addy Osmani - https://images.guide/
- Chrome DevTools (including the Audit tab - Lighthouse
- https://webpagetest.org/
- https://gtmetrix.com/
- https://github.com/webpack-contrib/webpack-bundle-analyzer
- https://github.com/wix/import-cost
- More about Response, Animation, Idle, Load
- Favor css animations based on opacity and transforms to enable fast GPU driven animations
- Educate people
- Visualize performance costs
- Enforce performance metrics with tools