Recipes

Single-Page Applications

Scan React, Vue, Angular, and other SPAs with client-side routing. SPAs require JavaScript execution for link discovery and accurate Core Web Vitals measurement.

Enable JavaScript Execution

Allow Puppeteer to execute JavaScript before extracting page content:

import { defineUnlighthouseConfig } from 'unlighthouse/config'

export default defineUnlighthouseConfig({
  scanner: {
    skipJavascript: false, // Enable JS execution for SPAs
  },
})

Wait for Hydration

SPAs often need time to hydrate. Configure wait conditions:

export default defineUnlighthouseConfig({
  scanner: {
    skipJavascript: false,
  },
  lighthouseOptions: {
    maxWaitForLoad: 45000, // Wait up to 45s for page load
  },
})

Provide URLs Manually

If automatic crawling misses routes, provide them explicitly:

export default defineUnlighthouseConfig({
  urls: [
    '/',
    '/about',
    '/products',
    '/contact',
  ],
  scanner: {
    skipJavascript: false,
  },
})

SPA Performance Considerations

SPAs typically have worse LCP scores because:

  • Content renders after JavaScript execution
  • Initial HTML is often empty or minimal
  • Hydration adds to INP delays

Consider SSR or SSG for content-heavy pages to improve Core Web Vitals.

Enabling JavaScript execution increases scan time but is necessary for accurate SPA scanning.
Did this page help you?