How To Improve (Remove) Render Blocking Resources?

Hi,

I need a little help regarding the performance test result within the Hummingbird admin area. The majority of listed results are almost 100/100, but one is just 18/100. The recommendation says I should remove render blocking resources. When clicking on the 'Improve' button I see a statement saying:

Your page has 30 blocking script resources and 24 blocking CSS resources. This causes a delay in rendering your page.

At the bottom of the page I then read:

Note that it can be very hard to get a perfect score for this rule. 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.

So what exactly can I do? The list contains lots of js and css related URLs of plugins and the activated theme. Each of it might be important for proper functions. How can I at least approach this issue?

Thanks
Rod

  • Katya Tsihotska

    Hi Rod

    Hope you're having a wonderful day!

    To eliminate the render-blocking issue, I would recommend you to use Minification feature of the Hummingbird plugin. First of all, you will need to enable this feature. To do this, go to Network Dashboard -> Hummingbird -> Dashboard:

    After this, you will see Hummingbird page in your main site and subsites dashboards, there you can set up the minification. I'd suggest to do the following:
    1. Enable Inline option for as many CSS files as possible
    2. Enable Footer and/or Defer option for as many JS files as possible.

    As your server has HTTP/2 there is no need to enable Combine option.

    The most important thing when working with minification and making changes to how your site loads files is that you test things out after every single change, so it's better to enable this options for each file one by one and check how your site works. If there are any issues, you need to disable last enabled option for current file and proceed further with next option/file.

    It is not recommended to select all your files, click on Bulk Update, and enable all of the options. This could have disastrous consequences for your site, and break a lot of things! Please do not do this!

    You won’t be able to apply every option to every file, so it is very important to test as you go. (And make sure to click on Save Changes beforehand!).

    Hope this helps.

    Kind regards,
    Katya

  • Rod

    Hi Katya,

    Thanks for the fast reply. I was already thinking about this but as I am on the LIVE site now I did not touch anything yet. The reason is simple as you say, it must be done carefully and I only can admit because formerly when testing those kinds of tasks I had some very bad experience regarding this FOUC thing. I also found some good instructions here:

    https://kinsta.com/blog/eliminate-render-blocking-javascript-css/

    But the main reason why I did not start yet to dive into is that 'minification' is enabled on Cloudflare and I did not want to kind of 'overminify' on the server side. But obviously, it isn't sufficient yet. Well, I guess I have to go on one file by the other and see what works.

    Thanks for your support
    Rod

  • Rod

    Katya,

    I just remember another point in my overall configuration status which might have an impact here too. I am using a service named 'Critical CSS'. Usually, this is configured together with optimisation plugins like 'Autoptimate' or the like. But I thought Hummingbird and Critical CSS would be a better combination. Maybe you have some experience with this issue and could give me some advanced advice?

    Thanks
    Rod

  • Katya Tsihotska

    Hi Rod :slight_smile:

    First of all, if you're using CloudFlare, you will need to enable Development mode, in other case you won't be able to see any changes on your site.
    Please, check the following article to learn how to do this:
    https://www.fastcomet.com/tutorials/cloudflare/development-mode

    As for the CloudFlare minification, you can leave it enabled at least for HTML. Also, when you finish setting of Hummingbird Minification, you can enable CloudFlare minification for CSS and JS and if it doesn't cause any issue, then you can leave it enabled as well.

    As for the Critical CSS, unfortunately, I don't have any experience with using it together with Hummingbird. However, I would recommend you to avoid using similar options in few plugins at the same time, as this may cause a conflict. Anything else should work fine.

    If you have any additional questions please let us know, we always are happy to help.

    Kind regards,
    Katya

  • Rod

    Hi Katya,

    thanks for the instructions advices.

    I have done mentioned Cloudflare settings and activated the minification as described. I was then working on the Hummingbird's subsite pages. Two main issues I have to clear up now for further proceeding:

    1. Only 'Minify' sections were partially marked in 'light blue' to minify the file size. I was expecting many light blue marked sections too at 'Inline' and 'Footer' or 'Defer', but all of them showed up grey. I tried to change one of them and it turned into that light blue then. So does that mean all css and js files in the list are already optimized regarding 'inline', 'footer' and/or 'defer' sections?

    I ask this because my overall performance scan still shows a bad value at the 'Remove Render Blocking Section' (screenshots attached). Opening 'Recommandation' still shows a list of some 30 js and css files each saying:
    --------------
    None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
    --------------
    pages

    But what can I do when the related sections are just marked in grey on the site's Hummingbird?

    2. Saving changes on the main site's and first subsite's page of Hummingbird was pretty fast, but the second subsite makes it hard to save changes. It takes so long that it results many times in a 504 timeout error. The difference between the main site and first subsite is that the second subsite is a WooCommerce shop with almost 55K+ products. Any other configuration is almost the same. I experience a similar behavior on the second subsite when I want to open the WP menu section and/or save changes there. It also results in the 504 timeout error most of the times.

    If it makes sense I would grant access to the admin area. Just let me know.

    Regarding the Cristical CSS service it seems to work properly.

    Thanks

    Rod

  • Katya Tsihotska

    Hi Rod

    Hope you're fine!

    1. Only 'Minify' sections were partially marked in 'light blue' to minify the file size. I was expecting many light blue marked sections too at 'Inline' and 'Footer' or 'Defer', but all of them showed up grey. I tried to change one of them and it turned into that light blue then. So does that mean all css and js files in the list are already optimized regarding 'inline', 'footer' and/or 'defer' sections?

    I've checked your Minification settings and noted that almost all minification options are disabled, that's why you still have so low score at the 'Remove Render Blocking Resources' section. Let's clarify what's happening there :slight_smile:
    1. If the option has light-blue background, it means that it's already enabled.
    2. If the option has grey background, it means that it's not available. This could be in 2 cases:
    - If the Minify option is not available then the file is already minified by your theme/plugin and there is no need to minify it again. This relates to files those has one of the following extensions: .min.css or .min.js
    - If the Combine option is not available it means that your server has HTTP/2 activated and there is no need to combine files as this won't improve performance.

    3. If the option has white background it means that it's not activated yet, but it can be activated.

    Usually, Minify option is enabled for all files (except already minified files) by default. As for the Inline, Footer, and Defer options, you will need to activate them your self. As I described in my first reply, you need to activate these options one by one for each file and each time check if it didn't break your site.

    2. Saving changes on the main site's and first subsite's page of Hummingbird was pretty fast, but the second subsite makes it hard to save changes. It takes so long that it results many times in a 504 timeout error. The difference between the main site and first subsite is that the second subsite is a WooCommerce shop with almost 55K+ products. Any other configuration is almost the same. I experience a similar behavior on the second subsite when I want to open the WP menu section and/or save changes there. It also results in the 504 timeout error most of the times.

    Yes, such big number of products (or posts, pages, etc) on the site could cause slowness on the site and even internal and timeout errors. This makes some of the tables in your database very very large, and due to this some queries could be processed very slowly and cause timeouts.

    I've checked PHP and WordPress configuration and I see that max_execution_time and memory limits on your site already set to pretty big values, so it doesn't make sense to increase them. I would recommend you to try to optimize your database. Here is a good article on how to do this:
    https://premium.wpmudev.org/blog/optimizing-your-wordpress-database-a-complete-guide/

    You also can try to contact your hosting provider in order if they can help you to increase resourses and limits on your server.

    Hope it helps.

    Kind regards,
    Katya

  • Katya Tsihotska

    Hi Rod

    Actually, it doesn't matter in which order enable minification options. But I don't recommend you to enable few options at the same time, as if it will cause an issue, you won't know which exactly option is causing this.

    Also, keep in mind, that if you enable 'Footer' option for CSS files, it means that the file will be loaded after the all visible content and because of that your site can looks "not-styled" for first few moments of loading. If you want to avoid such effect, I would recommend you to enable only 'Inline' option for CSS files.

    And don't forget to enable 'Minify' option for all CSS and JS files as well :slight_smile:

    Have a great weekend and Happy New Year, Rod! :christmas_tree:

  • Rod

    Katya,

    please allow me two last questions.

    1. I noted that when clicking on one of those sections with white backgrounds a button named 'Discard Changes' appears at the side of the Savings button. Does that mean I can test the homepage immediately without saving anything yet and just continue testing and saving all changes when finished all tests?

    2. If 'Inline' is preferred choice to set for .css files, which is the one preferred for .js files? Should I start testing with 'defer' or with 'footer'? And when the result of the preferred choice is good, does it make sense to test the other one too? Meaning the best result would come along with BOTH choices?

    Thanks
    Rod

  • Katya Tsihotska

    Hi Rod

    Hope you had a great time during the holidays!

    1. I noted that when clicking on one of those sections with white backgrounds a button named 'Discard Changes' appears at the side of the Savings button. Does that mean I can test the homepage immediately without saving anything yet and just continue testing and saving all changes when finished all tests?

    No, it doesn't mean that you can see changes on your site. To apply changes to your site, you need to click "Save Changes" button and refresh the front page of your site.

    2. If 'Inline' is preferred choice to set for .css files, which is the one preferred for .js files? Should I start testing with 'defer' or with 'footer'? And when the result of the preferred choice is good, does it make sense to test the other one too? Meaning the best result would come along with BOTH choices?

    There is no preferred option for .js files, you can enable both options for the same file, but it's better to test your site after enabling each option, even if one of them doesn't cause any issues.

    Hope it helps :slight_smile:

    Kind regards,
    Katya

  • Rod

    Hi Katya,

    thanks for this last information to complete my point of view.

    I tested file after file and often it showed up with different results either on the main site or the subsites. I ended up disabling minification totally because the file list was almost endless and I don't want to risk anything on the frontend when changes weren't to accept. Have to watch it for a while and then I might give it a try again.

    Anyway, thank you for the excellent support. It helped me a lot to understand the big picture.

    Best wishes for 2018.
    Rod

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.