Join the Webstudio community

Updated 5 months ago

Improving time to first byte

At a glance

The community member is experiencing slow performance with their website, with a Time to First Byte of up to 2 seconds. They have tried using both normal and custom domains, and are wondering if they can achieve better performance (600ms) with Webstudio. The community members discuss various ways to measure and improve the performance, such as using PageSpeed Insights, checking the WordPress requests in GraphiQL, and testing queries on a local server vs. the remote server. They suspect the issue may be related to the web host, and recommend the community member try a different hosting provider. The community members also discuss optimizing the GraphQL queries and using caching solutions like Stellate to improve performance. However, the community member is still experiencing issues with the new host, where the GraphQL data is not loading consistently on the published website, despite working in the Webstudio editor and Postman.

Useful resources
Hi !
My Time to first Byte is up to 2 seconds.
I've tried with both domains, normal and cutom.
Can we get better performance (600ms) with webstudio.
How can I improve this ?

Thanks for your help !
2
B
O
M
81 comments
Send a link to your website please
Also how are you measuring? use this https://pagespeed.web.dev/
Do you have any cms connected?
yes I Use wordpress with graphql
Performance issue could be related to wordpress requests inside worker. Did you try to measure them with graphiql?
I Thought the first byte was before any query
No I didn't measure it. How can I do this ?
Execute requests in graphiql ui, check timings in devtools network tab
OK I 'll will check this later. Thanks
holy smokes that site is slow
2 seconds just waiting for the server to respond on the document
this is 100% slow api
your api is completely f..d
I have a suspicion that you are also fetching megabytes of data from wordpress API. You need to check that too in the network tab
I made new tests desactivating plugins one by one with no results.
In order to check if the problem comes from the server, I tested several queries on both, remote and local server.
With this query :
query home {
allSettings {
generalSettingsTitle
}
}
Localhost time = 190ms
Ovh server time = 1.32s

With a complex query
Localhost time = 352ms
Ovh server time = 1.52s

This leads me to believe that it is mainly a problem linked to my webhost.

Maybe you have a good one to recommend to me for a WordPress headless? Currently I am on the ovh cheapest offer.

Thanks a lot
A complexe query loads 3.1kb
For this projet I usually have Two queries for top and bottom menu (header and footer are both in a slot) And for the content (page, archive or post) including seo, related post etc.
Is there a more effective method to optimize those queries ?
yeah run away from that host
there are many of them that could be good enough, depends on your price point
Hey. I have migrate my wordpress on an o2switch host. They're french too. Performances are now much better.
There's no problem in webstudio editor to preview my new data source , but it doesn't work on published version.

I keep on searching causes of this issue, but if you have already encountered this problem, let me know
can you share the builder link either here or dm if api keys
may have something to do with the fact there are like 5 requests to that API and some seem to have errors. I'll know more with the builder link though
Attachment
image.png
Hi @John Siciliano
I really appreciate your help.
I want to clean all my stack before sharing the builder, in particular, reduce the number of my requests (I 'll restart with a clean new wordpress on my new server).
I would like to get all page's data with an unique graphql variable (2 menus header & footer & page content), but without global, I can't bind it in a slot.
I will delete logosite and getReference.
I let you know when all is clean. Thanks
what tool do you use in your screenshot ?
I still have errors 😩 I send you builder link
Ok I'm starting to see things more clearly.

My new host is really faster, but I think it doesn't like webstudio.

On postman, I 've tested my queries, it's allright. On the webstudio editor or preview too. but on published website, there are some issues.
It doesn't get graphql data successfully. sometimes yes, but most of times no.


I've duplicated my single formation page in order to test both server, the old one dan the new
https://webstudio.wex.academy/ovh/ux-ui/initiation-et-acculturation-a-l-ux
https://webstudio.wex.academy/o2switch/ux-ui/initiation-et-acculturation-a-l-ux

with exactly the same request of course.

I also ask to the host support if they can help.

I feel a little πŸ₯Ί
second one is new?
ovx one timing for me is 800ms wait time on the document
Attachment
image.png
o2switch document loads in 1.3 seconds
Attachment
image.png
no it's the second one is the new.
on postman 1096.29 ms on ovh and 467.58 ms with the new
I get sometimes 600ms on the new one
overall the new one is def. faster
but its still fucking slow
467ms is also slow
it should be 100-200ms
can you ask around wordpress community what speeds they have and where?
Ok you mean without any cache config.
yes, with caching it should bee under 50ms
I'm gonna ask to wp_graphql community
caching means data sits in memory and its just latency
though I don't know exactly how they cache graphql, its not that simple with graphql
btw there is a way to speedup graphql
they specialize on caching graphql
Thanks.
My domaine name is still on ovh and I use cloudfare for dns.
Is this could impact performances ?
but despite the performance, the fact remains that queries fail on the new host !
The first time the page load, all api data appears, but when I reload, there'is no data from api
Im using the built in mac screenshot tool
looking. got the dm
Excuse me, I wasn't clear. I wanted to know what inspector tool it was.
great. My host support is investigating too
oh thats actually in the network tabs on the doc if you scroll down you can see some resource info
Attachment
image.png
question, you have two different hosting providers serving the same domain? Do you have a reverse proxy set up?
Im hearing this:
  • In the builder it works well
  • In postman it works well
  • On a published site it does not work well
Correct?
Yes before leaving ovh I keep https://api.wex.academy and the new at https://wordpress.wex.academy
I use cloudfare to set dns redirection
Considering reverse proxy set up, I don't know what it is. it 's too much for my knowledge
okay and second issue is that queries fail sometimes. i see this in the builder. Do you know why this is happening? I would have to look into it but curious if this is the issue you are talking about
Attachment
image.png
home page is deprecated.
I focus on formations Single
is this the right spot?
Attachment
image.png
It seems that you don't have a correct slug
oh right. what should i add to each
Attachment
image.png
category -> ux-ui
slug -> les-bases-de-figma
looking at the network response I see query I thought I had deleted
Im just trying to understand the difference between the two resources
it’s my training management tool
I didn't want to sync in worpress data like program, pricing, etc. which had to be in Hop3team tool.
so I used 2 sources for my data. Maybe one the reason my low perfromances
this one is taking 700ms
Time:
716 ms
Size:
12.09 kb
I don't know why builder/postman is okay and live site isn't, but the fact its taking a second in my tests would make me believe thats the issue. Could be multiple things at play though
My host support has just desactivated a security feat.
Now potentially this is also causing the resource to not work sometimes.. maybe it's' timing out idk. Can you tell me how to reproduce the issue of it not working sometimes
I know this api isn't speed. but I have to do with it at this time.
But I think my problem is resolved now. It was because of a security fonction on my host.
πŸ™‚ good stuff!
Thanks for your help
Hello Matthieu what was the security function that blocked?
Hi, My host provider is o2switch
It was their own default security rules AND ModSecurity a complementary application firewall that allows you to analyze and filter incoming requests to your website
Add a reply
Sign up and join the conversation on Discord