Extreme Page caching with Cloudflare
Here comes a quick tutorial on how to setup Cloudflare page-rules with the new Cloudflare-API integrated in latest X3 panel release, allowing extreme page-caching for your X3 website.
Warning: Advanced!
This tutorial requires that you have already set up Cloudflare for your website, and I only recommend it for advanced users. It is not necessary to follow this guide to get the basic advantages of Cloudflare if you are already using it. It is entirely optional, and only for the ambitious.
What does it do?
As outlined in the original post of this tutorial, Cloudflare will essentially speed up your website by caching static assets (images, css etc.) on their high-speed content delivery network. Cloudflare does NOT however cache "pages" by default ... This is because pages are often "dynamic", contain menus that change often, so it would not be functional to cache a page. UNLESS we can actually flush the Cloudflare page-cache from the Imagevue X3 panel that is ...
Benefits
So if you go ahead with this, what are the actual benefits? By caching X3 pages (html, json, sitedata) on the Cloudflare CDN, you will make the following incredibly fast: 1) The load speed of the initial document (before the preloader even appears), and 2) The load speed when navigating between pages (unless you are using X3 preloader). The difference in speed, depends on TWO factors: 1) The default processing delivery speed of your web server, and 2) The location of the visitor requesting the document. The benefit will in fact be greater if your server is slow, and if the visitor is far away from the server location.
I can only reference our demo gallery as an example:
https://demo.photo.gallery/
Do you notice how "instantly" the preloader appears on your screen? This is because the initial "page"-document loads incredibly fast from Cloudflares CDN. Although our Flamepix server is really fast even without Cloudflare page-caching, we reduce the latency from an average 100-600ms (depending on location), down to 10-50ms (regardless of location, because Cloudflare may cache the pages on global locations). Average servers can expect perhaps an average load delay of 500-1500 ms, going down to 10-50 ms with Cloudflare page caching.
New York 51 ms
http://tools.pingdom.com/fpt/#!/d4IgIh/ ... evuex.com/
Amsterdam 49ms
http://tools.pingdom.com/fpt/#!/bj0EBt/ ... evuex.com/
Melbourne 94ms
http://tools.pingdom.com/fpt/#!/E8kAS/h ... evuex.com/
Test the latency of your current X3 website here:
http://tools.pingdom.com/fpt/
* You should take notice of the first item in the waterfall, as I have done in the screenshots above. This is essentially your server getting the request, processing it, and serving it from various locations.
Is it worth the hassle?
The short answer is no, unless you relate to any of the following:
1) You are fanatical (like us) about squeezing peak performance from your website.
2) Your website is accessed from a global audience, in which case caching on Cloudflare CDN is more beneficial.
3) If your web server is really slow, Cloudflare page-rules will make a bigger difference.
---
OK, I already got Cloudflare, let's get started please!
Navigate to your account at Cloudflare, and click the "Page Rules" tab.
Add a new rule, *yourdomain.com/*
Set the following rules (ignore any other rules)
Save (click "add rule")
Done! Now we have to make a page-rule to prevent page-caching for the admin-panel
Add a new rule *yourdomain.com/panel/*
Set the following rule (ignore any other rules)
Save (click "add rule")
Finally, make sure your panel-rule is ABOVE the first rule you created.
* Use the drag-handle on the left to drag it above if necessary. Refresh the page, and make sure the panel-rule is above the other rule
Done! Now go to your Cloudflare account name (top right) > "My Settings". Scroll down, and click "View API key"
Done. From your X3 panel, navigate to settings -> panel. Scroll down to Cloudflare settings, click to "enable cloudflare API", and add API keys from above:
Save. done! You should now have Cloudflare page-caching enabled, and your X3 admin panel should show Cloudflare action buttons. Keep in mind, pages won't speed up until they get cache-status: HIT from Cloudflare, which occurs after two requests to the same page. Also, this would have to repeat from each global location where it is to get cached.
-screens).
