What is Rocket Loader?
Automatically optimizes your pages to minimize the number of network connections and ensure even third party resources won’t slow down page rendering.Cloudflare
Rocket loader from Cloudflare is definitely worth some time for every WordPress site owner. Proper configuration is however a little bit tricky, as there is only a limited access to the WordPress header.
How does it work?
The script currently has two possible active states:
- Automatic – chooses most of your srcript files to load asynchronously
- Manual (not working) – you can chose which files to load asynchronously
If you enable automatic mode, you don’t have to do nothing else. Purge the cache in cloudflare, reload your page, and you should already experience a faster page load.
How to control which scripts to ignore in automatic mode?
This thing is almsot broken, but here is the SOLUTION! On the cloudflare documentation page it is stated that the script tag must be in the following state to ignore rocket script auto mode:
Well, we must find the action that fires before the scripts are outputted, and the one that fires after the scripts are outputted:
- wp_print_scripts – this one fires before the scripts are printed
- wp_print_head_scripts – this one fires after the scripts are printed
Problem solved! All we need to do now is capture the output and replace the type attributes on scripts which we don’t want to use with rocket loader.
If you put this code into the themes function.php file, it will add the proper async attribues to each file, and you can also define the files to ignore as well:
By editing the $ignore array, you can can manually add the script files/strings you want to ignore from Rocket Loader. I’m using this handy snippet on few sites, and it’s working nicely.