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?
Anything that could be done better? :)
Help us improve this page. You can edit this page on GitHub or provide anonymous feedback below.