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.