Support » Developing with WordPress » How to defer javascript when the tag of enqueued script has two src urls?

  • I’m trying to defer javascript parsing of all my scripts. I added this code in the parent theme in functions.php:

    
    function defer_parsing_of_js(  $tag, $handle, $src  ) {
    
        if ( is_user_logged_in() ) return $tag; //don't break WP Admin
    
         if ( FALSE === strpos( $tag, '.js' ) ) return $tag;
         if ( strpos( $tag, 'jquery.js' ) ) return $tag;
    
         return str_replace( ' src', ' defer src', $tag );
    }
    add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10, 3 );
    

    I’d expect this code to defer all scripts but instead one script isn’t deferred.
    The script that doesn’t get deferred is the script that the WP-fastest cache plugin generated, the src looks something like this:
    /wp-content/cache/wpfc-minified/<some string>/<some string>.js

    The reason it’s not deferring is because the script tag associated with this cache script has two source urls…sort of? This causes some strange behavior. Here’s what I get when I examine the enqueued script by logging some information about the enqueued script within the defer_parsing_of_js function:

    var_dump("
    	\n 
    	handle:-------\n 
    	$handle 
    	\n
    	src:-------\n 
    	$src \n
    	1:---tag first time----\n  
    	$tag \n 
    	2:---tag second time----\n
    	$tag \n ");

    This outputs the following HTML:

    string(468) "
    handle:-------
    jquery-core 
    
    src:-------
    http://dashiellbarkhuss.com/danceprov/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp 
    
    1:---tag first time----
    <script src='//dashiellbarkhuss.com/danceprov/wp-content/cache/wpfc-minified/sgy1xwp/fpw0a.js' type='text/javascript'/>
    <!-- <script type='text/javascript' src='http://dashiellbarkhuss.com/danceprov/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script> -->
    
    2:---tag second time----
    <!-- <script type='text/javascript' src='http://dashiellbarkhuss.com/danceprov/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script> -->
    "

    (extra blank lines added for readability)

    What’s weird about this?:
    1. I’d expect this enqueued script to have one script tag. But instead it has two. When we log $tag the first time: the cache script and a jquery script. And then somehow it only has one script tag the second time $tag is called: the jquery tag. Where did the cache script tag go?
    2. The source is just the jquery source. But the actual script tag has two sources: the cache script and the jquery script.
    3. In the script tag, the jquery script is commented out.

    Because of the above, there’s no way for me to replace ‘src’ with ‘defer src’.
    When I str_replace( ' src', ' defer src', $tag ) the script, the returned value completely eliminates that first cache script, leaving only a commented out jquery script tag with ‘defer’ added. But I want to add defer to the cache script tag.

    <!-- <script type='text/javascript' defer src='http://dashiellbarkhuss.com/danceprov/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script> -->

    I’m so confused how this is happening. How can I defer the cache script?

    • This topic was modified 1 year, 1 month ago by dashbarkhuss.
    • This topic was modified 1 year, 1 month ago by bcworkz. Reason: var_dump code fixed

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • @dashbarkhuss

    As far as I can tell Fastest Cache bypasses the core WordPress hooks so your code is going to be ignored.

    It might be worth asking the author of the caching plugin if they can add deferring as a feature or option.

    Thread Starter dashbarkhuss

    (@dashbarkhuss)

    @mattyrob They do but it’s in premium.
    Since I can’t edit in in the hook I edited the plugin directly.

    I added defer to the link generating code in the plugin files. I’ll just have to remember to change this whenever I upgrade the plugin.

    $newLink = "<script defer src='".$jsLink."/".$jsFiles[0]."' type=\"text/javascript\"></script>";
    

    Line 240, wp-content/plugins/wp-fastest-cache/inc/js-ulilities.php

    @dashbarkhuss

    One of the advantages of open source code is you can edit it yourself if needed. 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to defer javascript when the tag of enqueued script has two src urls?’ is closed to new replies.