[Hummingbird] Hummingbird Page Optimization

Hi Guys,
I am having a question about Hummingbird and how to optimize my site. When I am running the performance test Hummingbird tells me everything is fine except "Remove Render Blocking Ressources" and ""Optimize Images". As for the Render Blocking - I am given several CSS and JS files that could be compressed and I have done so several times, however, it always stays stuck at the same point. When I apply the changes nothing really happens it seems. As for the image: Hummingbird tells me I should optimize the pic I set as the logo. When I go ahead and try to smush it - again nothing happens. Could this be due to the fact that I have set this as the logo for my site? Any ideas how to solve these problems?
Thanks Nicole

  • Adam Czajczyk

    Hello Nicole

    I hope you're well today and thank you for your question!

    The fact that the image is set as logo shouldn't be an issue here. However, I would expect one of these three cases here:

    1. Either the image set as logo is an original full-size image and option to smush original full-size images is disabled in WP Smush

    2. Or the image that's set as logo is not actually a part of WP Media Library but resides in some other folder or was manually uploaded via FTP - in that case, you'd need to use Directory Smush option to smush it as WP Smush by default can only process images in media library

    3. Or the image is actually smushed but is still reported as "Compressing as resizing". In that case the "resizing" part of the message would be important.

    That said, I took a look at your site and it seems to be the 3rd case or a combination of 1st and 3rd. The image used as logo is this one

    https://v........n.com/wp-content/uploads/2018/02/vivrescaled_vegantagline.jpg

    The file name shows that it's an original full-size image (when WordPress creates additional smaller images, it also adds sizes to the name of the file) and when you open it in a browser you'll notice that it's 2048px x 1475px big.

    When used as logo it's scaled down to only 242 x 174 px.

    What I would do here would actually be this: I'd simply download this image, resized it to 242x174px in some photo editing app and reuploaded to the site via FTP (just keep original one for backup purposes somewhere).

    As for removing render blocking resources. If you go to "Asset Optimization" in Hummingbird, look for the "Switch to advanced mode for more control" icon there:

    In the advanced mode you should see the "Footer" option for all the files and "Force load this file after the page has loaded" icon for JS files. You would want to experiment with these settings to achieve the most that you can without breaking the site.

    Please note: unfortunately, this is more of a "trial & error" procedure than the "go by the rule setup" so in some cases it can go easily and flawlessly and in some cases more experimenting with it is necessary. That heavily depends on the site and server specifics. In some cases it's possible to remove all render blocking resources this way but in some cases it might be possible to only remove some without breaking the site.

    If you have any additional questions, let me know please.

    Kind regards,
    Adam

  • Nicole

    I just don't understand one thing, if you allow me a follow up on this issue: I have reduced the size of the logo image. And the score improved now for "leverage browser caching" However: the first point "Remove render blocking ressources" got really worse, without me trying to change anything there, it was somewhere around 40% before and now it is 8%. Are these two somehow related?
    On a site note: the guys from Siteground disabled caching of Hummingbird because it interfered with their browser Caching. Could it be related to this?

    I think this render blocking ressources issue is also the reason why the site behaves a bit strange when you navigate to it? (I mean when you enter the url in the browser it takes a moment until the stuff under the menu gets "pushed" under the menu bar (hope I make sense...))? Any idea how to resolve this problem?

    Thanks

    Nicole

  • Predrag Dubajic

    Hi Nicole,

    I tweaked your Asset Optimization settings and a couple of files are now gone from the report but there are still few left, one that comes from server caching and one from external source so we can't affect that, and Divi main style because when optimized it breaks the layout so we need to leave it as is.

    Asset Optimization is a bit tricky tool and it depends on theme and plugins used on the site, and how their files are handling these changes, so sometimes is simply impossible to further optimize them, as it's the case here with the Divi style.

    I think this render blocking ressources issue is also the reason why the site behaves a bit strange when you navigate to it? (I mean when you enter the url in the browser it takes a moment until the stuff under the menu gets "pushed" under the menu bar (hope I make sense...))?

    This mostly depends on the theme, its HTML structure and CSS code, browser loads part of the code first and until entire CSS is loaded it will keep the part of the page further up until CSS for that is loaded and then it will snap it into place.
    Usually this is not something that could be easily fixed and it's better to use preloader on site if you don't want your members to see that behavior.

    Best regards,
    Predrag

  • Nicole

    Hi Predrag,

    Great thank you for the explanation! Theme...mhm. Maybe I will think about switching to something else, but have no idea yet which would be a good replacement. When I started out I thought it was a great theme for beginners. Switching shouldn't bring too many problems I guess since the site is still pretty "empty".
    Thanks a lot again, really nice to understand this stuff with your help :slight_smile: !

  • Nicole

    Hey guys,
    I was wondering if you have any idea why Hummingbird keeps breaking my site. I signed up for wpmudev because after I had installed it the formatting of my site broke (see attached images). I chatted with your support and was told it might be a plugin issue. So I run the test and deleted some of the plugins. However: almost any that I want to use seems to cause issues with Hummingbird. For example, I installed 2 that I need for getting the site set up for the GDPR...and the site breaks. Cookie disclaimer plugin - and the site breaks. Clearing the cache doesn't help.
    Only when I deactivate Hummingbird everything runs smoothly...
    (I have installed Cache Enabler now - and this doesn't cause any problems.)
    Any ideas?
    Thanks again
    Nicole

  • Adam Czajczyk

    Hello Nicole

    When Hummingbird is disabled, Asset Optimization is not working. Any changes made by AO with the plugin enabled are not permanent - plugin doesn't physically change these files or the way they are loaded. It only interacts with them when it's active and when the AO feature is active.

    Disabling Hummingbird, or - to be exact - just Asset Optimization option, should stop it from happening. If the issues, related to AO, are still happening even with Hummingbird completely disabled, that usually means two things:

    1. Either there actually is some additional "minification/asset optimization" taking place (e.g. performed by some other plugin or the theme, or the server or CDN if it's implemented)

    2. Or there's some additional "stubborn" caching (it might be on site or no server) that has cached those changes made by Hummingbird.

    Somtimes, both these things happen too.

    I checked your site again and there's:

    - CSS and JSS minification enabled in Divi ("Divi -> Theme Options -> General", two options at the very bottom of the page)

    - there's cache plugin (SG Optimizer - SiteGround's version of SuperCache)

    - the site's apparently hosted on SiteGround and they have an additional cache that needs to be cleared/flushed directly on server (via cPanel); there might also be "memcached" (it's a different kind of cache) enabled there on server.

    That all working, used together with Hummingbird's caching and Asset Optimization is a bit "too much", in my opinion. By this, I mean that all these tools attempt to do similar things though in a bit different way and that might be causing very unexpected issues.

    What I would do would be:
    - disable minification in Divi
    - clear and disable cache in SG Optimizer
    - clear and disable cache on server
    - then enable Hummingbird and make sure that Page Cache of it is also disabled
    - then try to set and fine-tune Asset Optimization from scratch
    - once that's done and the site's working fine, enable Page Caching in HB

    That should help with page performance and would show also if Hummingbird is actually causing any issues itself.

    Best regards,
    Adam

  • Nicole

    Hi Adam,

    Thanks for your detailed explanation! Since the issues started only after I have tested out Hummingbird I can (almost) safely say that it had something to do with the plugin. Now I can only avoid this from happening when I always clear cache after I have done some changes to the site. I will try the steps you proposed and see if that helps. My question is: would there be any disadvantage disabling all the other caching / site optimizing features and relying only on Hummingbird?
    On a side note: I guess I won't really need the cache enabler plugin either, right?
    Thanks again for all your help so far!
    I really appreciate it

    Nicole

  • Predrag Dubajic

    Hi Nicole,

    Could you provide us with some steps that we can follow in order to see how your site breaks if the cache is not cleared?
    Also, support access has expired, so could you grant it again please?

    My question is: would there be any disadvantage disabling all the other caching / site optimizing features and relying only on Hummingbird?
    On a side note: I guess I won't really need the cache enabler plugin either, right?

    If you have other plugins that handle caching, minification, browser caching or gzip compression then you should disable them because when you have multiple plugins handling same stuff it will actually cause you more bad than good as their functionalities can conflict with each other.

    Best regards,
    Predrag

  • Nicole

    Hi Predag,
    Sure I have granted support access again. However, I have already deleted the caching plug-in. And also all plugins from wpmudev where I had similar plugins installed already (like wordfence or yoast). At the moment the site looks fine but I haven't tried to install any other plugin now after I have deleted the cache enabler plugin. It always used to break when I installed a new plugin. For example: I had only Hummingbird (plus the cache settings from siteground) and installed WPGDP and the site would break. After I had deleted Hummingbird and installed cache enabler the same thing would happen..
    Regards
    Nicole

  • Adam Czajczyk

    Hello Nicole!

    I see that site seems to be working fine now but I'm actually a bit confused. You wrote:

    I had only Hummingbird (plus the cache settings from siteground) and installed WPGDP and the site would break. After I had deleted Hummingbird and installed cache enabler the same thing would happen..

    The Hummingbird is not there currently but if the same thing would happen with and without it - that would suggest the problem was/is related to something else. On the other hand, SG cache plugin installed, as well as WP GDPR and WP GDPR Compliance plugins. I'm sorry but I'm not quite sure what sort of advice/assistance I should provide you with in that case... I'm sorry about that. If you could explain the expectations a bit more, I'll be more than happy to assist you further!

    Kind regards,
    Adam

  • Nicole

    Hi Adam,

    Thanks for your reply. I guess it was too much caching as described by you earlier. I have reinstalled Hummingbird now and done as you suggested (disable all other caching before and enable HB caching after Asset Optimization). The site works fine now, also after installing a new plugin. Now my question is: should I turn on server side caching again or leave it? Any advantages of using one over the other (hummingbird vs. only server-side caching via siteground /SG cache?)?
    Also: I still don't understand why in AO the "Remove render blocking ressources" score goes down, as soon as I optimize images via SmushPro.

    Thanks a lot again for all your help

    Nicole

  • Predrag Dubajic

    Hi Nicole,

    I'm not that much familiar with SG cache but most likely having both active will cause you more harm than good, as multiple caching options can conflict with each other.

    Also: I still don't understand why in AO the "Remove render blocking ressources" score goes down, as soon as I optimize images via SmushPro.

    That shouldn't be related in any way, when you start image optimization your images are sent to our servers where optimization is performed and optimized images are then sent back to your server.
    So the process of optimization is not using your server resources.
    I'm not saying you're wrong, I'm just trying to wrap my head around it :slight_smile:

    What happens when you optimize images, does anything changes in your Asset Optimization options or they are exactly the same as before smushing?

    Best regards,
    Predrag

  • Nicole

    Hi Predag,

    Thanks for the reply. Well, the score for remover render blocking resources went down when I smushed & turned on AO. It was in the 40s before, now it is 29. That is all I know. As for the option change: nothing seems to change in AO, also the decompression of CSS or JS for certain files doesn't seem to work. I can click on it, publish changes and all, but it doesn't seem to change. The next time I visit the site & go to HB AO the same "decompress" option is still active for these files. I don't know if anything concerning the "move to footer" or "Inline CSS" option changes as I haven't figured out yet how to keep track of changed made to those.

    Thanks again

    Nicole

  • Predrag Dubajic

    Hi Nicole,

    I did a test on your site by enabling defer, move to footer and minification on a couple of CSS and JS files, then I wandered around your site to try and see if anything will affect my changes but that didn't happen no matter what, and my settings were there.

    Did you perhaps use Re-Check option in AO page because this will reset your minification settings and enable only minification for your files?

    Best regards,
    Predrag

  • Nicole

    Hi Predag,
    Thanks a lot for the answer! Yes, I did, but I didn't knew it would reset the minification settings. Thanks! I guess when I do a performance test this would not affect AO settings, would it?
    I have another (new) problem though sorry: I have been getting these "website unavailable" screens lately since I reinstalled HB and switched off server-side caching via Siteground. I only get this when I want to log in via wp-admin, never when I visit the website as a visitor. This website unavailable screen occurs almost every time I want to log in and I need 2 attempts before I can access the dashboard. Any idea what is going on? (I have attached a pic, my laptop is German though, but you should be familiar with this, it looks the same in English :grinning:
    Thanks
    Nicole

  • Adam Czajczyk

    Hi Nicole

    I guess when I do a performance test this would not affect AO settings, would it?

    No, performance test will not affect these (or any other) Hummingbird settings :slight_smile:

    I have been getting these "website unavailable" screens lately since I reinstalled HB and switched off server-side caching via Siteground. I only get this when I want to log in via wp-admin, never when I visit the website as a visitor. This website unavailable screen occurs almost every time I want to log in and I need 2 attempts before I can access the dashboard. Any idea what is going on?

    Hm... that's quite alarming, I must admit. The message suggests that there might be some "resource" issues. By default WP admin area is not cached so everything works "in real time" and that might sometimes cause higher "load" on the server. If that started to happen only after disabling SG server-side caching, that might confirm that, as this caching (though I'm not 100% sure) is probably caching "everything", not necessarily differentiating between front- and back-end. So, if that is true, switching it off would indeed lead to increased usage of server resources when back-end is accessed, resulting in this issues.

    Do you think you could get in touch with SiteGround support and ask them if they could check server logs for you to see if they could find any relevant information? If they could either find some "suspicious" messages in logs they/you might be able to "correlate" those failed login attempts with those messages and that could give us a better clue on why this is happening.

    Would you give it a try, please?

    Let me know if they managed to find something and if so (hopefully) what they said, please.

    Kind regards,
    Adam

  • Nicole

    Hi Adam,

    Thank you for your explanation! I have contacted SG and the server logs don't show anything that gives clues as to why this was happening. I say "was" because it is working fine now. The SG cache didn't kick in, (even though it was switched on) because HB interferes with it. They have switched it on again by temporarily disabling HB caching. It seems to have been a temporary issue. If it happens again and they find out the reason I'll let you know for sure.

    Thanks again for your outstanding support.

    Best regards

    Nicole

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.