Building R3F with WordPress and then PageSpeed timeout.

[ninesixfiveseven]

Hi, I have created a canvas in React Three Fiber and built it into WordPress. The website functions normally, but when I tested it with PageSpeed, I encountered an error stating 'generic::deadline_exceeded: Render timeout received in extension.' However, when I tested it in Lighthouse on dev mode, it passed successfully, and the website did not experience any slowdown. The Lighthouse score was around 80 during the test.

My server is not a problem at all. I have expanded the server and installed Cloudflare successfully.

https://pagespeed.web.dev/analysis/https-invisibleink-asia/vd0y97sj5d?form_factor=mobile

[clementroche]

Are you lazyloading your canvas ? Importing three.js and running WebGL has a huge impact on loading speed, you must wait for your page content to be loaded before to load and initialize your canvas.

Can you share your implementation ?

[bevanmw]

I know this is a bit of an old discussion but I would like to share my learnings struggling with this same issue:

Essentially the issue comes down to the fact that PageSpeed runs WebGL in software mode (GoogleChrome/lighthouse#8557) and this is incredibly slow. That's why the tests often timeout or give very bad scores even if locally running a lighthouse test gives a much better score.

Obviously if your WebGL content is above the fold you need the canvas to load immediately. So what you want to do is load a placeholder that renders if WebGL is running in software mode. I ended up using this package from Mapbox: https://github.com/mapbox/mapbox-gl-supported to check if WebGL is supported with the failIfMajorPerformanceCaveat option set to true. If WebGL is supported I render the canvas as normal but otherwise I render a screenshot of the rendered canvas. I also made sure I lazy load the canvas component so the JS bundle only downloads if WebGL is supported.

[bevanmw]

Here's an example repo: https://github.com/bevanmw/speed-test