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.
- 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.
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:
\<script data-cfasync="true" src="/example.js" />
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:
\<script data-cfasync="false" src="/example.js" />]
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.