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?