Compress images to WebP/AVIF, enable browser caching, use CDN, minify CSS/JS, implement lazy loading, inline critical CSS.
Images typically account for 50-70% of page weight. Converting to WebP alone can reduce total page size by 30%+. Start there for the biggest ROI with the least effort.
Run pagespeed.web.dev for quick scores. For deeper analysis, use webpagetest.org — select a mobile device and a slow 3G connection to simulate worst-case scenarios. Check the waterfall chart to find the biggest bottlenecks.
Use Squoosh.app for individual images, or ShortPixel/Imagify for bulk conversion in WordPress. Set quality to 80 for WebP (visually lossless). Use <picture> tag with WebP source and JPEG fallback for older browsers.
Add loading="lazy" to all <img> tags below the fold. Do NOT lazy-load your hero image or LCP element — these should load eagerly. Modern browsers support native lazy loading with no JavaScript needed.
In WordPress: use WP Rocket or Autoptimize plugins. For custom sites: use build tools like Vite, Webpack, or esbuild. Minification removes whitespace and comments; bundling reduces HTTP requests.
Cloudflare free tier: sign up, add your domain, change nameservers. Enable "Auto Minify" for CSS/JS/HTML and "Brotli" compression. This alone can cut load times by 40-60% for users far from your server.
Check if compression is enabled at tools.keycdn.com/brotli-test. In Apache: enable mod_deflate. In Nginx: add "gzip on;" and "brotli on;" directives. Cloudflare enables Brotli automatically.
Use tools like critical (npm package) to extract above-the-fold CSS. Inline it in the <head> and defer the full stylesheet with media="print" onload="this.media='all'". This eliminates render-blocking CSS.
Generate page speed optimization code for my [CMS/FRAMEWORK] website: 1. Image optimization script (convert to WebP, generate responsive srcset) 2. Critical CSS extraction and inline loading approach 3. JavaScript defer/async strategy with code example 4. Browser caching headers (.htaccess or nginx config) 5. Lazy loading implementation for images and iframes 6. Resource hints: preconnect, prefetch, preload for key assets 7. CDN configuration recommendations
Track your progress and get guided through every step.
Open Interactive Tool