HummingBird is a Killer

So, I have been using google page speed insights and pingdom to speed up my site and makesure my visitors and google are happy... humming bird was a godesend, i activated it and it just worked, i was clocking scores of near on 100/100 BUT

After I calmed down from the excitement of this miracle pluging, i had a look on my site.... RUINED! the usbaility was gone, it loaded fast but that was because NOTHING loaded! hummingbird must be juggling some scripts around leaving the slider on my homepage and all my fancy widgets in an endless load

Pleaseeeeeeeeeeeeee help, this has been driving me insane for the last week

I just want to activate the plugin and get rid of those final pagespeed insight issues, can it really be this difficult?

Edit: I think, humming bird is forcing the widgets and main featured slider to load after the full page content has. This is fine, this makes my site load significantly quicker for visitors, the problem is that instead of the offending scripts loading after, they've just been stopped in their tracks all together.

Currently I have deactivated humming bird until I have a resolution

additional info, i use cloudflare and had the same issue using their options to auto Minify Java Script, CSS and HTML, i believe when I linked my hummingbird account to cloudflare it activated these settings and re-created the issue

  • Predrag Dubajic

    Hi ben armytage,

    Minification of files can be a tricky tool as not all plugin and theme files are handling minification and change of loading position.
    This is different from site to site and it depends on the plugins and theme you use on your installation.

    Unfortunately there's no automated way of checking how the files will respond to minification so what you should do is go to Hummingbird > Minification and try out different setup for minification, combine and loading position.
    You would need to make adjustments there in order to get best results with as many files minified and moved to footer without affecting your site functionality.

    Best regards,
    Predrag

  • Adam Czajczyk

    Hello Ben!

    I accessed and checked your site and I see that "Minification" module is currently disabled in Hummingbird (which is also disabled). Enabling Hummingbird plugin now shouldn't cause any issues. However, after you do this, there would be some additional tasks to perform:

    1. In W3 Total Cache settings disable all options to minify JS/CSS files (you can leave inline HTML/CSS minification enabled though)
    2. temporarily fully disable cache on site (in W3 Total Cache settings)
    2. on Hummingbird -> Minification page run "Check files"
    3. that will fully enable Minification and I suppose at this point your site will break.
    4. use two toggle switches "Minify" and "Combine" in "Bulk Update" section to disable minify and combine options for all the files (move them so they become gray, see screenshot below)

    Now comes a bit daunting task but that will let you optimize the site as much as possible without "breaking" it.

    5. From each file from the list enable the "minify" switch (and check if site works); if the site works, proceed with the next one; if enabling given switch breaks the site, turn it back to off (gray) and skip to the next one.

    6. Once you got through all the files, get back to the top of the list and try moving files - one by one again, the same way - to the footer of the site using "Position" switch. In case site breaks, set that most recently changed switch back to "Original" option;

    7. Finally, do exactly the same with "Combine" switch for each file.

    You'll end-up with a "mix" of enabled (green) and disabled (gray) switches and a working site. At this point, that'd be optimized as much as possible.

    Once this is done, enable the caching back and it should be fine.

    Best regards,
    Adam

    • ben armytage

      Hi Adam,

      I really appreciate the time you've put into the above work around... unfortunately it's made things even worse!
      I got to step 4 and now my site seems to be broken.... for some reason even though i deslected all the options something must still be active that the site doesnt like, the first thing i noticed was that the ESi logo in the top corner had vanished, then things just seemed to detriorate further as a i checked.

      I then tried to use hummingbacks "clear" feature to go back to the no hummingbird settings... didnt work! my site is still stuck in the state... I have fully deactivated both W3 Total cache and hummingbird and still cant get the site back... any ideas?

  • ben armytage

    Okay so, I've fully configured the minify section as per the above, i have succesfully minified and combined EVERYTHING but have had to leave two scripts out of the footer... NEW ISSUE: My speed score has actually gone DOWN since implementing the minification, and im now stuck in a loop

    The loop goes
    ERROR: REMOVE RENDER BLOCKING RESOURCES
    FIX: MINIFY AND MOVE THINGS TO THE FOOTER
    LOOP: EVERYTHING IS ALREADY THERE THAT CAN BE?

    ALL THE THINGS THAT ARE NOW IN THE FOOTER STILL SHOW IN THIS LOG, I am so confused, ontop of this WP Smush is fully smushed yet my score is 75/100, once again hummingbird suggests i smush images but there are none left to smush!

    Come on guys, we can make this site super fast with near 100/100 scores!

  • Adam Czajczyk

    Hello Ben!

    Thank you for additional information.

    I checked your site, both "inside" and using PageSpeed Insights. There are two main issues:

    1. "Remove render blocking resources"

    The Hummingbird plugin shows that the "Minify" score is 100% currently. It does however report some resources that are not "optimized" and these are the same resources that are reported by PageSpeed Insights. Unfortunately, all of them come from external sources: JS comes from CloudFront and CSS comes from Google Fonts API. Only one CSS comes from your site directly.

    That said, these JS files cannot be addressed by Hummingbird as it doesn't have any access to them. They are hosted externally and served by CloudFront and that means that they are "added to the site after it leaves your server", so to say.

    As for CSS the issue is a bit different. If you check file list on "Minification" page you'll notice the message right below the "style.css" file that says:

    "Error : @import directive is not allowed in stylesheets"

    This means that the "style.css" file of your current theme is using "@import" CSS directive to import other styles into it. In this case these are those Google Fonts styles that are also reported as "render blocking". At the same time, this is what's causing theme's "style.css" to be "render blocking".

    What about a solution then? The style.css file of your theme should not use "@import" directive. Instead those Google Fonts styles should be added to the site using "wp_enqueue_script()" or "wp_enqueue_style()" core function. Changing it, however, would mean changing theme files. It's never recommended and also such changes would be lost upon the first update of the theme. Therefore, I'd suggest getting in touch with theme developers and strongly suggesting them to make require changes. It would also be beneficial for other users of that theme in future :slight_smile:

    2. Image optimization

    That is the second issue here. The score here is pretty good (though not perfect, agreed). Again though, there are three images reported and two of them are external images which cannot be processed/optimized by Smush as it doesn't have any access to them.

    The third one does come directly from your site. It's a logo image and it's suggested to "compress and resize" it. That actually means that this image dimensions are bigger than dimensions of a DOM element (HTML block) that's holding it. I checked the image and I found out that while the logo size on site (in desktop view) is 400x212 pixels, the image itself is 5439x2879 pixels.

    The solution to this is, fortunately, simple: create a logo image that's 400x212 pixels and replace it on site. That should remove the image from the report and affect performance score as well.

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

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.