Understand how Rocker Loader can improve page load time.

Overview

Rocket Loader prioritizes your website's content (text, images, fonts etc) by deferring the loading of all of your JavaScript until after rendering.

This type of loading (known as asynchronous loading) leads to earlier rendering of your page content. Rocket Loader handles both inline and external scripts, while maintaining order of execution. Cloudflare will detect incompatible browsers and disable Rocket Loader.

On pages with JavaScript, this results in a much faster loading experience for your users and improves the following performance metrics:

• Time to First Paint (TTFP)
• Time to First Contentful Paint (TTFCP)
• Time to First Meaningful Paint (TTFMP)
• Document Load

Access Rocket Loader

To access Rocket Loader in the Cloudflare Dashboard:

1. Log into the Cloudflare dashboard.
2. Select your account and website.
3. Go to Speed > Optimization.
4. Scroll down until you find Rocket Loader.

Ignore individual JavaScripts

You can have Rocket Loader ignore individual scripts by adding the data-cfasync="false" attribute to the relevant script tag, for example:

<script data-cfasync="false" src="/javascript.js"></script>      

Rocket Loader will still optimise the loading of all other scripts on the page.

Notes:

1. Adding this attribute within JavaScript will not work if you wish to exclude the script from Rocket Loader.
2. If the script you want Rocket Loader to ignore has dependency on other JavaScript(s) on the page, those depedencies must also have the data-cfasync="false" attribute added.
3. The 'data-cfasync' attribute must be added before the 'src' attribute. 
4. Rocket Loader will recognise the tag when either single or double quotes are placed around the attribute value. 

Alternative:

If Rocket Loader is only impacting a specific page, then consider using a Page Rule to exclude that page by URL from optional performance features.

Related resources

• What is Content Security Policy (CSP), and how can I use it with Cloudflare?