Images
Convert images to WebP or AVIF
Modern image formats reduce file size by 25 to 50 percent compared to JPEG or PNG with the same quality.
Use responsive images with srcset
Serve smaller images to mobile devices. A phone should not download a 2000px hero image.
Lazy load below-the-fold images
Add loading='lazy' to images that are not visible on initial page load.
JavaScript
Remove unused JavaScript
Audit your bundles. Third-party scripts and unused libraries add hundreds of KB of dead weight.
Defer non-critical scripts
Use the defer or async attribute for scripts that do not need to block rendering.
Code split large routes
Split JavaScript by route so users only download the code for the page they are viewing.
CSS
Inline critical CSS
Inline the CSS needed for above-the-fold content directly in the HTML head. Load the rest asynchronously.
Remove unused CSS
Most websites ship 60 to 80 percent unused CSS. Use tools like PurgeCSS to eliminate it.
Use system fonts when possible
System fonts load instantly. Custom fonts add network requests and can cause layout shift.
Server & Delivery
Use a CDN
Serve static assets from a CDN close to your users. Cloudflare, Vercel, and Netlify offer free CDNs.
Enable HTTP/2 or HTTP/3
Modern protocols multiplex requests over a single connection, reducing latency significantly.
Enable browser caching
Set proper Cache-Control headers so browsers do not re-download static assets on every visit.
How to Prioritize Speed Improvements
Not every optimization is worth doing on every site. Focus on what actually affects your users. Run a speed test to identify your specific bottlenecks, then work on the highest impact fixes first.
Do First
- Image optimization
- Enable caching
- Use a CDN
Do Next
- Remove unused JS
- Inline critical CSS
- Defer scripts
Do Later
- Font optimization
- Code splitting
- Preloading