Web Vitals & Lighthouse Optimization Checklist for DomainIndia Sites

# 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: ```html ``` 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: ```html ``` - `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](https://imgproxy.net/) on VPS ### Fix 2 — Preload critical resources ```html ``` ### Fix 3 — Server response time (TTFB) Target: TTFB < 800ms. Slow server = everything slow. - PHP: enable OPcache (see our [OPcache article](https://domainindia.com/support/kb/php-opcache-guide)) - 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: ```html ``` 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: ```bash 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: ```html ``` ### Fix 3 — Break up long tasks Long tasks (>50ms) block interactions. Use `scheduler.yield()` or `setTimeout(0)` to yield: ```javascript 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 ```javascript 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 ```html ``` Browser reserves space before image loads. No jump. ### Fix 2 — Reserve space for ads / embeds ```html ``` ### Fix 3 — Font loading — avoid FOIT/FOUT ```css @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: ```css 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 ## Server-level tweaks ### nginx ```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 ```apache AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json ExpiresActive On ExpiresByType image/webp "access plus 1 year" ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" ``` ## Common pitfalls ## FAQ