Page speed isn't just about user experience — it directly impacts your search rankings, conversion rates, and bounce rates. Google uses Core Web Vitals as ranking signals, and research consistently shows that faster pages convert better. This guide gives you a concrete, prioritized plan to speed up your website.
Measure Before You Optimize
Before changing anything, establish a baseline. Use our Page Speed Checker to measure your current performance score and Core Web Vitals. Run tests on both mobile and desktop — mobile scores are typically lower and more impactful for SEO since Google uses mobile-first indexing.
The key metrics to focus on:
- LCP (Largest Contentful Paint): How long until the largest visible element loads. Target: under 2.5 seconds
- CLS (Cumulative Layout Shift): How much the page layout shifts during loading. Target: under 0.1
- INP (Interaction to Next Paint): How quickly the page responds to user interactions. Target: under 200ms
1. Optimize Images (Biggest Impact)
Images are typically the largest assets on a page and the easiest to optimize. Three changes can dramatically reduce image weight:
Use Modern Formats (WebP/AVIF)
WebP images are 25-35% smaller than JPEG at equivalent quality. AVIF is even smaller (but has less browser support). Convert your images with our Image to WebP Converter.
Compress Aggressively
Most images are saved at higher quality than necessary. A JPEG at 80% quality is visually indistinguishable from 100% but can be 60% smaller. Use our Image Compressor to reduce file sizes without visible quality loss.
Specify Dimensions
Always include width and height attributes on images. This prevents layout shifts (CLS) because the browser knows how much space to reserve before the image loads.
Lazy Load Below-the-Fold Images
Add loading="lazy" to images that aren't visible on initial load. This defers their download until the user scrolls near them, reducing initial page weight.
2. Minify CSS and JavaScript
Minification removes whitespace, comments, and unnecessary characters from your code without changing functionality. It typically reduces file sizes by 20-40%.
Minify your stylesheets with our CSS Minifier and scripts with the JavaScript Minifier. Most build tools (Webpack, Vite, Next.js) do this automatically for production builds, but it's worth checking that minification is actually enabled.
3. Eliminate Render-Blocking Resources
CSS and synchronous JavaScript in the <head> block page rendering — the browser can't display anything until they finish loading.
- Inline critical CSS: Extract the CSS needed for above-the-fold content and inline it in a
<style>tag. Load the rest asynchronously - Defer JavaScript: Add
deferorasyncto<script>tags.defermaintains execution order;asyncdoesn't - Remove unused CSS: Tools like PurgeCSS can strip CSS rules that no page actually uses — often removing 80%+ of a CSS framework
4. Enable Caching
Proper cache headers mean returning visitors load your site almost instantly because assets are served from their browser cache instead of your server.
- Static assets (images, fonts, JS, CSS with hashed filenames):
Cache-Control: public, max-age=31536000, immutable— cache for one year - HTML pages:
Cache-Control: public, max-age=0, must-revalidate— always check for updates but use cached version if unchanged (via ETag)
5. Use a CDN
A Content Delivery Network serves your assets from servers geographically close to each user. A visitor in Tokyo gets assets from a Tokyo server instead of your origin server in Virginia. This dramatically reduces latency for global audiences.
Free CDN options include Cloudflare (full site), and Vercel/Netlify (built into hosting). For images specifically, consider an image CDN like Cloudinary or imgix that also handles resizing and format conversion on the fly.
6. Reduce Server Response Time
Your server should respond in under 200ms. If TTFB (Time to First Byte) is slow:
- Use static generation: Pre-render pages at build time instead of generating them per request
- Add server-side caching: Cache database queries and API responses
- Upgrade hosting: Shared hosting is often the bottleneck. A VPS or edge platform is worth the cost
- Optimize database queries: Add indexes, avoid N+1 queries, use connection pooling
7. Optimize Fonts
- Use
font-display: swap: Shows fallback text while the custom font loads, preventing invisible text - Subset fonts: If you only use Latin characters, don't load the full CJK character set
- Preload key fonts:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> - Use system fonts: The fastest font is no custom font at all. System font stacks are perfectly good for many sites
8. Prevent Layout Shifts (CLS)
- Set explicit dimensions on images and videos
- Reserve space for ads and embeds before they load
- Use CSS
aspect-ratiofor responsive containers - Avoid inserting content above existing content after page load
- Use
font-display: optionalif font-swap causes layout shifts
Measure Your Progress
After implementing changes, re-test with our Page Speed Checker on both mobile and desktop. Compare your before and after scores. Focus on getting all three Core Web Vitals into the "good" range (green). Keep iterating — performance optimization is an ongoing process, not a one-time fix.