Getting a PWA to Lighthouse 100 without gaming the audit

A Lighthouse 100 is not the goal; a faster real-world experience is. The work that produces the score also produces the improvement. Here’s the shortlist that we use on client audits.

TTFB < 200ms

Serve HTML from a CDN edge (Cloudflare, Vercel, Netlify). Origin-only sites cap at ~600ms TTFB in most geographies, which caps your LCP.

Critical CSS < 30 KB inline

Extract above-the-fold CSS at build time and inline it in the head. Load the rest with media="print" onload="this.media='all'". Most Tailwind-based sites can hit 12–18 KB critical.

Preload one font, subset it

<link rel="preload" href="/inter-var.woff2" as="font" type="font/woff2" crossorigin>

Subset to Latin (or Latin + your primary user locale). A 200KB font file becomes 30KB.

Ship images that render at their intrinsic size

Use <img srcset> with 1x/2x sources. Give every image explicit width and height to reserve space — CLS goes to 0. Serve AVIF with a WebP fallback.

Defer non-critical JS

• Third-party analytics: <script async> and only load after load.
• Chat widgets: load on idle (requestIdleCallback) or first user interaction.
• Framework hydration: prefer islands or partial hydration (Astro, Qwik, Fresh) for content-first pages.

PWA audit specifics

• Manifest must include name, short_name, icons (192 + 512 maskable), start_url, display, background_color, theme_color.
• Service worker must handle a fetch for start_url.
• Meta viewport, theme-color, and Apple touch icon all present.
• HTTPS.

Auditing in CI

Run Lighthouse CI on every PR. Set budgets: LCP < 1.8s, CLS < 0.05, TBT < 100ms. Fail the build on regression. The 100 score matters less than the trendline never going down.