Slow TTFB on Dynamic Cache - Woocommerce Store

Website, Application, Performance
1

Hi All,

Please help me to understand more about TTFB on Cloudflare. I have this woocommerce store that is proxied through Cloudflare free plan. Recently I have an issue with slow TTFB when accessing my website. The TTFB always more than 1s and even more than 2s:

image

image

Now, when I created the page rule to cache everything on my home page, then the TTFB significantly improved to less than 400ms.

Now you would think that the problem lies on my server. However, I have this staging site which is not proxied through Cloudflare. The staging site hosted on the same exact server. And I have no issue with TTFB being slow:

image

All this time I thought edge cache on Cloudflare will always improve my TTFB as it directly sends the first byte to the client’s browser for the static content. And most of my contents on the homepage are static. So I assume the first byte did not have to wait for the origin server response. Did I misunderstand something?

As my site is an eCommerce store, I can’t afford to cache everything on my home page as the customer would see inaccurate stock availability (I hide items that is out of stock)

Any explanation and tips for the best Cloudflare setting for woocommerce site will be much appreciated. I really don’t want to leave Cloudflare, but if I could not solve this TTFB issue then I might need to change my nameserver back to the original NS.

2

Unfortunately, Cloudflare cache is per-resource. So if you open up a browser’s Dev Tools (F12 in Chrome), the Network tab will show you a list of resources, such as /, something.css, something.js, something.jpg, etc. The / is your home page and is a single resource.

Cloudflare can cache static resources, so the something.css, something.js, something.jpg are static. The /, as you know, is not static, as it changes per customer. That has to come from your server, and Cloudflare can not speed up that TTFB. The rest of the resources, however, should speed up dramatically as Cloudflare’s cache loads up those files and then make your site faster overall. Hopefully.

2 Likes
3

Hi, thanks for your quick response. Now, as I mention my staging site also hosted on the same server with same configuration to the live site and it able to give good TTFB. Then, why when proxied through Cloudflare the performance degraded significantly? How can I check where the issue is (cloudflare DNS / my server response time / time needed to proxy the traffic back to client / etc)?

here are the gtmetrix waterfall for my staging site (not through cloudflare):

image
image775Ă—498 36.1 KB

meanwhile, on my live site:

image
image957Ă—477 35.7 KB

Is that expected result/normal when you proxying traffic through Cloudflare and not cache everything?

4

For static assets yes.
For dynamic assets no.

For dynamic content Cloudflare will even increase the TTFB by a little bit. But these are just 5-10 ms nothing more.

Yes and no, all you assets are static, but the HTML itself is not and most probably never will at a shop. Thats why Cloudflare will not help much in a Shop when it comes to TTFB but on general PageLoad.

That tells you, that your site should be dynamically. What it is.

Definitely thats for sure the case.

Same server ok, but is it also hosted witht he exact same settings? Also as these are two “different” pages could you just test your mainpage without Cloudflare and see how TTFB performs then. Because what you have done now is:

Example 1: different Application, different CF settings (no CF)
Example 2: different Application, different CF settings (with CF)

Now that two variables changed in two example it makes it impossible to say where the problem comes from.

What I would like you to do is:

  1. run GtMetrix again on www.mooeishop.id and post the result URL
  2. disable Cloudflare (Developermode etc) and run it again on www.mooeishop.id and then again post the GtMetrix result URL here.

That will make sure there is just one variable beeing changed and this helps us to see where the problem comes from.

5

Hi, thanks for your response. I’m trying to make it the exact same setting. The only different is the staging site has Really Simple SSL plugin active (as the SSL certificate is not handled by Cloudflare).

Here are the requested test result:

What I would like you to do is:

  1. run GtMetrix again on www.mooeishop.id and post the result URL >> Cloudflare Active

  2. disable Cloudflare (Developermode etc) and run it again on www.mooeishop.id and then again post the GtMetrix result URL here. >>
    image
    development mode is active (I’m not sure how to check if it’s already deactivated). I also purge all cache before doing testing. Test results: Development Mode On

