Performance detection bug

[patrob1]

Describe the bug
On weaker devices, if I set the detection.performance property to true, the page doesn't load the additional resources after the initial page load, so it stops working. If I turn off performance detection or set very high fcp & dcl to always meet the requirements, than it is highly reducing the performance by leaving a 22mb generated chunk in the initial payload. With performance detection and the following options, the page is fast, but doesn't work on weaker devices at all. It is also happening when I don't include the SpeedkitLayer in the code.
I thought that the forceInit option is for this purpose but for me it makes no difference.

To Reproduce
I have the following setup:

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

    componentAutoImport: false,
    componentPrefix: undefined,
    lazyOffset: {
        component: '00%',
        asset: '0%'
    }
},`

Expected behavior
Continue page loading in case the performance requirements not met.

[bartlwojcik]

Hi @patrob1!
Have you solved it? I'm facing the same problem with my code but for some reason only in Firefox. The page initialization is being paused due to "weak hardware" while other browsers on the same device have no issues.

[patrob1]

Hi @bartlwojcik !
I did resolved it but only with a hack, I think there should be a better solution. But if I include the speedkit layer to hidden place on the site and trigger a click to the "initiate" button after the page load than the page continues to work as expected. ¯_(ツ)_/¯ I'm also giving it a setTimeout because sometimes the speedkit layer appears a bit later after pageload.
It works, but if someone has a better solution, don't hesitate to let me know.
window.onload = function () { setTimeout(() => { const initButton2 = document.getElementById("nuxt-speedkit-button-init-app"); if (initButton2) { initButton2.click(); } }, 2000) }

[ThornWalli]

Hi @bartlwojcik,

The weak-hardware message comes when there are frame drops during initialization. Here there is a comparison between idle and animation request, if here a threshold is not reached in a certain time, there is this warning.

If this happens only in Firefox, do you have any filters, animations, etc.? Example on SVGs? or other elements? at initial call.

Alternatively you could set a console.log here https://github.com/GrabarzUndPartner/nuxt-speedkit/blob/d3e5021432e3caeda57ff0b8fe7927d7fe842cd6/src/runtime/utils/performance.mjs#L56-L59 for the buffer.avg this seems to be too low and is this a sign that something is not running smoothly in the initialization of Firefox.

There is also the possibility to adjust the values, but it is not recommended, because these are tuned to Lighthouse ;)

https://github.com/GrabarzUndPartner/nuxt-speedkit/blob/d3e5021432e3caeda57ff0b8fe7927d7fe842cd6/src/runtime/utils/performance.mjs#L64-L66

These can be overwritten in the module options.

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

[bartlwojcik]

@patrob1 Thanks for your response, will definitely give it a try :)

Hi @ThornWalli!
I have a background video being auto-played on page init, could that be a problem?
I've console.logged the buffer.avg and time in different browsers and in Firefox they have visibly greater values and time constantly exceeds 1000.

[ThornWalli]

@bartlwojcik Try to start the video in mounted.

Assume playsinline and muted is set 🙃 Then this should start without a user interaction via video.play().

But you might need a poster in the video now.

This can be a reason.