metaballs-js canvas causes Pagespeed Insights to fail

[jakob-metro]

I am currently using this canvas script as a background for a website, and have had great results with it.

However, I'm having some difficulty trying to pass a pagespeed test with the canvas initialized.

Here's the metaballs-js demo page in pagespeed insights, as you can see the "Lighthouse Request took too long to render"

For what it's worth, the same page renders a lighthouse report via the chrome devtools just fine. I worry this same issue could be a concern for real devices that don't support the webgl stuff, not just the pagespeed test.

So my question is this. Is there a way to conditionally load the metaballs script to only load on higher end devices?
My first thought was to first check for webgl support using the methods this page uses to check, but from what I can see, this test page actually does render on psi and says "webgl is supported" based on this check...

Here's my config that I'm using, I'm not rendering too many metaballs I don't think.

initMetaballs('#background-canvas', {
    numMetaballs: 25,
    minRadius: 15,
    maxRadius: 20,
    speed: 1,
    color: '#ffffff',
    backgroundColor: '#64c18f',
    interactive: 'window'
});

For now, removing the canvas entirely resolved this issue on my end, but I still like the effect, and would like to find a way to make it work, and gracefully fall back on lower power devices. Any help or advice would be appreciated!

[Christoph Michel]

I opened a report for the lighthouse issue some time ago

I'm sure there is a way to detect low-end devices which you could implement in plain javascript and then not render the canvas. For example, I'm hiding it on all mobile devices using window.matchMedia

[jakob-metro]

Thanks @MrToph, I'll watch that issue and see if anything develops from that.

I tried the old canvas.getContext("webgl") instanceof WebGLRenderingContext trick to detect webgl, which returns true in psi... I guess psi has some kind of hardware emulation, who knows. window.matchMedia it is I guess!