When I first setup Cloudflare on my website (around August 2020), I have this slow TTFB issue and was really happy with it. I’m not aware of any changes that might slow things down on TTFB aspect.

image
image1101Ă—399 72.2 KB

After this I also want to change the nameserver so it totally bypass Cloudflare and see the result.

6

I have not had a chance to change the nameserver, so based on the results above are everyone agrees that the problem lies on my hosting?

7

Updates: now I also tested my website on giftofspeed website where I can choose the testing location and they have Singapore as an option. The results are satisfying with TTFB of only 34ms. Anybody using this website to measure page speed?

image
image1058Ă—690 75.8 KB

8

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.

9

Hi @mooeishop2019 sorry for the late reply.

These tests:

Cloudflare :orange: : https://gtmetrix.com/reports/www.mooeishop.id/wz1AJEVm/
Cloudflare :grey: : https://gtmetrix.com/reports/www.mooeishop.id/yhAFFkeh/

Are showing that Cloudflare speeds up your site by about 100%.

But these tests have been made from “Vancouver, Canada”. I would definitely keep Cloudflare activated and let it speed up your site.

If you have changed anything on the Website since then the chances that this affected the speed are much higher then that Cloudflare is the problem.

This request also was served by Cloudflare, so Cloudflare does not seems to be the problem here. But I anyway would recommend you a good origin Caching Tool/Framework/Plugin or whatever. But the problem seems to be at your origin Server and not at Cloudflare.

Also I’m not a big fan of LiteSpeed Cache, but thats personal prefference. For your startpage (and all other NON-WooCommerce sites) I would recommend static caching. This I think is the fastest for your usecase.

1 Like
11

FYI, you can compare them side by side too https://gtmetrix.com/compare/wz1AJEVm/yhAFFkeh

1 Like
12

Noted, I will keep the Cloudflare and will try to optimize my site more. I know it’s not related to Cloudflare but what is the cache plugin that is recommended to use along side with Cloudflare (if there’s any)? I have problem with WP-rocket not showing accurate stock as it doesn’t have the option to purge the cache when stock changes.

I’m thinking of creating a landing page with cache all rules in Cloudflare as it provides the best speed for the customer.

13

Did you try this WP Rocket addon? Update products on stock after new WooCommerce orders - WP Rocket Knowledge Base

I don’t use WooCommerce but this sounds like what you need.

14

I have exactly the same issue. By activating Cloudflare on my WooCommerce site increase my site TTFB 10x times. Instead of 50-60 ms I get over 600ms with Cloudflare. Why is this happening?

15

By the way, Caching Everything rule works perfect with TTFB, the problem comes from Dynamic Caching.

16

Use redis it may significantly help

17

You shouldn’t be using Cache Everything with WooCommerce due to cart/checkout/login issues for the customers, etc.
If so, kindly consider using it in combination with Origin Cache Control option being enabled alongside the Cache Level: Cache Everything.

Furthermore, how about using Rocket Loader option?

I would suggest tuning a bit, if possible, your origin host / server PHP like below:

memory_limit = 256M
max_execution_time = 300
max_input_time = 1000
max_input_vars = 5000 or 7000
post_max_size = 16M
upload_max_filesize = 16M

Also, if you can install the PHP OPcache module as it could help too :wink:

Do not forget to save and restart your php service to apply the changes.

Furthermore, are the options like Auto Minify (HTML, CSS, JavaScript), Brotli, HTTP/2, Rocket Loader and similar enabled in the Cloudflare dashboard?

Consider using lazy-loading for images.

18

I am sure it will help, but my shared hosting doesn’t provide object caching

19

Thank you for your comprehensive answer! I have OPcache installed already. I have also played with the settings you have mentioned but no significant improvement.

From my tests, upgrading PHP from 7.4 to 8.0 helps, but I have to do an extra job to update the code to make it fully compatible with PHP 8.0.

Also server caching settings help. Now I have around 300ms ttfb. It is still dramatically more that I have without Cloudflare but now it is more acceptable.

I know that Cloudflare uses a different approach for ttfb, but still seems to be an issue, although not that painful.