jQuery not optimized in its location

In an attempt to optimize performance, I am placing my jquery file towards the bottom of my code on my sign up site...this however causes a problem in the sign up process when using blogtemplates because this plugin makes use of multiple instances of embedded jquery in the file blogtemplates.php

I have modified the file converting multiple embedded jquery instances into functions and then calling those functions in the footer at a lower priority so that the jquery that I am loading (from a cdn for even more speed) is loaded first. I would like these changes I have made to be included in the next update as I can see no downside to it and important for performance. Also perhaps this should be suggested for any other plugins that wpmudev writes. Would love your thoughts and below is the suggested changes I made.

<?PHP
function jquery_code_name() {
?>
<script type="text/javascript">
                                jQuery(document).ready(function($) {
                                 ...yada yada.......
                                }
</script>
<?PHP
}
add_action( 'wp_footer', 'jquery_code_name', 100 );
?>
  • Ben

    To include my main jquery file in my theme, i have the following in my functions:

    function modify_jquery() {
            if (!is_admin()) {
                    wp_deregister_script('jquery');
                    wp_enqueue_script('jquery', '//code.jquery.com/jquery-1.11.0.min.js', false, null, true);
            }
    }
    add_action('init', 'modify_jquery');

    And then as far as modifying the blogtemplates code I used the example I have above in the various areas of the plugin where i found inline jquery stuff.

  • Ash

    Please roll back the changes in blogtemplate files, then try this in stead of your current code:

    function modify_jquery() {
            if (!is_admin()) {
                    wp_deregister_script('jquery');
                    wp_enqueue_script('jquery', '//code.jquery.com/jquery-1.11.0.min.js', false, null, true);
            }
    }
    add_action('wp_enqueue_scripts', 'modify_jquery');

    Let me know if it works.

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

  • Jose

    Hey there @Ben,

    I'm not totally clear about what you posted. When you say "my jquery file" are you referring to the jQuery library or just to your custom code dependant on jQuery?

    Anyway, if I took you right, you want to render you DOM as fastest as possible, and therefore you are trying to load the scripts in the bottom of the code instead loading it in the head section.

    If this is the case, I don't recommend it at all for the main jQuery library. It should be loaded always inside the head section of your html to ensure that it is loaded and available when the DOM is rendered and the rest of scripts are executed. From the performance perspective it is totally acceptable since the full minimized library is only 38.5KB.

    Now, to replace the included library and switch to a CDN hosted version, your code is missing an important part. When you deregister a script, the dependent scripts won't load. And this is the case with Blog Template.
    This is an example:
    wp_enqueue_script( 'nbt-toolbar-scripts', NBT_PLUGIN_URL . 'blogtemplatesfiles/assets/js/toolbar.js', array( 'jquery' ) );
    The dependency array contains 'jquery', therefore it will check if jQuery is registered before loading.

    This code should work without need to modify the plugins that you are using. Note that we are calling to wp_register_script():

    function modify_jquery() {
    	wp_deregister_script( 'jquery' );
    	wp_register_script( 'jquery', '//code.jquery.com/jquery-1.11.0.min.js', false, '1.11', true );
    	wp_enqueue_script( 'jquery' );
    
    }
    
    add_action( 'wp_enqueue_scripts', 'modify_jquery' );

    Please let me know if this make sense for you. I might be missing something.

    Cheers!
    JJ

  • Ben

    @Jose

    Thanks for the response. The goal here is the make the google gods happy, in order to make them happy they request that jquery files be loaded towards the bottom.

    I am requesting that the wpmudev plugins be reviewed to place the extra plugin jquery at the wp_footer section vs inline or at the wp_head if not necessary. In the blog templates plugin, a good portion of the jquery is being placed inline I believe unnecessarily...correct? So I manually went into the plugin and changed it, but I would like in the next update for the blogtemplates jquery code to be called in the wp_footer section as well as a possible review of other wpmudev plugins to follow that same practice....thoughts?

  • Jose

    Got it.

    My thoughts are that you have a very valid point. :slight_smile:

    I just want to be clear that your issue above

    this however causes a problem in the sign up process when using blogtemplates because this plugin makes use of multiple instances of embedded jquery in the file blogtemplates.php

    is not caused by the inline scripts, but just because jQuery was not loaded yet or it was loaded without being registered.

    Definitively, the best approach the improve the page load times, is to defer the scripts to the bottom and put the styles at the top.

    Nevertheless, there are some specific cases where you wouldn't want to do that. The main jQuery library is one of those cases. If you take a look into the source code of popular sites, you will notice that they implement some kind of lazy loader like requireJS or similar for most of the scripts, but still includes jquery first in the head section. A good example of this is stackoverflow.com. And it is certainly one of the favorites sites for "google gods".

    Regarding how our plugins handle the script injection, we are aware that there are place to improvements, and there is not a unified way to do it across all the plugins.
    We always like to hear this kind of suggestion from the members. :slight_smile:

    I'll flag the lead developer to take note of this. Anyway, in this particular case, the injected scripts seems to be really narrow and should not affect the load times.
    Can you confirm if the plugin works fine without modifications and if the load times are affected or not using the approach that I suggested? (this is, deferring external scripts except jquery and making sure that the script is registered correctly).

    Thanks!
    JJ

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.