[Hummingbird] Hummingbird : what's the logic to optimize deeper ?

Greetings,

So I used Hummingbird on many of my websites and I have to say it's pretty good ! It does a lot of stuff automagically, which is great news for me (I'm decent with tech stuff and I'm a self-learner, but it's still not my specialty).

The problem is, on all my website I get stuck at about 80/85 optimization, and it's ALWAYS the same thing that's the bottleneck :

"Remove render blocking resources "

Now I activated the "Asset Optimization" thing, and it helped a little, but really not that much...

Now I realize that to optimize things better, I need to follow the other instructions :

"Remove render-blocking JavaScript:
https://e-xpertise.ch/demos/mon-3epilier/wp-includes/js/jquery/jquery.js?ver=1.12.4
https://e-xpertise.ch/demos/mon-3epilier/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1
https://e-xpertise.ch/demos/mon-3epilier/wp-content/themes/Engage-master/js/main.js?ver=1.0.0
https://e-xpertise.ch/demos/mon-3epilier/wp-content/themes/Engage-master/js/responsive-menu.js?ver=1.0.0
https://e-xpertise.ch/demos/mon-3epilier/wp-includes/js/wp-embed.min.js?ver=4.9.4
https://e-xpertise.ch/demos/mon-3epilier/wp-content/plugins/master-slider/public/assets/js/jquery.easing.min.js?ver=3.4.1
https://e-xpertise.ch/demos/mon-3epilier/wp-content/plugins/master-slider/public/assets/js/masterslider.min.js?ver=3.4.1

Optimize CSS Delivery of the following:
https://fonts.googleapis.com/css?family=Lato%3A300%2C400%2C700%7CRaleway%3A400%2C500&ver=1.0.4
https://e-xpertise.ch/demos/mon-3epilier/?sccss=1&ver=4.9.4
https://e-xpertise.ch/demos/mon-3epilier/wp-content/plugins/wp-hummingbird/admin/assets/css/critical.css?ver=4.9.4
https://e-xpertise.ch/demos/mon-3epilier/wp-content/themes/Engage-master/style.css?ver=1.0.4
https://e-xpertise.ch/demos/mon-3epilier/wp-content/plugins/siteorigin-panels/css/front-flex.min.css?ver=2.6.3
https://e-xpertise.ch/demos/mon-3epilier/wp-content/uploads/siteorigin-widgets/sow-headline-default-ac172fcde5e4.css?ver=4.9.4
https://e-xpertise.ch/demos/mon-3epilier/wp-content/plugins/widgets-for-siteorigin/css/defaults.css?ver=1.3.6
https://e-xpertise.ch/demos/mon-3epilier/wp-content/plugins/wordpress-popular-posts/public/css/wpp.css?ver=4.0.13
https://e-xpertise.ch/demos/mon-3epilier/wp-includes/css/dashicons.min.css?ver=4.9.4
https://e-xpertise.ch/demos/mon-3epilier/wp-content/themes/Engage-master/css/font-awesome.min.css?ver=4.9.4
https://e-xpertise.ch/demos/mon-3epilier/wp-content/themes/Engage-master/css/custom.css?ver=4.9.4
https://e-xpertise.ch/demos/mon-3epilier/wp-content/plugins/master-slider/public/assets/css/masterslider.main.css?ver=3.4.1
https://e-xpertise.ch/demos/mon-3epilier/wp-content/uploads/master-slider/custom.css?ver=5.2
https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?ver=4.3.0
https://e-xpertise.ch/demos/mon-3epilier/wp-content/themes/Engage-master/css/responsive-navigation.css?ver=1.2.0"

I understand that in order to do that, I have to use the advanced mode, and to be honnest I am a bit scared because I don't understand the LOGIC.

So I was wondering if there was an easy way (a process maybe?) for me to understand which of the tool I should utilise and in which case ?

And also, is there a way to reverse one action if it's causing problems, without having to restore a full backup ?

Or should I just accept this is out of my league and give it to an outsourcer ?

