senternet-site-lighthouse

Measure with the PageSpeed Insights API on mobile, then work through the LCP, FCP, CLS, and TBT checklists. Key fixes include preloading the hero image, using hydrateRoot instead of createRoot, deferring third-party scripts until after window.load, and splitting vendor code with Rollup manualChunks.

Create an API key restricted to the PageSpeed Insights API using gcloud alpha services api-keys create, then call the runPagespeed endpoint with curl passing your URL, mobile strategy, and key. Parse the JSON response with python3 to print category scores and core metrics.

PSI differs from local runs due to CDN cold cache after deploys, geographic variance across CDN points of presence, and lazy-loaded third-party scripts that never fire in audits. Wait 10-15 minutes after deployment and re-run before treating the gap as a real regression.

Yes, a dedicated Next.js track covers shrinking the client boundary, using next/image priority only on the LCP image, next/font for self-hosted fonts, and lazyOnload for third-party scripts. Test against npm run build && npm start rather than a served static directory.

Common causes include using createRoot instead of hydrateRoot on prerendered DOM, missing preload hints for the hero image, hashed asset filenames that break preload matching, and render-blocking scripts like GA loaded in the head. Each has a specific fix in the LCP checklist.