Search code examples
reactjswordpressserverhostingshared-hosting

When deploying React app to WordPress server, there's a ~5-second delay where the screen's blank before render begins


I have WordPress shared hosted server with Hostinger and wanted to deploy my react app there. I connected to the server with SFTP and copied and pasted the build folder's contents into public_html/test-gpu-app.

The app works, but I've experienced the strangest issue: when accessing the page, a blank page is displayed for 5 or so seconds, and full render takes nearly 8 seconds.

I've deployed the boilerplate react app to ensure it wasn't something I coded poorly/inefficiently, and it experiences the exact same issue. When deploying to Vercel, the app loads instantly, so it's clearly something to do with the server.

Server usage isn't anywhere close to maxed out, and every other page on the site loads quickly. I'm at a loss, can't figure out where to go from here.

The page: https://artofpc.com/test-gpu-app/

GTMetrix test: https://gtmetrix.com/reports/artofpc.com/e9IhhRzi/

Any help would be massively appreciated.


Solution

  • If you run the chrome performance profiler, you will see that the only function calls happening when the content loads are by a script called cmbv2.js, which appears to be a data tracking framework or something like that.

    Your app code is downloaded only @ 5 seconds or so, likely an arbitrary timeout by the lib. I'm guessing this is something like an analytics framework waiting to display content before JS initializes so that users don't see flashes of content. Do you have settings that automatically defer JS or anything like that by third party libs?

    It reminds me of something like a layer that sits between HTML and the end user, auto deferring JS execution or something like that.

    Be warned of this smell, future internet folks!