Why this matters more than you think
Google's Core Web Vitals are now a confirmed ranking factor. The three metrics that matter:
- LCP (Largest Contentful Paint) — under 2.5s = good, under 1.0s = excellent
- CLS (Cumulative Layout Shift) — under 0.1 = good, near 0 = excellent
- INP (Interaction to Next Paint) — under 200ms = good, under 100ms = excellent
Beyond ranking: a 100ms speed improvement can lift conversion by 1–2%. For a site doing ₹10L/month in revenue, that's ₹10K–20K in pure margin per 100ms shaved. A 2-second-to-1-second improvement is worth real money.
The fast-site checklist (in priority order)
1. Pick the right tech foundation
Your foundation determines your ceiling. Best to worst for performance:
- Static HTML / Astro — fastest possible
- Next.js with Static Site Generation — extremely fast
- Framer / Webflow — fast enough
- WordPress — slow by default, hard to fix
- Wix / Squarespace — slow, no real fix
2. Optimise images aggressively
Images are typically 60–80% of a page's weight. Three rules:
- Use modern formats: WebP or AVIF, not PNG/JPEG
- Resize images to the actual display size — don't ship a 4000×3000 photo to render at 800×600
- Use
loading="lazy"for below-the-fold images
Tools: Squoosh.app (free, manual). Vercel / Cloudinary / ImageKit do this automatically.
3. Self-host fonts (or use system fonts)
Google Fonts via CDN adds 200–500ms of waterfall time on first load. Self-host the font files, use font-display: swap, and preload only the weights you actually use.
Or skip custom fonts entirely. The system font stack is faster and looks great if you use type scale and weight smartly.
4. Inline critical CSS, defer the rest
Above-the-fold styling should be inline in the <head>. The rest can load asynchronously. Most static-site frameworks do this automatically; WordPress doesn't.
5. Avoid render-blocking JavaScript
Every <script> tag without async or defer blocks rendering. Audit your site: how many third-party scripts are running before content renders? Each one delays LCP.
Common culprits: chat widgets (Intercom, Crisp), heatmap tools (Hotjar, Microsoft Clarity), analytics tags. Decide which truly need to load early; defer the rest.
6. Use a CDN with edge locations
If your site is hosted in one region (say, AWS Mumbai) and a user visits from Singapore, every asset round-trips across the ocean. CDNs put your static assets on edge servers worldwide.
Vercel, Cloudflare, Netlify all do this for free. Use one.
7. Eliminate layout shift
CLS happens when content jumps around as the page loads. Common causes:
- Images without width/height attributes
- Fonts that swap and shift text
- Banner ads loading after content
- Buttons that resize when icons load
Set explicit dimensions on every image. Reserve space for ads and embeds. Use font-display: optional if your custom font is non-critical.
8. Use schema.org structured data
Doesn't directly affect speed, but it's free SEO that almost no small sites do. Add Organization, WebSite, Article, FAQPage schemas. You'll show up with rich results that take 2× the screen space.
How to measure
- Run Google Lighthouse (in Chrome DevTools) — gives you a starting score
- Use PageSpeed Insights ([pagespeed.web.dev](https://pagespeed.web.dev)) — gives field data from real users
- Set up Core Web Vitals reporting in Google Search Console
- Re-run weekly. Speed regresses if you don't watch it.
Realistic targets for an indie startup site
- Lighthouse Performance: 95+
- LCP: under 1.5s
- CLS: under 0.05
- INP: under 150ms
- Total page weight: under 500KB
Hitting these isn't hard with a hand-coded site. It's nearly impossible on default WordPress.