Web Vitals & Lighthouse Optimization Checklist for DomainIndia Sites

The three Core Web Vitals (2026)

75th percentile of real users over 28 days is what Google uses. "Works on my fast laptop" ≠ "good CWV".

Measure first

Tools

1. PageSpeed Insights — enter URL, get lab + field data (pagespeed.web.dev)
2. Chrome DevTools Lighthouse — local tests, simulated throttling
3. Google Search Console — Core Web Vitals report (real users, aggregated)
4. WebPageTest — deep filmstrip, waterfall, comparison

Run PageSpeed Insights on 5-10 key pages; log scores. Re-measure after each optimisation.

Real User Monitoring (RUM)

Lab data is misleading. Install RUM to see real user experience:

<script type="module">
import { onLCP, onINP, onCLS } from 'https://unpkg.com/web-vitals@4?module';

function sendToAnalytics({ name, value, id, rating }) {
  // Your analytics endpoint, Google Analytics 4, or self-hosted Plausible
  fetch('/api/vitals', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name, value, id, rating, url: location.href }),
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
</script>

Or use free services: Cloudflare Web Analytics, Plausible Analytics Vitals.

Fix LCP (Largest Contentful Paint)

LCP element is usually a hero image or above-the-fold text block.

Fix 1 — Image optimisation

• Use modern formats: WebP / AVIF (30-50% smaller than JPEG)
• Serve correctly-sized images (don't serve 4000px to a 400px viewport)
• Use srcset for responsive:

<img src="hero.webp"
     srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
     sizes="(max-width: 600px) 400px, 800px"
     width="800" height="600"
     fetchpriority="high"
     alt="Hero">

• fetchpriority="high" on LCP image — tells browser to prioritise

On DomainIndia hosting:

• cPanel has LSCache (LiteSpeed) which auto-generates WebP — enable in LSCache → Image Optimization
• Use Cloudflare's Polish (Pro plan $25/mo) for automatic image format conversion
• Or image CDN: Cloudinary, Imgix, or self-hosted imgproxy on VPS

Fix 2 — Preload critical resources

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/hero.webp" as="image">

Fix 3 — Server response time (TTFB)

Target: TTFB < 800ms. Slow server = everything slow.

• PHP: enable OPcache (see our OPcache article)
• Node.js: use clustering or worker threads
• Full-page cache at Cloudflare for static pages
• Upgrade shared → VPS if CPU is saturated

Fix 4 — Critical CSS inline

Inline above-the-fold CSS, defer the rest:

<style>
  /* 5-10 KB of critical CSS for first paint */
  body { font: 16px Inter; margin: 0; }
  .hero { background: #0f172a; color: white; padding: 40px; }
  ...
</style>
<link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Tools: critical npm package, Penthouse, or PurgeCSS.

Fix INP (Interaction to Next Paint)

Replaces FID in 2024. Measures the slowest interaction (clicks, taps, keypresses).

Fix 1 — Less JavaScript

Most INP issues come from JS blocking the main thread. Audit bundles:

npx @next/bundle-analyzer
# or for Vite:
npx vite-bundle-visualizer

Remove unused libraries. Use import() for code-splitting non-critical routes.

Fix 2 — Defer third-party scripts

Analytics, chat widgets, social share buttons — defer:

<script src="https://third-party.com/widget.js" defer></script>
<!-- or load after interaction: -->
<script>
  setTimeout(() => {
    const s = document.createElement('script');
    s.src = 'https://third-party.com/widget.js';
    document.body.appendChild(s);
  }, 3000);
</script>

Fix 3 — Break up long tasks

Long tasks (>50ms) block interactions. Use scheduler.yield() or setTimeout(0) to yield:

async function processBigList(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    if (i % 50 === 0) await scheduler.yield?.() ?? new Promise(r => setTimeout(r));
  }
}

Fix 4 — Debounce input handlers

let timer;
input.addEventListener('input', (e) => {
  clearTimeout(timer);
  timer = setTimeout(() => search(e.target.value), 200);
});

Fix CLS (Cumulative Layout Shift)

Content jumping around = bad CLS.

Fix 1 — Always set width/height on images

<!-- BAD -->
<img src="pic.jpg">

<!-- GOOD -->
<img src="pic.jpg" width="800" height="600" alt="">

Browser reserves space before image loads. No jump.

Fix 2 — Reserve space for ads / embeds

<div style="min-height: 250px; background: #f5f5f5;" id="ad-slot"></div>

Fix 3 — Font loading — avoid FOIT/FOUT

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;   /* show fallback, swap when loaded */
}

Use size-matched fallbacks to avoid CLS:

body {
  font-family: 'Inter', 'Adjusted Arial', sans-serif;
  /* 'Adjusted Arial' defined via @font-face with ascent/descent overrides to match Inter metrics */
}

Fix 4 — Don't inject content above existing content

Adding a cookie banner on top, pushing page down = CLS. Use position: fixed for banners.

Quick wins for most DomainIndia sites

1. Enable Cloudflare → orange cloud + Caching Level: Standard + Auto-minify JS/CSS/HTML
2. Enable Brotli compression in nginx/Apache
3. Convert hero images to WebP + set explicit width/height
4. Add loading="lazy" to below-fold images (browser-native lazy load)
5. Defer all JS except inline critical path
6. Preload hero image + key fonts
7. Inline critical CSS (first 5-10 KB)
8. Upgrade PHP to 8.3+ (30-50% faster than 8.0)
9. Enable OPcache with tuned settings
10. Consider VPS if shared hosting TTFB > 600ms

Server-level tweaks

nginx

# gzip + brotli
gzip on;
gzip_comp_level 6;
gzip_types text/plain text/css text/xml application/javascript application/json image/svg+xml;

# brotli (if ngx_brotli installed)
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/javascript application/json image/svg+xml;

# Cache static assets
location ~* .(jpg|jpeg|png|gif|webp|avif|css|js|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Apache/.htaccess

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json
</IfModule>

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
</IfModule>

Common pitfalls

FAQ