Mobile render-blocking resources

Hi @carnets2routards

I hope you’re well today!

I’ve visited the site in question and checked and those “Hummingbird assets” that you mentioned are not really assets that “belong to Hummingbird plugin” but are combined JS/CSS files created by Hummingbird Asset Optimization out of other CSS/JS files that your site normally loads.

To give you a better idea on what’s happening, let me give an example:

– let’s say that Hummingbird Asset Optimization is disabled on site
– site loads 3 JS files (5, 10 and 15kb in size) and 2 CSS files (15 and 35kb in size)

– that makes together total of 5 assets, JS being 30kb and CSS 50kb in total

– now you run Hummingbird’s Asset Optimization

– it compresses (minification) these files so JS in total becomes 25Kb and CSS 40kb
– and it combines them so instead of loading 3 JS files and 2 CSS files it loads no just one JS file and one CSS file.

Naturally, they might appear quite big and the more assets are combined together, the bigger these files are. But it’s still less files and they are compressed in comparison to no Asset Optimization.

However, to deal with render-blocking resources, you would want to go a step further with this. Automatic Asset Optimization usually does a good job and I think in case of your site it preforms really well but it only compresses and combines files. It doesn’t change the way they are loaded.

So if you want to try to optimize it even more, you would want to

– switch Asset Optimization to “Manual” mode (make sure to use “Apply Configurations” while switching)

– you’ll see a set of buttons next to each listed file; first two already enabled for most of them (these are “compress” and “combine”) and then next three disabled

– the last one is to exclude file from loading at all so I’d ignore it but the remaining two are “inline” and “move to footer” for CSS and “move to footer” and “load after page is loaded for JS.

– you would want to “experiment” a bit with this buttons to get as many “move to footer” (for CSS and JS) and “load after page is loaded” (for JS) enabled as possible without breaking the site.

Note please: different sites may react in different ways to these settings so it’s better to set these options “few at the times” rather than all at once while checking the site every few changes made.

But this would let you eliminate as many “render blocking resources” as possible in this specific setup.

Best regards,
Adam

Wow, that’s what I call a support answer! Thank you so much for your time, it’s really clear. I’ll try the manual settings few at a time this week and come back to you if I see any changes.

Thank again for your help @wpmudev-support8 !
Best regards,
Claire

Hi @wpmudev-support8 ,

I got a question, while I try to defer CSS and JS files, should I check every pages of the website at each change?

Because for example if I move the contact form CSS to the footer, it might work OK on the index but how it will perform if I go directly to the contact page?

Thanks again for your advice!

Hi @carnets2routards,

That would be correct. To ensure the assets being deferred are not causing issues on the contact page. Asset Optimization will detect all assets on site and each page will make request to certain assets per their need(depending on setup)

Let us know if you have any additional questions.

Best,
Jonathan S

Hi @carnets2routards,

We haven’t heard from you in a while, I’ll mark this thread as resolved now. Please feel free to re-open the thread if you need further assistance.

Best Regards
Nithin