Performance

Performance is what makes a PWA feel app-like rather than web-like. Core Web Vitals quantify the experience — load, responsiveness, and visual stability — while platform primitives like View Transitions and Speculation Rules let a PWA animate between views and pre-render likely next pages. Service-worker caching turns repeat visits into instant loads.

These entries cover the metrics, their thresholds, and the levers that move them.

In this section

Core Web VitalsLCP, INP, and CLS — what each measures, the good thresholds at the 75th percentile, and the PWA-specific levers.

View TransitionsAnimating between DOM states with document.startViewTransition() and the view-transition pseudo-element tree.

Speculation Rules APIDeclaring prefetch/prerender rules in a speculationrules script block, eagerness levels, and why support is Chromium-first with only experimental Safari prefetch support.

The app shell modelHow the app shell pattern caches a page's markup, styles, scripts, and images in a service worker so repeat visits render the UI chrome instantly.

Back/forward cache (bfcache): instant back and forward navigationHow the back/forward cache stores a full in-memory snapshot of a page — including the JavaScript heap — so back and forward navigations can restore it instantly, why an unload listener can block eligibility in some browsers, and how to detect a bfcache restore with the pageshow event's persisted property.

Code splitting with dynamic import() in a PWAHow dynamic import() splits a bundle so startup loads less JavaScript, what that does to INP and LCP, and where it cannot be used in a PWA.

Font and image optimization: font-display, picture, and AVIF/WebPHow the font-display CSS descriptor controls text visibility while a web font loads, how the img loading and fetchpriority attributes and the picture element control image delivery, and how AVIF and WebP compress smaller than JPEG and PNG per MDN.

Lighthouse PWA auditsLighthouse audits pages for performance, accessibility and SEO. Its PWA category was removed, because those checks were tied to Chrome installability criteria.

Navigation preload as a performance fix: starting the network request while the service worker bootsWhy service worker boot-up time (commonly around 50ms on desktop and up to several hundred ms on mobile per web.dev) adds to Time to First Byte for navigations, how enabling navigation preload starts the network request while the worker is still booting, and when it does and doesn't help.

Precaching strategies: shipping the app shell ahead of timeHow precaching populates the cache during service-worker install so a PWA's shell loads instantly and offline — what to precache vs runtime-cache, why content revisioning matters, and how Workbox's precache manifest automates it.

Resource hints: rel="preload" and rel="preconnect"The difference between fetching a specific resource early with rel="preload" and warming up a connection with rel="preconnect", the as/crossorigin attributes that make preload avoid a double fetch, and their Baseline widely-available support per MDN.

Startup performance: paint and navigation timingsMeasure the wait before your app's content appears, using the paint entries first-paint and first-contentful-paint plus the navigation timing milestones.

← Back to the Reference overview.