Overview
Cloudflare Rocket Loader™ is a performance optimisation tool that improves the loading speed of web pages containing JavaScript. It works by deferring the loading of all JavaScript until after the main content of your website (text, images, and fonts) has finished rendering.
This “asynchronous” loading prevents JavaScript from blocking the rest of the page, leading to a much faster “perceived” load time and improved performance scores, such as Time to First Contentful Paint (FCP).
Step-by-Step:
- Login to your Client Area account
- Navigate to Cloud Services > My Products & Services and select your Cloudflare service.
- On the left-hand sidebar menu, click on the Speed dropdown and select Settings.
- Switch the toggle to On to enable the feature.
- Automatic Mode (Default): Cloudflare will automatically handle all scripts on your site.
- Manual Mode (Advanced): If you only want specific scripts to be optimized, you can use the API or Page Rules to set Rocket Loader to manual and add data-cfasync=”true” to individual script tags.
Verification
- Once enabled, open your website in a new private/incognito browser window.
- Check that all interactive elements (like sliders, forms, or menus) are functioning correctly.
Note: Because Rocket Loader changes the execution order of scripts, it can occasionally conflict with complex JavaScript-heavy themes or plugins. If you notice issues, simply toggle the feature back to Off.
Important Considerations
- Conflicts: If you are using a WordPress optimisation plugin like WP Rocket, it is often recommended to disable Rocket Loader to prevent redundant or conflicting optimisations.
- Content Security Policy (CSP): If your site uses a strict CSP header, you may need to update it to allow Cloudflare’s optimisation scripts to run.
Share this:
