Why Cloudflare cannot cache GTranslate translated pages?

Hi,

I add our website to Cloudflare. Meanwhile our site is using GTranslate.io’s multi-language service, which:

  1. Install a WordPress Plugin GTranslate.
  2. Add the following line to .htaccess:

BEGIN GTranslate config

RewriteRule ^(af|sq|am|ar|hy|az|eu|be|bn|bs|bg|ca|ceb|ny|zh-CN|zh-TW|co|hr|cs|da|nl|en|eo|et|tl|fi|fr|fy|gl|ka|de|el|gu|ht|ha|haw|iw|hi|hmn|hu|is|ig|id|ga|it|ja|jw|kn|kk|km|ko|ku|ky|lo|la|lv|lt|lb|mk|mg|ms|ml|mt|mi|mr|mn|my|ne|no|ps|fa|pl|pt|pa|ro|ru|sm|gd|sr|st|sn|sd|si|sk|sl|so|es|su|sw|sv|tg|ta|te|th|tr|uk|ur|uz|vi|cy|xh|yi|yo|zu)/(af|sq|am|ar|hy|az|eu|be|bn|bs|bg|ca|ceb|ny|zh-CN|zh-TW|co|hr|cs|da|nl|en|eo|et|tl|fi|fr|fy|gl|ka|de|el|gu|ht|ha|haw|iw|hi|hmn|hu|is|ig|id|ga|it|ja|jw|kn|kk|km|ko|ku|ky|lo|la|lv|lt|lb|mk|mg|ms|ml|mt|mi|mr|mn|my|ne|no|ps|fa|pl|pt|pa|ro|ru|sm|gd|sr|st|sn|sd|si|sk|sl|so|es|su|sw|sv|tg|ta|te|th|tr|uk|ur|uz|vi|cy|xh|yi|yo|zu)/(.)$ /$1/$3 [R=301,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(af|sq|am|ar|hy|az|eu|be|bn|bs|bg|ca|ceb|ny|zh-CN|zh-TW|co|hr|cs|da|nl|en|eo|et|tl|fi|fr|fy|gl|ka|de|el|gu|ht|ha|haw|iw|hi|hmn|hu|is|ig|id|ga|it|ja|jw|kn|kk|km|ko|ku|ky|lo|la|lv|lt|lb|mk|mg|ms|ml|mt|mi|mr|mn|my|ne|no|ps|fa|pl|pt|pa|ro|ru|sm|gd|sr|st|sn|sd|si|sk|sl|so|es|su|sw|sv|tg|ta|te|th|tr|uk|ur|uz|vi|cy|xh|yi|yo|zu)/(.
)$ /wp-content/plugins/gtranslate/url_addon/gtranslate.php?glang=$1&gurl=$2 [L,QSA]
RewriteRule ^(af|sq|am|ar|hy|az|eu|be|bn|bs|bg|ca|ceb|ny|zh-CN|zh-TW|co|hr|cs|da|nl|en|eo|et|tl|fi|fr|fy|gl|ka|de|el|gu|ht|ha|haw|iw|hi|hmn|hu|is|ig|id|ga|it|ja|jw|kn|kk|km|ko|ku|ky|lo|la|lv|lt|lb|mk|mg|ms|ml|mt|mi|mr|mn|my|ne|no|ps|fa|pl|pt|pa|ro|ru|sm|gd|sr|st|sn|sd|si|sk|sl|so|es|su|sw|sv|tg|ta|te|th|tr|uk|ur|uz|vi|cy|xh|yi|yo|zu)$ /$1/ [R=301,L]

END GTranslate config

which seems to redirect a web URL like https://www.example.com/es/outlook-repair/ to https://www.example.com/wp-content/plugins/gtranslate/url_addon/gtranslate.php?glang=es&gurl=outlook-repair, and then the plugin will send the request to gtranslate.io’s server and return with the translated pages.

Now it is clear that normal pages are cached by Cloudflare. But for translated pages such as https://www.example.com/es/outlook-repair/, I think it should also be.

However, when I use the following command:

ab -n 1 -c 1 https://www.example.com/es/outlook-repair/

It returns

Server Software: step
Server Hostname: www.example.com

So the Server software is step instead of cloudflare, why?

Thank you

Hi,

Cloudflare does not cache HTML (or PHP) by default. You must be using one of its features for that, such as Page Rules, Cache Rules, APO for WordPress or Workers.

The example you gave is for a request to a PHP file. Does your rule for caching also includes this extension? Also, it has a query string, which in most cases makes Cloudflare consider it “dynamic” and therefore not cacheable by default.

Without more details about how exactly you set Cloudflare to cache your HTML, I’d suggest you add a Cache Rule so that:

When incoming requests match...

URI Path equals gtranslate.php
AND
Query String contains "glang"

Then... Eligible for cache etc.
1 Like

Hi,

Thank you.

My WP site installed APO. In the past, I use a page rule of Cache Standard. Now I change it to Cache Everything.

With APO you do not need (and should not use) a Cache Everything Page Rule.

Instead, remove the Page Rule, create the Cache Rule as suggested, purge the Cloudflare cache for the domain, and see if that works.

1 Like

@cbrandt

Sorry but why APO cannot work with Cache Everything? I check the document at Page Rule integration with APO · Cloudflare Automatic Platform Optimization docs and it seems to be OK.

It’s not that it cannot work, but that there is a better alternative. Cache Everything, as the name implies, will cache not only all requests with query strings (you might not want that, as some other plugins or even WP core may use query strings for dynamic content), but also all redirects and error pages.

Instead, you should use a Cache Rule, which you can tailor to your needs, including specific Edge cache time for specific error/status responses (404, 403, 302 etc.)

OK. I see. Thank you.

1 Like

Hi, @cbrandt

It seems no way to specify URI and query in the rule, so I create a page rule as below:

URL: *example.com/wp-content/plugins/gtranslate/url_addon/gtranslate.php?glang=*
Cache Level: Cache Everything

Is that correct?

Of course there is.

image

@cbrandt

I am using the Pro plan. I think a higher plan can control this.

Cache Rules are available to all plan levels. Are you sure you’re visiting the right Dashboard panel?

https://dash.cloudflare.com/?to=/:account/:zone/caching/cache-rules

1 Like

Hi, @cbrandt

I see the problem. I confuse the “Page Rule” with the “Cache Rule”. I find the “Cache Rule” now.

2 Likes

Hi, @cbrandt

Now I check the page https://www.datanumen.com/es/outlook-repair/ and in Chrome it shows the following response:

alt-svc: h3=":443"; ma=86400
cache-control: max-age=2592000
cdn-cache-control: max-age=1209600
cdn-cache-control: max-age=1209600
cf-apo-via: tcache
cf-cache-status: HIT
cf-edge-cache: cache,platform=wordpress
cf-ray: 7e142abbd8f3ee8f-ATH
content-encoding: br
content-language: es
content-type: text/html; charset=utf-8
date: Tue, 04 Jul 2023 03:09:00 GMT
expires: Wed, 02 Aug 2023 09:16:05 GMT
last-modified: Mon, 03 Jul 2023 09:16:06 GMT
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
referrer-policy: no-referrer, strict-origin-when-cross-origin
referrer-policy: no-referrer, strict-origin-when-cross-origin
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=s%2B%2BA5b%2BtHYjLH5u19vsG5JaLSxNA%2FBU7n5%2FbCYDN7ZJ0ik3mzkcYtmGOLW753vcmBubO1rMXwCttlTBHulf8dHkCLmnsVdufQDfsGQjEfQIyCIuTNfZC5itX5oqKK5w%2F2bnb"}],"group":"cf-nel","max_age":604800}
server: cloudflare
strict-transport-security: max-age=63072000, max-age=63072000
vary: Accept-Encoding,User-Agent
x-content-type-options: nosniff
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-frame-options: SAMEORIGIN
x-gt-cache-status: PURGED
x-gt-delivered-by: GTranslate v8.2.3 in 182ms visit https://gtranslate.io
x-gt-origurl: /outlook-repair/
x-gt-queued-translations-count: 1
x-gt-server: step
x-xss-protection: 1; mode=block
x-xss-protection: 1; mode=block

Based on cf-cache-status, it is HIT. However, based on x-gt-cache-status from GTranslate, it is PURGED. So I don’t know whether it is cached or not.

Also after running the following command:

ab -n 1 -c 1 https://www.datanumen.com/es/outlook-repair/

I get the following result:

Server Software:        step
Server Hostname:        www.datanumen.com
Server Port:            443
SSL/TLS Protocol:       TLSv1.3,TLS_AES_256_GCM_SHA384,256,256
Server Temp Key:        X25519 253 bits
TLS Server Name:        www.datanumen.com

which still show the “Server Software” as “step”. Why?

Thank you very much

That’s right. APO has cached the content and as long as you don’t delete or modify the content at the origin APO will respond from the cache. When APO fetches the page from your origin, the origin may or may not have the page already cached at the server level, but that’s irrelevant, as further requests will be served from Cloudflare.

This is unrelated to Cloudflare. As you run a command directly on your server, it cannot possibly return headers from Cloudflare, as the command does not make an HTTP request over the internet. Please bring further questions to Stack Overflow or other server-administration forums.

1 Like

Hi, @cbrandt

Thank you.

But if I run the same command on another page, it will return cloudflare:

ab -n 1 -c 1 https://www.datanumen.com/outlook-repair/
Server Software:        cloudflare
Server Hostname:        www.datanumen.com
Server Port:            443
SSL/TLS Protocol:       TLSv1.3,TLS_AES_256_GCM_SHA384,256,256
Server Temp Key:        X25519 253 bits
TLS Server Name:        www.datanumen.com

Thank you.

And how is that affecting the visitor of your pages. Are they receiving the page as cached by Cloudflare? I see server: cloudflare for both URLs when visiting with a Chrome browser, and that’s what matters as far as final user is concerned.

If you are curious as to why your CLI utility is seeing differing headers, then

They should be able to help you understand what headers this utility CLI program is reading in a proxied-website context.

Hi, @cbrandt

I get a different answer from GTranslate support:

“Translated pages are not cached by Cloudflare directly, but as mentioned earlier, it can affect the translated pages as we take the already cached original version.”

And my main concern is: Although both the original page and the translated page seems to be cached by Cloudflare and return cf-cache-status as HIT, their performance is completely different:

  1. The original page load time is 566ms
  2. The translated page load time is 1.8s.

You should familiarize yourself with what’s caching and how it works in the context of a proxied website. There are different levels of cache and of course if a page is cached by Cloudflare, and the plugin fetches that page to translate it, it will be "seeing’’ a cached page. So what? Wasn’t that what you wanted?

As for the performance impact of caching with Cloudflare, that’s another topic; feel free to open a separate topic if you wish to discuss that. But I’d advise you follow the above suggestion and read the documentation related to caching to better understand what you should expect, how to properly test it etc.

1 Like

Cloudflare cannot cache GTranslate translated pages because GTranslate uses JavaScript to dynamically translate the content on the client side. Cloudflare’s caching system primarily works with static HTML content, so it cannot cache pages that rely on JavaScript for translation.

1 Like

Hi, @pooledorothyw

Now I am more confused. I use GTMatrix to check https://www.datanumen.com/es/outlook-repair and it seems that every item shows cf-cache-status as HIT.