I was going to wait with this post until X3 had proper documentation, but this feature is so beneficial that I wanted to add a tutorial in the forum. Here at Imagevue, we are big fans of Cloudflare, and we use their service for all our websites, including X3 websites. From the perspective of Imagevue X3, Cloudflare is a beautiful match, providing additional security and performance.
Also, since most of you are on a budget, Cloudflare offers a FREE account that includes most of the important features. Cloudflare do offer a PRO account at 20$, which has a few features that some of you may find beneficial, although most of you will not require the PRO features generally speaking. (Cloudflare is enabled by default at our flamepix hosting, and we offer the PRO package as an add-on for only 5$ because we have volume pro licensing)
* This is a very long post, but it should be worth the time if you are concerned with security and performance.
What does Cloudflare do?
Essentially, Cloudflare adds a CDN and a Firewall to your website, and improves some additional aspects of performance. Your current web hosting will still host the website and all it's content, but Cloudflare will handle all requests, and add several benefits. https://www.cloudflare.com/overview
Cloudflare adds a basic content delivery network to your website. Depending on your traffic, they do not guarantee caching in all locations, but it may very well speed up delivery of images, css and other static assets, especially to visitors that are far away from your origin webserver or on mobile devices. https://www.cloudflare.com/features-cdn
If your website was a boat on the internet ocean, you would be surprised to see what is actually going on beneath the surface. It's a toxic environment of malicious bots (and some humans) hammering on your server trying to find weak spots. Cloudflare adds protection by bouncing many bots/requests before they even hit your server. Not only does this add protection, but it also frees your website from having to deal with all these requests. https://www.cloudflare.com/features-security
3. General Optimization
Depending on your server and the specific application (X3), Cloudflare attempts to improve various aspects of performance. Since X3 is already optimized, Cloudflare will not benefit X3 much in this arena. However, for those of you who have below-par hosting that don't even offer Gzip compression for css/pages/text, Cloudflare will automatically apply compression.
What will Cloudflare do for my Imagevue X3 Website?
I have complied a list of benefits to be expected in regards to Cloudflare combined with Imagevue X3, although it depends slightly on your web server, content and visitors:
1. Security - At the bottom line, Cloudflare will prevent many malicious requests, users and bots from even reaching your X3 website. This is beneficial not only for security, but it will save your website from having to deal with this, essentially freeing up resources to deal with real requests.
2. CDN content delivery network - The Cloudflare CDN will distribute your static files (images, css etc) through their content delivery network. This can dramatically speed up delivery of X3 images, css and js from yourX3 website to many of your visitors, and at the same time saves your server bandwidth. If your visitors are mainly from locations on the same country/continent as your server location, benefits may be less, but it can still have a positive impact.
3. Gzip compression - If your host does NOT support Gzip compression, Cloudflare will automatically add it so that X3 pages+css are served compressed, which is a huge benefit. If your host already supports this (like most do), this provides no additional benefit.
What can Cloudflare NOT do for my Imagevue X3 Website?
Although Cloudflare ultimately adds security and performance, it is still your own server that is hosting the X3 application and has to create X3 pages and resize images. Cloudflare cannot speed up this process, and the speed of page requests are therefore bottlenecked by the delivery speed of your host. Indirectly, Cloudflare may speed up your server because of the CDN and added security, but essentially your own "origin" website still deals with all processing requests.
Make sure you are aware of the following before you commit to the idea of Cloudflare:
Non-X3 applications - If you are also hosting non-X3 applications on your website, you may need to consider Cloudflare based on separate conditions. We assure flawless integration with X3 based on this tutorial, but we don't guarantee Cloudflare-compatibility with non-X3 applications.
DNS - To use Cloudflare, you are basically giving Cloudflare permission to handle all requests to your website. This is a technical prerequisite to use Cloudflare, and if you for some reason don't like the idea of that, then you shouldn't be using Cloudflare.
Error Pages - If your website is taking too long time to respond, Cloudflare may output an error page. Some users mistakingly blame Cloudflare for this because they see "Cloudflare" in the output, but its almost certainly the origin website. This may happen under certain circumstances with X3 also of course, if you are on a slow server.
Human Challenge - The Cloudflare Firewall may in some rare cases trigger for authentic human visitors. They will then be forwarded to a "challenge" page with a captcha form to prove they are human. If you cannot live with the idea that a visitor may have to deal with this at some point, then maybe Cloudflare is not for you.
So let's get started! The following tutorial shows you how to set up Cloudflare Free with Imagevue X3. You will need to be able to access your NAMESERVER settings at your current webhost, because basically you will be setting Cloudflare DNS servers, which will still point to your web host server.
1. Go to https://www.cloudflare.com/, click "Sign up"
2. Follow the sign up process, and effectively "add" your website. The process is not too complicated, but check this guide if you need more help: https://support.cloudflare.com/hc/en-us ... ning-guide. Because this process requires changing nameservers for your domain, it may often take 30 minutes or more to complete, so strap yourself with patience!
3. Imagevue X3 Cloudflare Settings
Once Cloudflare is setup, it should play nicely alongside Imagevue X3 with default Cloudflare settings. However, you need to make sure Rocket Loader is disabled, and we recommend a few other tweaks:
A) DNS Settings
Most likely, you will be thinking "I have no idea what the hell I'm looking at here", but don't worry ... Cloudflare has basically inherited the DNS settings from your original host DNS settings, so you can just proceed with defaults. However, if you have a vague idea about whats going on, it might be a good occasion to clean up your DNS settings to make things more pure and secure. The below is an example from our mjau-mjau.com website ... * Feel free to skip this point and move on to point B).
Basically, it sets the domain towards the IP (hidden), adds mail and IP6 records and alias for "www" (so http://www.domain also works). Ultimately, you should try to only have records that have an orange cloud on the right, so your server cannot be accessed directly by hackers and bots. Unless you for some unknown reason need to be able to bypass Cloudflare, then delete the direct access record. Also, you should delete the * (wildcard) subdomain record, unless you are using subdomains on the website that are not listed in the Cloudflare DNS (which is very unlikely). Removing these records, will prevent hackers/bots from bypassing Cloudflare and potentially accessing your website through URL's that you are not using anyway. Delete these:
* If you are worried about breaking something, then feel free to keep the default detected DNS settings. It will still work nicely.
B) Cloudflare Settings
Mostly, the default Cloudflare settings will work nicely alongside Imagevue X3. However, since X3 is already optimized and minified, "rocket loader" and "Auto Minify" should be disabled. You should also disable SSL unless you are using SSL on your website (if you don't know, then you are not using SSL). Finally, you should ignore everything related to Cloudflare Apps, including Google Analytics, because this is all handled by X3 internally, and you don't want Cloudflare to mess around with X3. Here are snapshots from a default X3 setup, which is almost default to Cloudflare, apart from what I mentioned:
OK, I'M DONE! How to test results?
Ok, so you are done and dusted, everything seems to be working nicely, and you want to review benefits. Unfortunately, there is no tool to directly measure the benefits of Cloudflare, and depending on several factors, you may not be able to notice any difference in speed. However, as noted earlier in this post under "What will Cloudflare do for my Imagevue X3 Website?", you may presume the following:
A) Added Security
With Cloudflare's initial layer of security, you can feel safer knowing that a large amount of standard hacks and malicious bots are being bounced from your website before they even access your server. After some time, you can check your Cloudflare analytics to review the amount of requests that have been saved, and also the amount of bandwidth. Freeing your server from having to deal with these threats, may slightly improve it's capabilities to deal with real requests.
B) Benefits of the CDN
Although your static content (images, css) is now on the Cloudflare CDN, it does not mean you will notice a huge improvement, at least not initially. First of all, CDN's need to "pull" the original files from your origin server as they are requested from different locations initially. Furthermore, if you are already located not far from your origin hosting server, it is unlikely you will notice much difference at all. However, visitors on mobile (slow connections), and visitors from global locations may eventually notice substantial differences in loading speed for images. Personally, I am in SE Asia, and I see huge improvements once image files get cached on the CDN ... Our server is in US, but static assets get served to us from a Cloudflare POP server in Singapore.
* You should be aware that Cloudflare does not guarantee caching of all your files globally from all your locations. It depends on the request ratio for a certain file from any specific location. If a file is requested frequently from around location New York, the Cloudflare CDN will cache this resource indefinitely from a New York location. However, if a certain file is requested once a month from a location in Australia, Cloudflare will likely purge this file until request rate increases from the location.
** Cloudflare will not cache the html pages from your server, so you will not see any direct performance boost in regards to the page output speed. There is a workaround for this, but I will not be covering it right now.
C) Other benefits
Since Cloudflare offloads your server from a lot of requests with the added security and CDN features, it should provide your server with a "boost". If your are on shared hosting with 1000 other customers however, it is unlikely you will notice much benefit from this. There may be other minor benefits, but it depends on a several factors ... For example, if your server does not support Gzip compression, Cloudflare will now handle this for you.
Other Cloudflare Options and Features?
When setting up Cloudflare, you saw lots more Cloudflare features, and you want to know if you should be using them? In this (long) post, I have intentionally focused on the Cloudflare features that matter, and intentionally avoided features that have little or no effect for an Imagevue X3 website. Unless you are technically very curious, you can just ignore them and be safe in the knowledge that the default setup is all good.
* If you have any questions about additional Cloudflare features or settings, feel free to ask.
Do I need Cloudflare Pro? The short answer is no, and I would not have written this tutorial if it required a 20$ monthly fee, which is more than most of you are paying for your hosting in the first place. Cloudflare basic (free) already offers the bulk of useful features, while the PRO account offers additional features which are non-essential for most of you.
A) "Faster" site performance with SPDY, Session optimization, and Prioritized requests. These listed features do offer some speed benefits, but they are relatively minimal from a global perspective.
B) Improved Security with extensive Web application firewall (WAF). This is in fact a very substantial industry-standard layer of protection for your website. However, unless you are overly concerned with security, or your website is very popular, this feature is not strictly necessary to keep an X3 website secure.
C) SSL encryption (https) for a secure and encrypted connection between the visitor and website. This feature is interesting because it has a positive effect on SEO. Apart from that, unless there is a lot of sensitive information being transmitted through your website, SSL is not a feature that would give much benefit to an average X3 website.
There are other features like Mirage, Polish and additional page rules, but I do not rate these features of much benefit to an X3 website.
* If you are considering Cloudflare Pro, keep in mind we offer this for only 5$ through our own Flamepix hosting. We are able to offer this price instead of the retail 20$, because we host bulk domains on Cloudflare Pro.
There is an interesting feature you can use with Cloudflare and your Imagevue X3 website, that I like to call "Extreme Caching". Using page rules, you can set Cloudflare to "cache everything" on their CDN, including html/json pages from your X3 website. This will essentially make your X3 website insanely fast, even from remote locations. We are already using this feature at demo.photo.gallery, flamepix.com and mjau-mjau.com, and I am sure you notice the killer load speeds we are getting from these websites? The challenge with this setup, is that it requires an advanced configuration, is only suitable for X3 websites that aren't changed too often, and you will manually need to purge Cloudflare cache resources when you are updating the website. Let me know if someone wants to know the manual process for this setup!
Cloudflare built into the X3 Panel
For the above functionality and more, we aim to build certain Cloudflare features directly into the X3 panel. This will allow you to control certain aspects of the Cloudflare directly from your panel, including CDN, cache and development-mode.