CSS Hero and CloudFlare

CSS Hero and CloudFlare can have some issues. We do have some recommendations for solving the incompatibility:

1.) Create a “disable performance” page rule that among others deactivates Cloudflare if your URL contains “csshero”. For the page rule to work you add: https://www.yourdomain.com/*csshero* and replace “yourdomain.com” with your actual domain.

2.) As we determined “https://www.yourdomain.com” to run through that page rule we need to re-route “https://yourdomain.com”, “http://www.yourdomain.com” and “http://yourdomain.com” so these calls hit the disable performance rule, too. To accomplish that we create a 301-redirect page rule in Cloudflare that has “http://*yourdomain.com/*” go to “https://www.yourdomain.com/$1”

Cloudflare will now switch any other kind of yourdomain.com call to https://www.yourdomain.com and then recognize any URL that carries “csshero” in it. If so, Cloudflare switches off RocketLoader, Minification, etc. automatically so no need to deactivate Cloudflare or its RocketLoader manually anymore. Beyond that the second page rule will improve SEO as it keeps robots from indexing “double content” because of www and no-www versions.

Besides that, we can furthermore  suggest to disable the rocket-loader feature altogether.