headless-wp-starter
headless-wp-starter copied to clipboard
postlight
page navigation is slow
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?
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?
No matter if the page is cached or not, it is still get the same results. Sometimes it even reaches 800ms
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.
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!
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
@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
}
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
@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.
There are multiple things at play here. We get sub 60ms response times on our production server. Development is allot slower.
- Requests for things such as menu items that rarely change should be cached.
- Production build of Next is allot faster
- Production build of wordpress is allot faster
