How CloudFlare’s Rocket Loader Works & Why You Should Use It

Home » Ask Scott » How CloudFlare’s Rocket Loader Works & Why You Should Use It
  • CloudFlare's Rocket Loader

How CloudFlare’s Rocket Loader Works & Why You Should Use It

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.

For the last several years, CloudFlare has had a tool in “beta” dubbed the “Rocket Loader.” It is an included option in any version of CloudFlare (free or paid.) The Rocket Loader speeds up how quickly the JavaScript loads on your website.

There, we are done. My editor informed me I need to write more, so here we go. Ready?

Setting the Rocket Loader to “Automatic”

When you set the Rocket Loader to automatic, you’ll notice in your website’s source code that all the JavaScript reads type=”text/rocketscript”. To your browser this code means absolutely nothing. This is what makes CloudFlare’s Rocket Loader work. The browser does not understand what type of resource it is. Therefore, it ignores any and all of the previous JavaScript tags.

So how does the browser download the JavaScript? The browser knows to download the JavaScript due to the “rocket.min.js” file loaded in the header of your website. CloudFlare dynamically rewrites all of your website’s text/javascript tags to text/rocketscript. CloudFlare then takes them to it’s content delivery network (CDN) and combines and minifies them. It then combines the JavaScript files into smart groups. It is not just one large JavaScript file. Often times with external JavaScript, there might be multiple calls to CloudFlare’s edge.

CloudFlare also checks with the browser to see if anything in those JavaScript files are already known to the browser. By known to the browser I mean if it is cached or not. If a resource is cached in the browser, it does not need to be served to the user again. This is done with external JS files and inline JavaScript files after CloudFlare combines and minifies them on their servers. Your browser then makes an Ajax request to CloudFlare’s Edge and downloads the JavaScript files.

Easier to Understand Bullet Point Version

  1. CloudFlare rewrites all of the text/javascript types to text/rocketscript.
  2. The browser does not recognize text/rocketscript, therefore it ignores those resources and continues to load the page.
  3. 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.
  4. 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.
  5. For the JavaScript files not in the cache, CloudFlare combines them into groups of files, compresses, and serves them with GZIP.
  6. 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).
  7. 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.

  • Often times animations are broken because they are loaded in after they were expected to already load. Try using CSS animations instead of JavaScript one’s and you might notice the issues are resolved.
  • 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.
  • Sliders. If your website has a slider that is using a form of animation that is JavaScript based, your slider will likely continuously show the loading icon as opposed to loading.

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!

By |2018-02-27T13:01:23+00:00February 26th, 2018|Categories: Ask Scott|Tags: , |1 Comment

About the Author:

Scott Hartley is a WordPress Developer who focuses on website performance optimization, SEO, and security. He can't tell you what a color wheel is but he knows the intricacies of making a website load quickly.

One Comment

  1. Rebecca Red March 13, 2018 at 8:39 pm - Reply

    I think this is something that I might need to get added to my blog to make it load a bit faster thanks!

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.