Jeremy Bise

CloudFlare and ExpressionEngine

Our hosting service is pretty fast, but we've been looking at ways to speed things up.  I've had my eye on CloudFlare for awhile now and thought I'd give it a trial on a couple of our ExpressionEngine sites this weekend.  There were a few gotchyas, but so far the difference has impressed me.  Read on for the gotchyas we ran into ExpressionEngine with CloudFlare along with a couple miscellaneous hiccups we noticed.

First, Was It Worth It?

Simply put, yes.  Our page load time has improved by about 37%.  Our Google Page Speed score increased from 83 to about 96 (for whatever reason it fluctations from about 94-96).  Aside from the numbers, the two test sites just feel snappier.  That was what we were hoping for.

CloudFlare was an absolute breeze to set up.  We simply signed up (we're using their free account), told CloudFlare our domain names and it tried to auto detect our DNS records on the domains.  There were a few missing records from their auto-discovery, so make sure you pay attention to that if you try it.  After we added in the missing records, we simply changed our nameservers to the CloudFlare provided nameservers.  That was it for setup.  Since our registrar updates those things pretty quickly, both sites were being served by CloudFlare within about 10-15 minutes.

Now for the gotchas...

The ExpressionEngine Control Panel

This bugged me for about an hour before I figured out what to do with CloudFlare.  The symptom was that none of the Javascript worked in the EE control panel.  This pretty much renders the control panel useless as all the menus are driven by Javascript.  In order to solve the problem, we had to set up a Page Rule on CloudFlare to exclude the Control Panel URL from all of CloudFlare's magic.  Below is the URL pattern we used for our Page Rule:*

For the rules on this pattern, we bypassed the cache and set Always Online, Apps, Performance, and Security to Off so that CloudFlare isn't messing with anything in the EE Control Panel.  This has solved all our Control Panel issues.

Template Caching & CAPTCHA

We use ExpressionEngine's built-in CAPTCHA feature in a couple sections on both sites.  There was a problem where the CAPTCHA images were not changing on page load and so form submissions wouldn't work because the CAPTCHA input was wrong, even though it wasn't.  We had ExpressionEngine's template caching turned on for most templates on the sites, but CloudFlare does its own bit of caching, which was apparently causing our CAPTCHA image problem.  When we disabled template caching in ExpressionEngine, CAPTCHAs start working as expected.

Those were really the only two ExpressionEngine related hiccups we experienced.

Miscelleanous Notes

Web Fonts

We use Typekit for most all fonts on our site.  After moving to CloudFlare, the old "font flicker" problem (where the browser's default font would appear for a split second before they displayed in the web font) reared its ugly head.  This had to do with CloudFlare's RockletLoader, which causes all Javascript to load asynchronously.  Within the CloudFlare docs, there was a fix for this.  Simply adding data-cfasync="false" to the two <script> tags for Typekit solved this problem.

Slideshows & overflow:hidden

After switching to CloudFlare, all of our slides were loading directly on the page and stayed there until the page fully loaded.  That was really ugly!  The jQuery plugin we use to drive the slideshow took care of that for us before, but due to RocketLoader's way of loading Javascript, the plugin wasn't taking care of it anymore.  We simply added an overflow: hidden to the CSS for the slideshow container.  In this way, the slides can load, but the stylesheet takes care of hiding them rather than relying on Javascript.  Come to think of it, we probably should have coded the slideshow that way to begin with, but we didn't.  Live and learn!

In Summary

I'm pretty pleased with CloudFlare at the moment, especially since its making our test sites faster for free.  I'm going to continue testing it for the rest of this week.  If I encounter anymore issues, I'll update this post.

Do you have any experiences with CloudFlare on your EE site?  Please share in the comments!

comments powered by Disqus

Share This


← Prev Project Next Project →