Mobile site stuck during load with Speed Kit / Nuxt Booster enabled #1367
Description
When using nuxt-speedkit in a Nuxt 3 project, the site gets stuck and does not load on many Android devices. The issue occurs only when Speed Kit is enabled. If Speed Kit is removed from nuxt.config, the site loads normally on the same devices.
This behavior is reproducible across multiple projects and also occurs when using nuxt-booster as-well, indicating a possible mobile-specific issue related to Speed Kit initialization or detection logic.
We have the following production sites running on Nuxt 3.5.3 with speed-kit ^3.0.0-next.20. On certain devices, the sites fail to load and get stuck during the loading phase.
Affected devices include Google Pixel 8 Pro, Pixel 10, Realme 12, One plus 9 pro and Samsung S22 Ultra .
Affected sites:
https://oceancountybjj.com/
https://mchughbjj.com/
To Reproduce
Steps to reproduce the behavior:
1-Create a Nuxt 3.5.3 project using nuxt-speedkit (^3.0.0-next.20)
2-Add the following Speed Kit configuration in nuxt.config
`speedkit: {
detection: {
performance: true,
browserSupport: true
},
performanceMetrics: {
device: {
hardwareConcurrency: { min: 2, max: 48 },
deviceMemory: { min: 2 }
},
timing: {
fcp: 800,
dcl: 1200
}
},
fonts: [
{
family: 'Lato',
locals: ['Lato'],
fallback: ['Roboto', 'sans-serif'],
variances: [
{
style: 'normal',
weight: 400,
sources: [
{ src: '@/assets/fonts/lato-v22-latin-regular.woff', type: 'woff' },
{ src: '@/assets/fonts/lato-v22-latin-regular.woff2', type: 'woff2' }
]
},
{
style: 'normal',
weight: 700,
sources: [
{ src: '@/assets/fonts/lato-v22-latin-700.woff', type: 'woff' },
{ src: '@/assets/fonts/lato-v22-latin-700.woff2', type: 'woff2' }
]
}
]
},
{
family: 'Khand',
locals: ['Khand'],
fallback: ['Roboto', 'sans-serif'],
variances: [
{
style: 'normal',
weight: 600,
sources: [
{ src: '@/assets/fonts/khand-v12-latin-600.woff', type: 'woff' },
{ src: '@/assets/fonts/khand-v12-latin-600.woff2', type: 'woff2' }
]
}
]
},
{
family: 'Allerta Stencil',
locals: ['Allerta Stencil'],
fallback: ['Roboto', 'sans-serif'],
variances: [
{
style: 'normal',
weight: 400,
sources: [
{ src: '@/assets/fonts/allerta-stencil-v16-latin-regular.woff', type: 'woff' },
{ src: '@/assets/fonts/allerta-stencil-v16-latin-regular.woff2', type: 'woff2' }
]
}
]
},
{
family: 'Caveat',
locals: ['Caveat'],
fallback: ['Roboto', 'sans-serif'],
variances: [
{
style: 'normal',
weight: 700,
sources: [
{ src: '@/assets/fonts/caveat-v14-latin-700.woff', type: 'woff' },
{ src: '@/assets/fonts/caveat-v14-latin-700.woff2', type: 'woff2' }
]
}
]
},
{
family: 'Poppins',
locals: ['Poppins'],
fallback: ['Roboto', 'sans-serif'],
variances: [
{
style: 'normal',
weight: 400,
sources: [
{ src: '@/assets/fonts/poppins-v19-latin-regular.woff', type: 'woff' },
{ src: '@/assets/fonts/poppins-v19-latin-regular.woff2', type: 'woff2' }
]
}
]
}
],
componentAutoImport: false,
componentPrefix: undefined,
/**
* IntersectionObserver rootMargin for Compoennts and Assets
*/
lazyOffset: {
component: '0%',
asset: '0%'
},
loader: {
dataUri: null,
size: '100px',
backgroundColor: 'grey'
}
}`
3-Open the site on an Android device (Pixel / Samsung / Realme)
4-Observe that the page remains stuck and no network requests are executed
5-Remove Speed Kit from nuxt.config and reload the site on the same device
6-Site loads correctly without Speed Kit
Expected behavior
If Speed Kit fails to initialize or causes issues on a specific device, the application should gracefully fall back and load the site without Speed Kit optimizations instead of getting stuck on initial load.
Screenshots
Smartphone Google pixel 8 pro
- Device: Google pixel 8 pro
- OS: Android 16
- Browser chrome
- Browser Version 143.0.7499.109
Smartphone realme 12+ 5G
- Device: realme 12+ 5G
- OS: Android 15; RMX3867 Build/AP3A.240617.008
- Browser chrome
- Version 6.0
Only working fine on
**Smartphone Google pixel 6 **
- Device: Google pixel 6
- OS: Android 16
- Browser chrome
- Browser Version 143.0.7499.109
Additional context
Issue produce with Nuxt version: 3.5.3 Speed Kit version: nuxt-speedkit@^3.0.0-next.20
Issue also reproduced with: Nuxt version: 3.20.1 Booster version: [email protected]
Desktop and some Android devices work correctly, but most Android phones freeze on initial load
Even with the following configuration, fallback does not occur on mobile:
experimental: { fallbackInit: true }
Desired workaround:
A configuration or mechanism to automatically bypass Speed Kit and load the site normally if a device fails during Speed Kit initialization (especially on mobile)