The conventional wisdom in web performance circles is that you want to combine multiple javascript and CSS files. The reason for this is that there is significant overhead every time you setup a new HTTP request. More requests, more wasted overhead.
Why Minimize HTTP Requests?
This problem is magnified on mobile devices. Your smart phone can stream video from YouTube without stuttering, because it is a single HTTP connection, but it often falters on seemingly simple web pages, because they are made up of a number of separate objects that need to all be loaded through their own HTTP requests. Mobile networks have reasonable bandwidth once a connection is established, but each new connection has a probability of failing that can block page loading.
Combining Javascript and CSS seems like a sensible solution, but it runs into multiple problems:
Combined Javascript or CSS can clobber the namespace of other scripts and create unpredictable bugs.
Combined Javascript or CSS can become large and unwieldy with all code that is needed site-wide leading to a slow initial-load time.
One change to any part of the combined Javascript and CSS file invalidates the whole file in the browser's cache and requires a slow re-download.
Combined files can lose the benefits of cross-site Javascript CDNs (like CDNJS.com) which effectively pre-load common scripts into the visitor's cache before they arrive at your site.
It can be difficult or impossible to combine third party scripts like those used for things like Google AdSense, Facebook's Like Button, or the Twitter Follow Button.
At CloudFlare, we decided that while the goal of reducing the number of HTTP requests was important for improving web performance, there had to be a better way than naively concatenating Javascript and CSS.
Introducing Rocket Loader
CloudFlare's approach to reducing HTTP requests is revolutionary. Dubbed "Rocket Loader," the system automatically detects tags that would require a new HTTP request. Instead of combining the files and leading to the issues above, Rocket Loader instead focuses on combining what really matters for performance: requests.
Just as YouTube opens a single HTTP connection and then streams down the video, Rocket Loader opens a single HTTP connection to CloudFlare's network and then streams the individual files through one request. The benefit is that, while there's only one request, the files remain atomic. As a result, unpredictable bugs are avoided, the browser can cache files locally and not re-request them, if one file changes it doesn't invalidate all the sites' other scripts, and it works as well with your own scripts as it does for third party scripts like AdSense and Facebook.
The net effect is you get the benefits of HTTP request reduction without the downsides of file combination. What does that translate into? Usually another 20% performance benefit on top of what CloudFlare already delivered, and even more for mobile devices.
Manual or Automatic
CloudFlare allows you to have full control over how Rocket Loader is enabled. You can choose Manual mode, in which case you need to mark the scripts you want to be combined on the page. You do this by adding cf-async="true" as the first attribute in the script tag:
\
Alternatively, you can have CloudFlare automatically apply Rocket Loader to all the resources on your page. In this case, if there's one resource that you don't want to be loaded via Rocket Loader, you can exclude it by adding cf-async="false" as the first attribute in the script tag:
\]
Solve the Real Problem
Rocket Loader is a great example of technology that CloudFlare has developed to solve a real problem the right way rather than sheepishly following the conventional wisdom. Rocket Loader leverages CloudFlare's global CDN platform in order to get the best possible performance for our users. We have big plans on how to expand Rocket Loader and help reduce the number of HTTP requests even more. Because it makes such a difference in web performance, we include Rocket Loader for free for every CloudFlare website. You can activate it from your CloudFlare Settings page with a single click, or learn more about all the ways CloudFlare can help optimizes your site.