Hummingbird and site preformance

Hi folks!
I have been a very happy WP Rocket user for a couple of years now, but I thought I would give Hummingbird a spin to see if it stands up to WP Rocket. I made a very simple test on https://wayout.no/ where I first ran the site with WP Rocket twice on https://tools.pingdom.com/ (I have had WP Rocket running on this site for two years now), and then I deactivated WP Rocket and installed Hummingbird, ran first one test, then smushed images (I have been using wp smush pro a long time, just needed to smush 20some last images added) and ran test two.

I got the same preformance grade on all teste, 78. But the load time differed a bit. the first run on WP rocket gave me a staggering 2.65sec load time, but the second gave me 534ms. The first hummingbird gave a 787ms and the second gave me 553ms.

So to the questions:
- If I also get around 2.65sec on an uncaheed run with Hummingbird, is this critically bad?

- On Hummingbird it gives a poor 30/100 on "Remove render blocking resources". when I click "Improve score" I get the overview message "Your page has 1 blocking script resources and 6 blocking CSS resources. This causes a delay in rendering your page."
clicking on "CONFIGURE SCRIPT DEFERRING" gives me a long list of files, but two with red text warning:
- fonts.googleapis.com/css?family=Rubik:400,700,500,400italic
Error: This file included in your output can't be minified or combined

-wp-content/themes/nextwayout/style.css
Error: @import directive is not allowed in stylesheets

What is the correct approach to fix these?

  • Predrag Dubajic

    Hey Hakonzen,

    Hope you're doing well today :slight_smile:

    First thing to note is that Hummingbird comes only with Browser caching, server side caching is not included and it's recommended to use caching plugin alongside HB.

    "Remove render blocking resources" report is usually resolved via setting up Minification correctly.
    Minification however can be a bit tricky to configure as it depends on the theme you're using and installed plugins, so basically each installation can have different minification settings.

    You will need to play around with minifying and combining your files, and changing their loading position in order to get the best results without affecting site look or functionality.
    Unfortunately this process can't be automated and needs to be configured specifically for your site.

    - fonts.googleapis.com/css?family=Rubik:400,700,500,400italic
    Error: This file included in your output can't be minified or combined

    This file is loaded from external location so it can't be minified or combined with other files, it shouldn't affect your site speed however.

    -wp-content/themes/nextwayout/style.css
    Error: @import directive is not allowed in stylesheets

    This is related to your theme style CSS file, if you check it out you should see this code around line 10:
    @import url("../struct/style.css");
    Error is shown because additional styles shouldn't be used by using @import and wp_enqueue_style function should be used instead.
    You can read more about that here:
    https://developer.wordpress.org/themes/basics/including-css-javascript/

    Hope this helps :slight_smile:

    Best regards,
    Predrag

  • Hakonzen

    Hi there Predrag, and thanks for the help!

    A couple of commets on your reply:

    "To use a caching plugin alongside HB" - So I can use WP Rocket together with HB, or is it browserside also? And what abot sitegrounds supercacher (https://www.siteground.com/tutorials/supercacher/supercacher_intro.htm)? Is there any in particular of these, or others you recommend togheter with HB?

    "You will need to play around with minifying and combining your files, and changing their loading position in order to get the best results without affecting site look or functionality.
    Unfortunately this process can't be automated and needs to be configured specifically for your site."
    - This is a scary nightmare for a dude like me not knowing anything about this, is there a good video tutorial on how to understand recommende positions etc?

    I will look into the wp_enqueue_style method so I get this correct!

    Best regards!

  • Adam Czajczyk

    Hello Hakonzen!

    So I can use WP Rocket together with HB, or is it browserside also? And what abot sitegrounds supercacher (https://www.siteground.com/tutorials/supercacher/supercacher_intro.htm)? Is there any in particular of these, or others you recommend togheter with HB?

    Some caching plugins do offer minification, compression and browser caching options in addition to server-side full page caching but I'd stick to Hummingbird's ones, especially if it comes to minification. Browser caching and gzip compression is only "triggered" by these plugins and in the end it's web-server (for compression) and user browser (for browser caching) that perform these actions. The minification process however is performed by the plugin and Hummingbird gives much more control over it than other plugins. It's made with minification in mind so that puts it on top of the list if it comes to functionality, flexibility and efficiency of minification, in my opinion.

    The "golden rule" therefore is to keep these option disabled in caching plugin if they are available: use Hummingbird to minify JS/CSS resources, trigger compression and browser caching and use caching plugin for server side caching :slight_smile:

    We usually recommend using one of these:

    https://wordpress.org/plugins/wp-super-cache/

    https://wordpress.org/plugins/batcache/

    but as long as you stick to the rule suggested above any other "full page" caching plugin should do the job :slight_smile:

    This is a scary nightmare for a dude like me not knowing anything about this, is there a good video tutorial on how to understand recommende positions etc?

    It might look a bit scary but it's not that scary :slight_smile: Rather than that, it might be quite time consuming as it's mostly the "trial and error" process. There's no specific tutorial for this and it's a matter of or an intuition than the "if this than that" algorithms but I'd suggest going this way:

    1. Clear and disable all the caches:
    - gzip compression and browser caching in Hummingbird
    - any caching plugins that are running on the site
    - any cache on server if there is any and can be disabled

    2. Go to "Hummingbird -> Minification" page and enabled minification
    3. After it's enabled use "bulk" switches at the top to disable "minify" and "combine" options (for all the files)

    At this point your site should work as it worked before

    4. Then enable "minify" option for files "one by one" each time checking if site works fine. If it does, proceed to the next file; if it doesn't, disable that most recently enabled switch and skip to the next file. Continue until you reach the end of the list of files. At this point you'll end up with as many files minified as possible without breaking the site.

    5. Repeat that again for "position" switches where you'll be switching position initially to "footer" and in case it breaks the page - switching it to "original position" position.

    6. Repeat point 4 but for "combine" switches

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.