search

postlight / headless-wp-starter

🔪 WordPress + React Starter Kit: Spin up a WordPress-powered React app in one step
https://archive.postlight.com/labs/wordpress-react-starter-kit
GNU General Public License v2.0
4.48k stars 649 forks source link

page navigation is slow #185

Open geocine opened 5 years ago

geocine commented 5 years ago

Do you have any idea why the page navigation is slow? React frontend using client side routing should navigate instantaneously.

Currently the average page load of this setup is 600-700ms. Using WordPress on a normal setup, you will still be able to achieve less than 250ms loading speeds. Am I missing something here?

Imgur

TechStacker commented 5 years ago

My experience is similar, but only the first time I go between pages (with a cleared cache) its 400-600ms. After that, it’s faster, at 150-300ms, although it’s rather inconsistent. Going back and forth between e.g. Sample Post and Home can vary 150ms, which doesn’t make much sense to me.

Is yours slow the second time you click through or only the first time?

I worry most about how it performs in actual production, which I haven't tried yet. I assume production build is faster.

Can anyone else chime in on this? Anyone using this in production?

geocine commented 5 years ago

No matter if the page is cached or not, it is still get the same results. Sometimes it even reaches 800ms

jacobmishkin commented 5 years ago

This is one of the head aches with headless WP. I recommend for production using memcache, and use WPGraphQL. The reason of the load time is because WP is bootstrapped on each request, so WP, the plugins, and themes are loaded on each call. I hope this helps in understanding why the long load times.

TechStacker commented 5 years ago

Appreciate your info @jacobmishkin

It’s a bit of a bummer since performance was the main reason I got excited about this kit. I haven’t seen any performant examples in production. I know that Kata.ai also uses Next+WP (their own version) but their website is pretty slow :-/

I guess if you want blazing fast site Headless WP, Gatsby is a better option.

But I’ll check out Memcache, thanks for the tip!

geocine commented 5 years ago

I did end up using Gatsby

alexiakl commented 5 years ago

This PR introduces a GraphQL frontend: https://github.com/postlight/headless-wp-starter/pull/187 I am also looking into ways to improve performance of the non-graphql frontend. Once this PR is ready, it will be merged, shouldn't take more than a week. @geocine @jacobmishkin

TechStacker commented 5 years ago

@alexiakl that sounds awesome, thank you!

cr101 commented 5 years ago

@geocine the API Accelerator plugin will speed things up.

This could also be implemented for GraphQL requests by doing a check:

if ( defined( 'GRAPHQL_REQUEST' && true === GRAPHQL_REQUEST ) {
  // do something
}
alexiakl commented 5 years ago

Ok, so the page load is slow because you're running it in development mode. In production, you will get significant improvement in page load: You can try it: In package.json inside frontend folder, add to scripts the following:

"prod_start": "NODE_ENV=production node server.js"

And in docker-compose.yml, edit the first command line to be:

    frontend:
        command: bash -c 'yarn && yarn build && yarn prod_start'

After that, delete the frontend container, and run docker-compose up -d

cr101 commented 5 years ago

@alexiakl How to run the site in production mode is an essential piece of information and needs to be in the documentation. Thanks for the tip.

andrewmclagan commented 5 years ago

There are multiple things at play here. We get sub 60ms response times on our production server. Development is allot slower.