I want to start off by saying, I have no affiliation with CloudFlare. Nor do I know the inner workings of CloudFlare’s backend system. This is meant to be a rudimentary explanation of how CloudFlare’s Rocket Loader works and I am going to show you why it can help your website more than you might think.
There, we are done. My editor informed me I need to write more, so here we go. Ready?
Setting the Rocket Loader to “Automatic”
Easier to Understand Bullet Point Version
- The browser does not recognize text/rocketscript, therefore it ignores those resources and continues to load the page.
- The cloudflare.min.js file is loaded on your website. It begins looking for your text/rocketscript resources. This file also seems responsible for determining the order of your scripts on your website, so CloudFlare knows the correct order to serve them in.
- CloudFlare checks your browser cache to see if your website’s resources are cached. If the resources are cached, it doesn’t request them from their edge.
- CloudFlare often times groups external resources (AdSense scripts, Facebook Scripts, etc) and then does a group for your files (Often times I see it grouping your own website files with external files. I have no idea why).
- CloudFlare serves these files to the browser in the correct order as they appeared in the HTML document.
Why Does CloudFlare’s Rocket Loader Break My Website?
So you might be wondering why sometimes things break when they are being managed by CloudFlare’s Rocket Loader.
- Ajax is a beast. If you are a user of Xenforo (a very heavy Ajax-based forum software), you will notice turning on the Rocket Loader breaks almost everything.
If you have a website that uses a lot of external scripts, by using CloudFlare you will see a dramatic improvement in terms of load time. However, if you have a website that uses fancy animations or is very Ajax dependent, CloudFlare will likely break many aspects of your website.
Feel free to discuss below and ask questions!