[Hummingbird] Remove render-blocking JavaScript

Hi,
I did a Google PageSpeed Insights test and the desktop result was 91!

But unfortunately, the mobile one was only 65. The main culprit was all the hb.wpmucdn.com scripts were placed above the fold. How do I move them to below the fold?

You can see the results here:
http://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2F47media.com.sg%2Fsite&tab=mobile

Below are some of the above the fold javascripts and css files:

https://hb.wpmucdn.com/…/58e1d34d-0a36-444d-a4ee-40e05fe34d1e.js
https://hb.wpmucdn.com/…/9119b274-b8a4-4578-8e45-943ed6d6017e.js
https://hb.wpmucdn.com/…/48cdf44e-0f01-401c-9787-1253cf23bf14.js

https://hb.wpmucdn.com/…9f3db642-56f1-4552-812e-ced0557dd893.css
https://hb.wpmucdn.com/…0870ce4c-efea-42be-bfa4-9cba425d4e2e.css
https://hb.wpmucdn.com/…e2f5339c-7028-4ad8-9712-57810e7eaff8.css

  • Dimitris

    Hello Melvin,

    hope you're doing good and thanks for reaching us! :slight_smile:

    You can find more detailed information about render-blocking assets and how to resolve them from HummingBird in an article from our blog here:
    https://premium.wpmudev.org/blog/eliminate-render-blocking-issues-hummingbird/

    Main concept of this is to load only the necessary assets (CSS and JS files) for the first screen of your homepage. By first screen, we mean any content that's loaded without having to scroll further down, that's the above the fold content.
    So in general the solution is to push all other assets to the footer (or make CSS inline, or defer the JS calls) and keep only the ones needed for the above the fold content in the header. This may not be 100% possible though, without breaking website, due to the way some theme/plugins work, so you will have to experiment with that, in order to get the best possible set of settings.
    HummingBird can assist you on this via the Asset Optimisation module, and more specifically after enabling Advanced mode:

    and from the special tool it provides, to add any critical (above-the-fold) CSS:

    As this is a trial and error procedure, I'd rather advise to start experimenting with these settings in batches, so you can easily go one step back, in case something gets broken in frontend.
    I'd always advisable to also have a backup in place, just in case you need to restore to a previous working condition, or even better, use a staging environment first, meaning a complete and exact copy of whole WP installation into another location/folder in the same server, using a separate database.

    Warm regards,
    Dimitris

  • Melvin

    I know what you're talking about.

    However, these render blocking scripts errors only appear in the Mobile results, but not the desktop results. Unless Hummingbird Pro only moves those blocking scripts to below the footer for desktop, I don't understand why is this happening?.

    See the messages here in the mobile results. 1 js and 8 css scripts: https://developers.google.com/speed/pagespeed/insights/?url=https://47media.com.sg/site&tab=mobile

    And here's the result for desktop. There's only 1 js blocking script: https://developers.google.com/speed/pagespeed/insights/?url=https://47media.com.sg/site&tab=desktop

    Other than the core js script, I've already moved all the JS scripts and CSS files to the footer using HummingBird Pro. It seems that it only works for desktop but not mobile. It's strange, isn't it?

  • Nastia

    Hello Melvin

    Hope you're doing well!

    The "Remove render-blocking JavaScript:" shows up only for one JS file, the jquery.js file.

    If this file is showing Asset Optmization, please move into the Footer or select Defer option for it.

    Please note, getting perfect 100% score is almost not possible. Here is a quote from our plugin's usage page:

    Some plugins and themes due to their design may not be able to handle their scripts deferred to the footer without breaking, so will have to be left in their original position. And often combining and minifying all CSS files will not completely remove their impact on your score. Just try multiple combinations to improve this score as much as possible.

    To improve the score for Optimize CSS Delivery, inline CSS code and if the HTTP2 Protocol is not installed on your server, please try to combine as much CSS and JS is possible.

    Do the changes to one file at the time, every time checking the front end for changes. Please have a look at this article for more information:
    https://premium.wpmudev.org/blog/eliminate-render-blocking-issues-hummingbird/

    Hope this helps!

    Cheers,
    Nastia