2

I am looking to enable CloudFlare's RocketLoader feature that enables asynchronous loading of Javascript for my Wordpress site. The problem, however, is that there is one plugin for that I want to be loaded normally.

From a technical point of view, according to https://www.cloudflare.com/wiki/Rocket_Loader, I simply need to change any script tag I want ignored to have the data-cfasync="false" attribute as follows: <script data-cfasync="false" src="/javascript.js"></script>

Unfortunately, I can't seem to figure out how to do this for plugins that are automatically loaded by Wordpress.

Any ideas?

2
  • Can I close your question as a duplicate of wordpress.stackexchange.com/q/38319/73? The answer there will solve your problem too.
    – fuxia
    Apr 27, 2012 at 17:20
  • I just took a look at it, but I actually don't understand the solution. I may need an interpretation...
    – Brideau
    Apr 27, 2012 at 18:41

1 Answer 1

2

The following solution assumes that your plugins are using wp_enqueue_script() to insert scripts into the HTML code. If they don't they are broken by design and we cannot change the script tag.

This code works like the one in this answer, in fact, it is almost a duplicate …

First make two lists of all script URIs you want be ignored or not ignored by the rocket loader script. Then fill the $optimize and the $ignore arrays in the following script with these URIs.

function rocket_loader_attributes( $url )
{
    $optimize = array (
        'http://example.com/nr1.js',
        'http://example.com/nr2.js'
    );
    $ignore = array (
        'http://example.com/nr3.js',
        'http://example.com/nr4.js'
    );

    if ( in_array( $url, $optimize ) )
    { // this will be optimized
        return "$url' data-cfasync='true";
    }

    if ( in_array( $url, $ignore ) )
    { // this will be ignored
        return "$url' data-cfasync='false";
    }

    return $url;
}
add_filter( 'clean_url', 'rocket_loader_attributes', 11, 1 );

You can create a plugin with this code or – second best option – add it to your theme's functions.php.

6
  • That is a brilliant solution, toscho ... and works, technically, from a javascript perspective and a WordPress perspective. For some unknown reason, however, it just doesn't work the way CloudFlare is set up. The html output looks as it should, with data-cfasync='true' showing. But without the "quotation marks", it doesn't invoke CloudFlare's rocketscript async functionality, so it remains text/javascript, not text/rocketscript. But you're definitely on to something, and perhaps something can still be done with this solution, which was brilliant. Sep 23, 2013 at 6:00
  • yes this is the best practice ti have seen till no for this issue. but the problem is that the ignore list for some reason it is ignored from rocket loader but also the script is nor working on wordpress! Jan 7, 2016 at 22:24
  • According to Cloudflare: data-cfasync="[bool]" needs to come before the src attribute. Note: The 'data-cfasync' attribute must be added to the HTML script tag before the 'src' attribute (adding the attribute via JavaScript is not sufficient).
    – Andy Gee
    May 13, 2016 at 10:09
  • @AndyGee See the linked answer wordpress.stackexchange.com/questions/38319/… – this is possible too (albeit a rather weird restriction from Cloudflare's side).
    – fuxia
    May 13, 2016 at 10:17
  • 1
    @AndyGee No, it doesn't See the linked answer!
    – fuxia
    May 13, 2016 at 10:45

Not the answer you're looking for? Browse other questions tagged or ask your own question.