- Use CDN (content delivery network)
- collection of global servers sharing website’s static assets (CSS, JS)
- Minify CSS and JS
- Decrease HTTP request count
- browser Caching
- CSS, JS, images, media files can have expiration of max 1 year
- Compress images and optimize files
- can use fonts (eg. FontAwesome) instead of images
- keep only necessary images
- can use CSS file for color background or gradients instead of images
- right format images
- PNG for fewer than 16 colors
- JPEG for photographs
- Don’t use blocking JS
- Can use gzip compression
- Implement AMP (Accelerated Mobile Pages)
- Use CSS sprites
- means combining multiple images into a single image file
- Use lazy loading
- load content when required
- Use Fonts correctly
- Types:
- Web Font: downloaded from the internet/server
- System Font: already installed in the machine
- Use WebFont for brand consistency
- System Font is the best since it does not require any resources and can be used as fallback
- Use WebFont format: WOFF2 (others are TTF, WOFF, EOT)
- WOFF2 has wide browser support and best compression
- Use WebWorker to do computationally expensive task
- WebWorker has separate thread
- It can communicate with the main thread via messaging pipeline
Resources