• Resolved ispreview

    (@ispreview)


    We’ve been doing a bit of work on site optimisation this week and one of the areas that crops up in ‘red’ via Google Pagespeed Insights is the WPP JavaScript call at the top of the page.

    <script   src="https://www.MYSITE.com/../plugins/wordpress-popular-posts/assets/js/wpp.min.js?ver=6.4.2" id="wpp-js-js"></script>

    Google identifies this in red under the “Eliminate render-blocking resources” tag. I’m just wondering if there’s anything you’d recommend for improving this, but which won’t stop views being correctly tracked? I’m afraid to defer the script (not actually sure how to add this to the auto-generated line either?) or to push it to the bottom of the page, in case I damage how it works.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Hector Cabrera

    (@hcabrera)

    Hey @ispreview,

    The script itself is only around 5Kb (and only 2Kb when gzipped) so deferring it won’t really help your site’s performance in any noticeable way.

    From personal experience (full-time web dev here), take suggestions/recommendations from Google Pagespeed Insights with a grain of salt. They are useful, but sometimes these recommendations might not make a lot of sense for some use cases (like this one in my humble opinion.)

    I’m afraid to defer the script (not actually sure how to add this to the auto-generated line either?) or to push it to the bottom of the page, in case I damage how it works

    Deferrig the script might be OK, it really depends on how you do it (eg. there are optimization plugins that handle this for you) but do make sure to test everything afterwards.

    Also, you can’t “defer” inline script tags as they’re not really loading anything. It’s all inline code. As long as it’s on the page and the wpp.min.js script can find it everything should work.

    I highly recommend setting up a staging/dev site to perform these experiments to avoid affecting the live site. Once you’re 100% sure that your changes didn’t introduce any unwanted side effects that’s when you apply them to the live site.

    Thread Starter ispreview

    (@ispreview)

    I’m trying not to add more plugins to WordPress right now :). Is there another way to add the defer tag to the wpp.min.js?ver=6.4.2 line, as it’s added to the header by the plugin and not manually.

    Plugin Author Hector Cabrera

    (@hcabrera)

    You could use the script_loader_tag filter hook to modify the actual script tag (which to me feels a bit like a hack but WordPress doesn’t currently provide any other way to do this), like so for example:

    /**
     * Adds 'defer' parameter to WPP's script
     *
     * @param  string  $tag     The script tag
     * @param  string  $handle  The script "handle" (unique identifier)
     * @param  string  $src     The script URL
     * @return string  $tag     The (modified) script tag
     */
    function defer_wpp_script( $tag, $handle, $src )
    {
        if ( 'wpp' != $handle ) {
            return $tag;
        }
    
        return str_replace( '<script', '<script defer', $tag );
    }
    add_filter( 'script_loader_tag', 'defer_wpp_script', 10, 3 );

    Put that in your theme’s functions.php file and you should be good to go. If you’re using a caching plugin on your site then make sure to clear its page cache afterwards for this to take effect.

    Also, keep an eye on your popular posts stats to make sure that everything’s working correctly.

    Thread Starter ispreview

    (@ispreview)

    Gave that a try, but it didn’t seem to add defer. I tried changing the handle from ‘wpp’ to ‘wpp-js-js’ too, but that didn’t work either. I also tried moving the add_filter call to the top of the code block, but no change. Not sure why it isn’t working, as it seems correct. I am not using any cache on my beta install.

    Plugin Author Hector Cabrera

    (@hcabrera)

    Ah, wrong handle. My bad. It’s wpp-js.

    Thread Starter ispreview

    (@ispreview)

    Yep, that worked :), although it does catch the inline code too (<script defer id=”wpp-json” type=”application/json”>), as well as the main .js line (not sure if this is a good or bad thing?). I’ve also noticed that WordPress seems to now be recommending a different approach, but the examples they give seem to include a hard coded URL.

    Registering scripts with `async` and `defer` attributes in WordPress 6.3

    Plugin Author Hector Cabrera

    (@hcabrera)

    Yep, that worked ??

    Good!

    although it does catch the inline code too

    I don’t believe that that’ll be a problem but monitor the situation and see what happens.

    I’ve also noticed that WordPress seems to now be recommending a different approach, but the examples they give seem to include a hard coded URL.

    I’ve seen that before but thanks for sharing.

    As stated earlier, WPP’s script is very small and should load pretty quickly even on very slow Internet connections. Deferring it won’t really make any substancial difference performance wise, if anything it might even cause issues under certain circumstances and so I honestly see no good reason to do so.

    Fortunately WordPress at least provides a way for users that do want to defer the loading of the script for whatever reason.

    If you have any other questions feel free to ask.

    Have a nice rest of your day / night!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Optimise the java call’ is closed to new replies.