The Ultimate Guide to Web Performance. Part II - Images, Fonts | Helpful Web Development

The Ultimate Guide to Web Performance. Part II - Images, Fonts, and #JavaScript

Images

Choose the right image format
Choose the correct level of compression
Use Imagemin to compress images
Defer offscreen images
Properly size images
Replace animated gifs with video
Serve responsive images
Serve images with correct dimensions
Use WebP images
Use image CDNs to optimize images
Use lazy-loading
Lazy-loading video
Use lazysizes to lazy-load images
Compress JPEG images
Optimize PNG images
Optimize SVG vector files

Fonts

Avoid invisible text during font loading
Use preconnect to load fonts faster
Optimize Webfont loading and rendering
Reduce Webfont Size
Keep Webfont size under 300kb

JavaScript

Apply the PRPL pattern
Limit the size of NPM dependencies
Use code splitting
Combine external JavaScript
Remove unused code
Use tree-shaking in Webpack
Minify JavaScript
Serve modern code to modern browsers
See how CommonJS makes your bundles larger
Defer loading JavaScript
Prefer Vanilla JavaScript
Use service workers to cache data
Use web workers
Write optimized code for V8
Compile your JavaScript to faster JavaScript with Prepack
Compile your JavaScript to faster JavaScript with Closure Compiler