Rocket Loader for Wordpress

Controlling Cloudflare Rocket Loader for WordPress

Ernest Marcinko Tutorials, Wordpress 2 Comments

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.png.scaled500_1_[1]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?

First of all, you need a Cloudflare account. After you managed to set up your domains to run wiht cloudflare, there is an option to turn on Rocket Loader. This snippet will grab all of your javascript files and load them asynchronously.

Why is that good, you ask? Well, javascript loading by default is blocking, which means, that the files are loaded and executed one by one. This takes time. There is a way to define asynchronous javascript loading with the HTML 5 async and defer attribute, but that is entirely different from what rocket loader does. The async attribute ignores the order of the javascript files, and the defer doesn’t, but there are still incompatibilities from browser to OS. Rocket Loader however provides a platform, which works for each browser and OS the same way.

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

Rocket Loader

Automatic mode

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.

Don’t forget to check every javascript powered part of your site! Rocket Loader in some cases can cause issues with ceartain scripts, so always double check your site after loading it. But what should you do, if you want to load some of your assets non-asynchronously, or some of the scripts are not working with rocket loader? That’s what the manual mode is for.

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:

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

That would be ok, but it won’t ignore the script if the type=’text/javascript’ attribute is present.

The problem is, that in WordPress we don’t have direct access to all javascript declarations, it’s only possible to modify the script url by using the clean_url filter. That’s not enough. We must also remove thetype attribute from the scripts. How should we do that?

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:

function rocket_loader_attributes_start() {
    ob_start();
}

function rocket_loader_attributes_end() {
    $script_out = ob_get_clean();
    $script_out = str_replace(
      "type='text/javascript' src='{rocket-ignore}", 
      'data-cfasync="false"'." src='", 
      $script_out);  
    print $script_out;
}

function rocket_loader_attributes_mark($url) {
    // Set up which scripts/strings to ignore
    $ignore = array (
        'script1.js'
    );
    //matches only the script file name
    preg_match('/(.*)\?/', $url, $_url);
    if (isset($_url[1]) && substr($_url[1], -3)=='.js') {
      foreach($ignore as $s) {
         if (strpos($_url[1], $s)!==false)
           return "{rocket-ignore}$url";
      }
      return "$url' data-cfasync='true";
    }

    return "$url";

}
if (!is_admin()) {
  add_filter( 'clean_url', 'rocket_loader_attributes_mark', 11, 1);
  add_action( 'wp_print_scripts', 'rocket_loader_attributes_start');
  add_action( 'print_head_scripts', 'rocket_loader_attributes_end');
}

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.

Related Posts
Filter by
Post Page
Tutorials Wordpress Blog jQuery Commercial Plugins Wordpress Design Free Plugins ajax ajax search ajax search pro search
Sort by

Maximum performance with WordPress

2014-03-24 18:26:32
admin

7

Using Ajax in your WordPress plugins

2014-04-14 13:23:29
admin

4

Item Transition Inspiration with jQuery

2014-03-21 19:26:44
admin

3

Ajax Search Pro for WordPress v2.4

2012-11-06 19:27:10
admin

3

Polaroid Slider for WordPress

2012-10-09 18:26:50
admin

3

jQuery element rotation plugin

In my previous project I needed to rotate some elements, but I hadn't found any jQuery plugins regarding this issue.
2012-10-16 18:50:00
admin

2

Related Posts Pro for WordPress

2014-07-04 14:07:19
admin

1

WordPress ping list for 2014

2014-03-20 14:19:25
admin

1

How to set up W3 Total cache with MaxCDN

2014-03-20 13:15:00
admin

1

WordPress - Widget select box

2014-03-18 09:40:58
admin

1

Like this plugin?

2014-07-01 00:00:00
anago

999

Ernest Marcinko

WordPress developer, javascript enthusiast, photoshop clicker and the founder of wp-dreams.com

Comments 2

  1. Pingback: Maximum performance with WordPress | WordPress Dreams

  2. Sarah Lorenzen

    I’m trying to implement your solution for my client’s website: www.globalwealthpartnersinc.com

    I’m using a child theme though, and I’m sure that will somehow change possibly the names of the script files from ‘script1.js’ to maybe ‘../script1.js’ or something entirely different?

    In your last bit of code with the ‘wp_print_scripts’, wouldn’t you want to use wp-enqueue instead?

    Also, when I tried to implement the code as-is then naming all the scripts I needed ignored, I got an error, across a white screen and the site was down.

    I am trying to have all the Layer Slider plugin scripts ignored. The rocket loader is awesome, except it then means I can’t have the Sliders showing up properly. Hope you can help me figure this out.

Leave a Reply

Your email address will not be published. Required fields are marked *


5 + 5 =