Every Second Your Website Takes to Load Costs You Money
Google's own research confirms it: 53% of mobile visitors abandon a site that takes longer than 3 seconds to load. Not 10 seconds. Not 5 seconds. Three seconds. And the average Indian website loads in 8-12 seconds on mobile.
But it's not just about user patience. Since 2021, Google uses Core Web Vitals as a direct ranking factor. Slow websites rank lower. Fast websites rank higher. Page speed affects your SEO, your conversions, your ad costs (Google Ads Quality Score drops with slow landing pages), and ultimately your revenue.
This guide covers every speed optimization technique — from quick wins to advanced optimizations — prioritised by impact so you know what to fix first.
Understanding Core Web Vitals (2025 Update)
Core Web Vitals are Google's specific metrics for measuring user experience. As of 2024, there are three core metrics:
| Metric | What It Measures | Good | Needs Improvement | Poor |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | How fast main content loads | ≤ 2.5s | 2.5s – 4.0s | > 4.0s |
| INP (Interaction to Next Paint) | How fast pages respond to clicks | ≤ 200ms | 200ms – 500ms | > 500ms |
| CLS (Cumulative Layout Shift) | How much the page layout jumps | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
INP replaced FID (First Input Delay) in March 2024. INP is significantly harder to pass because it measures every interaction throughout the page lifecycle, not just the first one. Many sites that passed FID are failing INP.
Priority 1: Image Optimization (Biggest Impact, Easiest Fix)
Images account for 50-80% of total page weight on most websites. Optimising images alone can cut load times by 40-60%.
The Complete Image Checklist
- Convert to WebP format — 30-50% smaller than JPEG/PNG with identical visual quality. Every modern browser supports it.
- Compress aggressively — most images can be compressed 60-80% with no visible quality loss. Use tools like Squoosh or ShortPixel.
- Serve responsive images — don't serve a 2000px image to a 400px mobile screen. Use srcset to serve different sizes for different devices.
- Lazy load below-fold images — add loading="lazy" to every image that isn't visible on the initial screen. This prevents the browser from downloading images the user hasn't scrolled to yet.
- Set explicit width and height — prevents CLS (layout shift) by reserving space before the image loads.
- Use a CDN for image delivery — Cloudflare, Cloudinary, or imgix can automatically optimise, resize, and serve images from servers close to your users.
Image Size Targets
| Image Type | Max File Size | Max Dimensions |
|---|---|---|
| Hero/banner image | 150-200 KB | 1920×1080px |
| Content image | 50-100 KB | 800×600px |
| Thumbnail | 15-30 KB | 300×300px |
| Logo | 10-20 KB | SVG preferred |
| Icon | < 5 KB | SVG preferred |
Priority 2: Eliminate Render-Blocking Resources
When a browser loads your page, it stops rendering whenever it encounters CSS or JavaScript files that must be downloaded and processed first. These are "render-blocking resources" and they're the primary cause of slow LCP.
CSS Optimization
- Inline critical CSS — the CSS needed for above-the-fold content should be inlined directly in the HTML <head>. Tools like Critical or Critters automate this.
- Defer non-critical CSS — use media="print" onload="this.media='all'" for stylesheets only needed below the fold.
- Minify CSS — remove whitespace, comments, and unused rules. CSS Nano or Lightning CSS.
- Remove unused CSS — most sites ship 60-80% unused CSS. PurgeCSS identifies and removes it.
JavaScript Optimization
- Defer non-essential scripts — add defer or async to scripts that don't need to run immediately
- Lazy load third-party scripts — chat widgets, analytics, social embeds don't need to load on initial page render
- Code split — only load the JavaScript needed for the current page, not the entire application
- Minify and compress — use Terser for minification and Brotli/gzip for compression
- Remove unused JavaScript — audit with Chrome DevTools Coverage tab
Priority 3: Server Response Time (TTFB)
Time to First Byte (TTFB) measures how long it takes your server to send the first byte of data. If TTFB is over 600ms, nothing else you optimise will matter because you've already burned half your LCP budget on server response alone.
How to Improve TTFB
- Use a CDN — Cloudflare (free tier is excellent), AWS CloudFront, or Fastly. Serves content from servers geographically close to the user.
- Upgrade hosting — shared hosting (₹99/month) serves 5-20 other websites on the same server. For any business site, use managed WordPress hosting or a VPS at minimum.
- Enable page caching — cached pages serve instantly without hitting the database. WP Super Cache or W3 Total Cache for WordPress. Vercel/Netlify handle this automatically for static sites.
- Database optimization — clean up post revisions, transients, and expired data. Optimise database tables monthly.
- Use HTTP/2 or HTTP/3 — allows multiple files to download simultaneously instead of one at a time.
Priority 4: Font Loading Optimization
Custom fonts are one of the most overlooked performance killers. A single Google Font can add 100-300KB and cause a visible "flash of unstyled text" (FOUT) or "flash of invisible text" (FOIT).
- Self-host fonts instead of loading from Google Fonts CDN — eliminates a DNS lookup and connection
- Use font-display: swap — shows fallback text immediately, swaps to custom font when loaded
- Subset fonts — if you only need Latin characters, don't download Cyrillic and Greek glyphs too
- Use WOFF2 format — 30% smaller than WOFF, supported by all modern browsers
- Limit font variations — every weight (400, 500, 600, 700) is a separate file. Use only what you need.
- Preload critical fonts — add <link rel="preload"> for the 1-2 fonts used above the fold
Priority 5: Fixing CLS (Cumulative Layout Shift)
CLS measures how much your page layout jumps around as it loads. Every image without dimensions, every late-loading ad, every font swap causes layout shift — and users hate it.
Common CLS Causes and Fixes
- Images/videos without dimensions: Always set width and height attributes or use CSS aspect-ratio
- Late-loading web fonts: Use font-display: swap and preload critical fonts
- Dynamically injected content: Ads, cookie banners, notification bars — reserve space for them in the layout
- Late-loading above-fold content: Don't lazy-load images that are visible on initial page load
Priority 6: Fixing INP (Interaction to Next Paint)
INP is the newest Core Web Vital and the hardest to optimise. It measures how quickly your page responds to user interactions — clicks, taps, and keyboard input.
Common INP Problems
- Heavy JavaScript execution on the main thread — long tasks (>50ms) block the browser from responding to user input
- Third-party scripts — chat widgets, analytics, and ad scripts often run heavy JavaScript on every interaction
- Complex DOM — pages with 1,500+ DOM elements are slower to update after interactions
How to Fix INP
- Break long JavaScript tasks into smaller chunks using requestIdleCallback or scheduler.yield()
- Move heavy computations to Web Workers
- Reduce DOM size by virtualising large lists and lazy-rendering off-screen content
- Defer non-critical third-party scripts until after page load
How to Measure Your Speed
- Google PageSpeed Insights — uses real user data (CrUX) plus lab tests. Test every important page, not just the homepage.
- Chrome DevTools Lighthouse — detailed lab test with specific recommendations. Run in incognito mode.
- WebPageTest.org — advanced testing from multiple locations. Use the Mumbai or Chennai server for Indian performance.
- Google Search Console — Core Web Vitals report shows real-world performance across your entire site.
Get Your Website Running at Full Speed
Start with images — it's the biggest bang for your buck. Then tackle render-blocking resources and server response time. CLS and INP fixes come last because they require more technical knowledge.
Need professional help? Our web development team builds performance-optimised websites from the ground up. For existing sites, our technical SEO team handles speed audits and Core Web Vitals fixes. We'll get your site ranking better by making it faster. Get a free speed audit.