Android does not continue loading scripts without Speedkit layer

[readio]

On a reduced bandwidth connection, Android does not finish loading scripts unless you add the speedkit-layer component and manually click the "nuxt-speedkit-button-init-app" button.

Other devices/browsers I've tested (Desktop: Firefox/Chrome/Safari, iOS: Chrome, Safari) will finish loading all the scripts without the speedkit-layer being in the code.

Is this intentional for the Lighthouse tests?

These are my speed kit settings:

speedkit: { detection: { performance: true, browserSupport: true, }, performanceMetrics: { device: { hardwareConcurrency: { min: 2, max: 48 }, deviceMemory: { min: 2 }, }, timing: { fcp: 1200, dcl: 1200, }, },

I'm using version 2.2.8

Any help is appreciated.

[readio]

I can see this in the module code which looks like it's responsible for forcing the page to load if the SpeedKit layer isn't there.

Cannot see a reason why it's not working in Android though.

window.addEventListener('load', function () {
  if (!document.getElementById('nuxt-speedkit-layer')) {
    initApp(forceInit);
  } else {

    observeSpeedkitButton('nuxt-speedkit-button-init-reduced-view', initReducedView);
    observeSpeedkitButton('nuxt-speedkit-button-init-app', () => initApp(true));

    setup(<%= options.performanceMetrics %>);

    if(('__NUXT_SPEEDKIT_AUTO_INIT__' in window && window.__NUXT_SPEEDKIT_AUTO_INIT__) || ((<%= !options.ignorePerformance %> && hasSufficientPerformance()) && supportedBrowser)) {
      initApp();
    } else {
      setupSpeedkitLayer(supportedBrowser)
    }

  }
});

[ThornWalli]

Hello @readio ,

sounds strange, do you have a device, which Android version with which browser?

Try to store the global variable window.__NUXT_SPEEDKIT_FORCE_INIT__ = true in the head, if set it should be initialized. But this does not solve the problem...

Do you have animations in the initial viewport, SVG with filter etc.?

Even without SpeedkitLayer it is checked whether the device is fast enough, i.e. a comparison is made between FPS and IDLE duration.

This is checked in a period of 1000ms and FPS and IDLE callback should not be too far apart.

The threshold value is 0.65, i.e. anything below this is blocked. Lighthouse falls under this.

You can adjust this threshold value in the Nuxt Config, but be careful, this is adjusted with lighthouse ;)

{
  speedkit: {
    runOptions: { maxTime: 1000, threshold: 0.65 }
  }
}

Basically, such a symptom can also be triggered purely by a CSS animation 🙃

To test, you could also reduce the FPS on the device itself. For example, Pixel 6 can run at 60 fps or 90 fps for smoother scrolling...

[readio]

Hi @ThornWalli

I have tested this on a real device - Samsung S20 fe [Android v 13] using Chrome. I've also tested using an emulator via Android Studio. I get the same results with both.

I tried setting window.__NUXT_SPEEDKIT_FORCE_INIT__ = true, but it appeared inside entry.mjs this is still undefined. I have tested console logging this in chrome dev tools and can see the variable is set correctly so not sure why this is happening.

I have hard-coded the value to true in entry.mjs , and this forces Android to continue loading without the SpeedkitLayer.

However, this impacts the Lighthouse mobile score - it drops by 16 points.

There is a CSS animation on load - a GeoIp country poup. Also, there is an auto-play video within the initial viewport.

I'll test some different values for the runOptions and removing elements etc.

I think my main confusion was why is this only an issue on Android devices.

[RuslanDimitriuk]

Hi @ThornWalli, I have the same problem with an old Android gadgets (9, 10 version). I still haven’t figured out how to leave the boost from Nuxt-speed-kit and make the application work on old Android devices. Any ideas on how to fix this?