Performance Optimization
3 Keys to Performance
- Improve client-side performance
- Improve file transfer over the wire (i.e. network latency)
- Improve backend processing
Focus on the most important potential performance bottlenecks first.
Frontend Performance
Critical Render Path
Optimized Code (Code Splitting)
Progressive Web App
File Transfer
Minimize Files
Minimizing the file size of the different files that we ship to the browser will improve the performance of a website. We can reduce the file size for:
Text. JS, CSS and HTML files.
Images
Image optimization is more difficult, but it's a common reason for bloated websites.
- JPG: complex images
- PNG: limit number of colors that you can use and are smaller in size than JPGs; good for logos
- SVG: vector graphics; designers work with on Adobe, Sketch, etc; you can expand an SVG to several times its size and it will retain its details; can be customized with CSS
- WEBP: similar to PNG but superior lossless and lossy compression for images on the web
- AVIF: better compression efficiency than JPG as well as better detail preservation