{"id":"lb8pucjzpwv2tqr","title":"Website Performance Audit Checklist (2026): What to Fix First on a React Site","slug":"website-performance-audit-2026-react","summary":"I audit React marketing sites in this order: real URL field data first, then LCP and head order, then crawl HTML and INP — with curl and Lighthouse commands you can run today.","imageUrl":"https://briancrabtree.me/images/journal-website-performance-audit-2026-react.webp","category":"Performance","date":"2026-06-11T18:00:00.000Z","featured":false,"likes":10,"author":"Brian Crabtree","content":"

A green Lighthouse score in Chrome is not an audit

\n\n

Running PageSpeed Insights on localhost, or on your laptop over Wi‑Fi, is a smoke test — not a website performance audit. Real users hit production over mobile networks, through your CDN, with your analytics scripts and fonts. Google’s ranking signals mix lab data (Lighthouse) with field data (Chrome UX Report) when enough traffic exists.

\n\n

I wrote about that split in Why PageSpeed Scores Change Every Run and Lab vs Field Data — When PageSpeed Scores Mislead You. This post is the ordered checklist I run on React marketing sites before handoff — and before I tell a client their stack is “fine.”

\n\n

Phase 0 — Audit the real URL

\n\n

Start with the canonical production URL. Not staging. Not localhost.

\n\n
# Quick production sanity\ncurl -sI \"https://yoursite.com/\" | rg -i 'HTTP/|content-type|cache-control'\n\n# PageSpeed lab (replace URL)\n# https://pagespeed.web.dev/analysis?url=https://yoursite.com/
\n\n

Record mobile and desktop lab scores. If CrUX field data exists in PSI, compare LCP, INP, and CLS field percentiles to lab. When they diverge, trust field for user pain and lab for reproducible fixes. See Performance Checks Before Handoff for how I document what changed.

\n\n

Phase 1 — LCP: head order before framework blame

\n\n

On Vite and Create React App builds, the default HTML often places <script type=\"module\"> before the main stylesheet. The browser executes JS, React hydrates, and users see an unstyled flash. Lab LCP suffers. This is fixable without rewriting the app.

\n\n
<link rel=\"preload\" href=\"/assets/index-HASH.css\" as=\"style\">\n<link rel=\"stylesheet\" href=\"/assets/index-HASH.css\">\n<script type=\"module\" src=\"/assets/index-HASH.js\"></script>
\n\n

Never defer main CSS while module JS runs first on marketing pages. Full write-up: Why Your React Site Loads Unstyled (CSS Before Module JS). Pair with hero image discipline in Image srcset and LCP Sizing.

\n\n

Phase 2 — CLS and fonts

\n\n

Layout shift usually comes from late fonts, unsized images, or hydration inserting content above the fold. Audit:

\n\n\n\n

Deeper dives: Font Loading Without Layout Shift, Hydration CLS Fixes for React.

\n\n

Phase 3 — INP and main-thread debt

\n\n

Interaction to Next Paint replaced FID. Slow buttons and menus are long tasks on the main thread — not “maybe the server.” Profile a click in Performance panel; find tasks over 200ms. Defer non-critical work, split handlers, avoid synchronous JSON parse on click.

\n\n

See Interaction to Next Paint (INP) Guide. Third-party widgets often dominate: Tag Manager Performance Tax.

\n\n

Phase 4 — SEO crawl audit (SPAs are not exempt)

\n\n

Performance and SEO share the same first HTML response. If Google gets a thin shell, you can pass Lighthouse and still fail indexing.

\n\n
curl -sL \"https://yoursite.com/journal/my-post/\" \\\n  | rg -i 'canonical|prerender-post-prose|<h2'
\n\n

You want per-URL canonical, article prose in the initial HTML, and trailing-slash consistency. Failure modes: Soft 404 on prerender shells, React SPA crawled not indexed, full audit framing in Technical SEO Audit for React SPAs. After fixes ship, feed discovery with internal links — How I Feed Google New Field Notes Without Another Deploy.

\n\n

Phase 5 — Edge cache and deploy hygiene

\n\n

Static assets with Set-Cookie on every response can force CDN BYPASS. Users re-download the same hashed chunk on every navigation. See Cloudflare Set-Cookie Bypasses Edge Cache and Stale Assets After Deploy.

\n\n

Copy-paste audit checklist

\n\n
- [ ] PSI mobile + desktop on production URL (not localhost)\n- [ ] Compare lab LCP/INP/CLS to CrUX field when available\n- [ ] Main CSS preload + blocking link BEFORE module script\n- [ ] LCP image: dimensions, fetchpriority, modern format (webp/avif)\n- [ ] Fonts: preload critical files; no invisible-text swap on hero\n- [ ] INP: no long tasks on primary CTAs\n- [ ] curl: canonical + prerender prose on key templates\n- [ ] Sitemap URLs match canonical trailing slashes\n- [ ] CDN cache HIT on hashed static assets\n- [ ] Document fixes before handoff (no invented scores)
\n\n

For a shorter SMB-oriented list, see Website Performance Audit Checklist. Live reference: briancrabtree.me — I publish lab scores from PageSpeed Insights only, not datacenter Docker runs.

\n\n

When to hire this out

\n\n

If your audit stalls at “we need a redesign” but the real issues are head order, crawl HTML, and cache headers, you do not need a six-month rebuild. Send your production URL and PSI link at /contact. See services for how I scope React performance and SEO hygiene.

","tags":["pagespeed-insights","core-web-vitals","lighthouse","react","website-audit","performance-audit"],"views":28}