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.

[navid-nhd]

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.

@patrob1 hello i have the same problem and i would be so appreciated to face a fixed stable solution . Lots of my clients are using systems with weak hardware and they cant visit my website at all.

[ThornWalli]

Hello @navid-nhd,

what does your initial load look like?

• Do you also have huge chunks in the initial load?
• Do you write a lot of data to the store when generating?

Have you analyzed the chunks? https://nuxt.com/docs/api/commands/analyze

The module itself is a support, everything around it must be clean.

[navid-nhd]

Hello @navid-nhd,

what does your initial load look like?

• Do you also have huge chunks in the initial load?
• Do you write a lot of data to the store when generating?

Have you analyzed the chunks? https://nuxt.com/docs/api/commands/analyze

The module itself is a support, everything around it must be clean.

Hello @ThornWalli yes I am creating some initial chunks such as layout and kit chunks by rollup options and I am not using store at all . the page doesn't load the additional resources after the initial page load, so it stops working and when we scroll down the page doesn't rehydrate.it is so urgent and I need a stable solution. thanks

[ThornWalli]

@navid-nhd Do you have a link to this page or an example where this occurs?

[navid-nhd]

@navid-nhd Do you have a link to this page or an example where this occurs? @ThornWalli nope sir! I have rolled it back into previous one . i have simulated a weak hardware by going into performance tab and setting the cpu twenty times slower and setting the hardaware concurrency into 1 . then the disaster happened .

[ThornWalli]

@navid-nhd The behavior is correct, that is what this module is designed for.

Deactivate the check via

https://basics.github.io/nuxt-booster/guide/options.html#detection

{
  detection: {
    performance: false
  }
}

If you now have poorer values on Pagespeed under Mobile, then it is simply because of this. Because the framework we are working with requires too much cpu load and additional code to run.

This cannot be solved.

If you have this condition of access, then a score of 100 on mobile should not matter.