CloudFlare: More Than Just a CDN
CloudFlare is included with your hosting plan, and it does a lot more than just make your site faster. Here's how to actually use it properly.
The Orange Cloud vs. The Gray Cloud
In your CloudFlare DNS settings, every domain/subdomain has a cloud icon next to it:
- Orange Cloud (Proxied) - Traffic goes through CloudFlare. Your site gets cached, protected from attacks, and the visitor's IP stays hidden. Always use orange for your main website (e.g., yourcheaphost.com, www.yourcheaphost.com).
- Gray Cloud (DNS Only) - Traffic goes directly to your server. Use this for things that shouldn't be cached, like an FTP subdomain (ftp.yourcheaphost.com), mail servers, or API endpoints that need real-time data.
Pro tip: If you change your site and don't see the update, it's probably because you're looking at a cached version. Set the cloud to gray temporarily while you work, then switch it back to orange when you're done.
Purging the Cache
When you make changes to your site (update a page, change CSS, upload new images), CloudFlare may still show the old version. Here's how to clear it:
- Log into your CloudFlare dashboard.
- Click your domain.
- Go to Caching > Configuration.
- Click Purge Everything.
You can also purge individual files by URL if you only changed one page. This is faster than blasting the whole cache.
SSL Settings
Under SSL/TLS in CloudFlare, you'll see encryption modes:
- Flexible - CloudFlare serves HTTPS to visitors, but talks to your server over HTTP. Easy setup, works for most people.
- Full - CloudFlare talks to your server over HTTPS too. You'll need an SSL certificate installed on your hosting.
- Full (Strict) - Same as Full, but CloudFlare verifies the certificate is valid. Best for security.
We recommend Full (Strict) if you have an SSL installed on your account (you can get one free via cPanel > AutoSSL). Otherwise, Flexible is fine for most sites.
Performance Benefits You'll Actually Notice
- Cached static files (images, CSS, JS) load from CloudFlare's edge servers - way faster than your server.
- Auto Minification - CloudFlare can shrink your HTML, CSS, and JavaScript automatically. Turn it on under Speed > Optimization.
- Rocket Loader - Delays JavaScript loading so your page renders faster. Turn it on under Speed > Optimization. Test it first - some sites break with it enabled.
- DDoS Protection - CloudFlare absorbs attacks before they reach your server. You don't have to do anything for this one, it's automatic.
- Broken Link Checker (FREE via the browser extension) - Not CloudFlare-specific, but useful. Scan your own site to catch 404s.
Bottom line: Set your main domain to orange cloud, turn on Auto Minify, and purge cache after every update. That's 90% of the benefit right there.
