Service workers enable the browser to serve cached assets without hitting the network on repeat visits — a capability that directly reduces ISO-25010 resource-utilisation for returning users. Marketing pages attract a significant proportion of return visitors from email campaigns, social retargeting, and direct traffic, yet without a service worker those visitors re-download every JavaScript bundle, CSS file, and image on each visit as if they've never been to the site. On an 800KB page, that's approximately 400ms of avoidable latency on 4G. Service worker caching also enables offline-capable page loads, which improves perceived reliability and supports scenarios like email campaigns opened in low-signal environments.
Medium because absent service worker caching wastes bandwidth on repeat visits and adds unnecessary latency, but the impact is bounded to returning users rather than affecting first-visit acquisition.
Add next-pwa for zero-configuration service worker caching in Next.js — it caches static assets and pages automatically based on build output.
npm install next-pwa
// next.config.ts
import withPWA from 'next-pwa'
export default withPWA({
dest: 'public',
disable: process.env.NODE_ENV === 'development',
// Automatically caches JS chunks, CSS, and static images
})({
// ...your existing Next.js config
})
Verify the service worker is registered by opening Chrome DevTools → Application → Service Workers after a production build. For non-Next.js projects, use Workbox directly: npm install --save-dev workbox-cli && npx workbox generateSW workbox-config.js.
ID: marketing-page-speed.loading-strategy.service-worker-caching
Severity: medium
What to look for: Service workers enable aggressive caching for repeat visitors, who represent a significant portion of marketing site traffic (return visitors, email campaign targets, etc.). Check for: (1) public/sw.js or public/service-worker.js, (2) next-pwa in package.json dependencies and config, (3) Workbox configuration (workbox-config.js, workbox-webpack-plugin), (4) PWA manifest (public/manifest.json or app/manifest.ts). Also check if the service worker, if present, is actually registered in code (look for navigator.serviceWorker.register). Count all instances found and enumerate each.
Pass criteria: A service worker is registered and configured to cache static assets and/or marketing page HTML for repeat visitors. Cached resources are served from the service worker cache on repeat visits, bypassing the network. At least 1 implementation must be confirmed.
Fail criteria: No service worker present. Repeat visitors re-download all assets on every visit — no benefit from the fact that they've been to the site before.
Skip (N/A) when: Site is served entirely from a CDN with aggressive browser cache headers (max-age=31536000) for all static assets, making a service worker additive rather than necessary.
Detail on fail: "No service worker detected. Repeat visitors download all assets fresh on every visit. At 800KB page weight, this adds ~400ms on 4G for returning users."
Remediation: Add next-pwa for zero-config service worker in Next.js:
npm install next-pwa
// next.config.ts
import withPWA from 'next-pwa'
export default withPWA({
dest: 'public',
disable: process.env.NODE_ENV === 'development',
// caches static assets, JS, CSS automatically
})
For non-Next.js projects, use Workbox directly:
npm install --save-dev workbox-cli
npx workbox generateSW workbox-config.js