Support » Plugin: Cloudflare » rocket loader breaking onload JS on linked CSS

  • Resolved Optimizing Matters

    (@optimizingmatters)



    Hi colleagues, I’m Frank, author of Autoptimize.

    I pushed out a new release 2 days ageo, which includes Filamentgroup’s loadCSS solution to load the CSS in a deferred manner. The basis of this is e.g.;

    
    <link rel="preload" as="style" media="all" href="https://somesite.com/wp-content/cache/autoptimize/css/autoptimize_d97be2d1e59fda6be542613822904ed1.css" onload="this.rel='stylesheet'" />

    Now when rocketloader is active, the onload handler’s JS gets (badly) broken.

    -> so can I prevent that somehow on my side (similar to the data-cfasync='false' for script tags)?
    -> or can you from your side fix this somehow (given the popularity of Filamentgroup’s loadCSS this is bound to happen more then just for Autoptimize users)

    Kind regards,
    frank

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author jwineman

    (@jwineman)

    Hi Frank,

    Correct, you can prevent rocket loader from executing by adding data-cfsync=false to the tag.

    Thanks,
    John

    even if the tag isn’t a <script src=, but <link href= ?

    Plugin Author jwineman

    (@jwineman)

    Ah I understand. Let me check and get back to you.

    sure 🙂

    any news on that topic @jwineman? 🙂

    Plugin Author jwineman

    (@jwineman)

    Hey,

    Here is a quote from one of the engineers on rocket loader:

    Rocket Loader doesn’t handle link tags in any special way, so there’s no need to insert the “data-cfasync” tag on them. The JavaScript that inserts them, however, is effected by Rocket Loader; that JavaScript does need the “data-cfasync” tag added in the HTML.

    As for JavaScript handlers defined inside the HTML: there’s no way to disable their rewriting when Rocket Loader is enabled, though the rewriting shouldn’t effect the outcome (this should still be referencing the specific element).

    Rocket Loader is in beta, so there may be edge cases it doesn’t handle well, so you may wish to notify site owners to disable Rocket Loader when using the Autoptimize plugin.

    To summarize Rocket Loader isn’t set up to handle <link/> (like you probably assumed). Unfortunately the solution here is to advise your customers to disable Rocket Loader.

    thanks for the feedback @jwineman.

    is there a constant, filter, action, function or object I can check for to determine if rocketloader is active?

    Plugin Author jwineman

    (@jwineman)

    When Rocket Loader is enabled you’ll see code similar to below injected:
    `
    //<![CDATA[
    try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:0,byc:0,owlid:”cf”,bag2:1,mirage2:0,oracle:0,paths:{cloudflare:”/cdn-cgi/nexp/dok3v=1613a3a185/”},atok:”3c8da9a49931c38883a0304d96c6c413″,petok:”2a5b4cfaa309d7067a77dfba4e5c5caabbbe8872-1498583646-1800″,zone:”[DOMAIN.COM]”,rocket:”a”,apps:{}}];document.write(‘<script type=”text/javascript” src=”//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=85b614c0f6/cloudflare.min.js”><‘+’\/script>’);}}catch(e){};
    //]]>
    `
    You should be able to check for the existence of window.CloudFlare. <script> tags will also have data-rocketsrc="" or type="text/rocketscript" appended to them.

    Thanks,
    John

    Plugin Author jwineman

    (@jwineman)

    We omit wp-admin/ urls from rocket loader by the way.

    Plugin Author jwineman

    (@jwineman)

    Resolved.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘rocket loader breaking onload JS on linked CSS’ is closed to new replies.