Thanks a lot for your help and advice !

  • Ash

    Hello DJExp

    First of all, you can never score 100, it's quite impossible. Besides, 80+ is always a good score.

    About "Remove render blocking resources", there are some core scripts from WordPress which are always suggested to load in the header. This is because some plugins write the internal script and load it into the header. Core scripts must load before those internal scripts. For other scripts, during the minification process, you can select to load into the footer. But note that, loading all scripts into footer doesn't ensure that your site won't break. So, if your site breaks, you need to move some scripts to where it was and try again.

    For CSS minification, you can't minify the css that is loaded from third party servers or from any public CDN. CSS files loaded from self server can be minified. But still, like JS, minification can break the site too. So, you have to un-minify one by one file again and find the best combination.

    This is actually a trial and error process.

    And also, is there a way to reverse one action if it's causing problems, without having to restore a full backup ?

    So, yes you just need to remember which steps you took and you can reverse those steps. But we always recommend taking a backup, just in case if you can't remember the taken steps you can restore at least :slight_smile:

    Hope it helps! Please feel free to ask more questions if you have any.

    Have a nice day!

    Cheers,
    Ash

  • Katya Tsihotska

    Hi DJExp

    How are you?

    Hope you don't mind if I'll jump in :slight_smile:

    For better optimization, it's recommended to enable as many optimization options as possible. Please, note, in most cases it's not possible to enable all options for all files, that's a normal thing. I would recommend you enable each option for each file one by one, save changes and check how your site loads. If the last enabled option caused any issues on your site, just go back, disable it and proceed to the next option/file.

    It's very important to test things out after every single change when you're working with Advanced mode and making changes in Assets Optimization settings is.

    I think that it also would be useful for you to have a look at our detailed documentation about this:
    https://premium.wpmudev.org/docs/wpmu-dev-plugins/hummingbird/#chapter-4

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

    Kind reagrds,
    Katya

  • DJExp

    Thanks a lot for the great answer Katya !

    I understand better. Based on your explanations and your trial and error process, I was able to optimize a test site (not the most complex or important but it's a start).

    One GREAT functionnality for Hummingbird Asset Optimization would be to be able to preview the mods effect before pushing them, what do you think ?

    Also, another questions, I have a problem caused by hummingbird in one of my website (my main, oldest website which is a bit messy) :

    This is the website : https://www.dushanjancik.com/

    Now, I noticed that since using Hummingbird's basic asset optimization, some colors changed on the website.

    For exemple, on the homepage, the top menu area should be dark red (#591106 exactly), and the buttons and links as well... BUT, I don't know why, but from time to time these colors changes and are reverted back to the original color of the theme, which is a lighter red/pink (#ec766a exactly).

    Using the developper console on Firefox (F12), I was able to identify that the CSS files that are setting that wrong color are located on what I assume is WPMUDev CDNs... CSS file url is : "https://hb-minify-juc1ugur1qwqqqo4.stackpathdns.com/www.dushanjancik.com/2f2ac9a9-b079-49e9-9fd9-c7c06b29c900.css"

    Now after setting up my theme I did quite a few CSS customizations, but nothing ever changed before using Hummingbird... So my guess is that somehow hummingbird is not using the correct CSS instructions in it's CDN file version or something ?

    FYI that theme allow me to set up some colors directly via the Theme Customizer option (which I think count as inline CSS, but I'm not sure). I also did quite a lot of CSS mods using the "Simple Custom CSS" plugin (I know it's not the best way but it's so convenient to use)...

    Is it possible that somehow, when compressing your files on your CDN, Hummingbird doesn't prioritize the instructions, and disgregard the fact that my new color (#591106) should replace the old, standard one of the theme (#ec766a) ?

    Please let me know your thoughts on that, and how I can avoid my website to switch from Dark red to pink depending on the internal grindings of Hummingbird I don't understand.

    Thanks a lot, best regards,

    DJ

  • Katya Tsihotska

    Hi DJExp

    Hope you had a great weekend :slight_smile:

    One GREAT functionnality for Hummingbird Asset Optimization would be to be able to preview the mods effect before pushing them, what do you think ?

    It's a good idea, however, that could be a bit difficult in development, but it's always worth to try : )
    You can submit this (or any other) feature request on our Live Support page here:
    https://premium.wpmudev.org/hub/support/#get-support
    Just choose the Feature Request option in the pop-up

    Also, another questions, I have a problem caused by hummingbird in one of my website (my main, oldest website which is a bit messy) :

    This is the website : https://www.dushanjancik.com/

    As far as I see, custom CSS that you've added to your theme isn't stored in the file, but is automatically generated by the following URL-requerst:
    https://www.dushanjancik.com/?sccss=1#038;ver=4.9.4

    That's why probably Hummingbird cannot handle this, as it's a very specific way of adding CSS. What I'd suggest is to try to deactivate all optimization options for the CSS file with handler-name at-theme-style in the Assets Optimization settings. If it doesn't help, could you please grant us temporary support access to your website so we can have a better look at your setup and settings? You can grant us access via WPMUDEV Dashboard plugin, there's no need to share credentials. Here's our detailed documentation page about it:
    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Please, let us know here once you'll do this.

    Kind regards,
    Katya

  • DJExp

    Hi Katya,

    Thanks again for the most thorough answer !

    I did what you suggested, and deactivated all optimization for the at-theme-style file... It didn't prevent the problem from happening again...

    I'm still not yet sure exactly what makes my website switch from the dark red color to the pink one, but it did happen after I deactivated all optimizations for this file.

    As you requested I have granted you access on my website, but please be sure to not deactivate anything this days as my website is in production and we're sending some ads to it right now.

    Please let me know, thanks again for the great support !
    DJ

  • DJExp

    Hello Katya,

    Thanks for looking into it.

    Yes, I did a plugin test before posting and it's definitely related to hummingbird...

    The problem is as we said : it seems that when Hummingbird compress the CSS and put it on the CDN, it's not the right version of the CSS instructions that is taken into account.

    Hence the fact that the color changed... I also looked into it deeper and notice other changes that were removed since using Asset Optimization in Hummingbird (for example the size of the title H1).

    So it leads to a more general question : what's the process to make safe and permanent CSS edit while using Hummingbird ?

    Is my current problem related to the way my theme uses CSS, or is it related to the use of "Simple Custom CSS" (a plugin I use on ALL my websites without trouble).

    I.E. what's the process to safely edit the CSS of a theme and be certain that hummingbird will not revert some instructions later on ?

    Also, what if I need to do a CSS mod AFTER having used Asset Optimisatzion ? I mean, I cannot edit the files on your CDN, so what's the process then ? Should I deactivate hummingbird each time I need to do a CSS mod, and then reactivate it (and empty cache) each time ?

    Thanks a lot for your insights,

    Dushan

  • Katya Tsihotska

    Hi DJExp

    Hope you're fine today :slight_smile:

    I was able to see the issue with the H1 font-size. I see that it happens because the order of including CSS files was changed after enabling Assets Optimization. That could happen if CSS files aren't included properly in the theme. Usually, all CSS files are included to the site by using wp_enqueue_style() function. This function has a parameter called 'deps' (dependencies), there should be specified files that are required for the current file, so the file will be included only after the specified files. Hummingbird Assets Optimization uses this parameter to build the order of including files.

    So, in order to check this, could you please provide me with access to the server so I'll be able to check your theme's code? Please, DO NOT post any credentials here, as it's a public forum, you can send us your details through our contact form https://premium.wpmudev.org/contact/#i-have-a-different-question using this template:

    Subject: "Attn: Katya Tsihotska"
    -WordPress admin username
    -WordPress admin password
    -login URL
    -FTP credentials (host/username/password) or cPanel credentials (login URL/username/password)
    -link back to this thread for reference
    -any other relevant URLs

    Please use this subject line to ensure that it gets assigned to me :slight_smile:

    Kind regards,
    Katya

  • DJExp

    Hi there, quick follow up question :

    After doing the "asset optimization" on one of my website (based on the methodology you suggested earlier in this thread), I noticed that after I was done (each time activating one option, and reverting if it caused trouble), I had a WORSE score for the "Remove render blocking resources " diagnostic than before I did extra optimization... (move to footer, combine, etc)

    How is that possible and what should I do ?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.