Critical CSS in Hummingbird Pro

It seems you don't offer the ability to insert critical / above the fold css while deferring the main css file into the footer. This is something that the amazing Autoptimize plugin does really well. I'm curious why you don't offer this feature.

Thanks!

-Alex

  • Rupok

    Hi Alex,

    I've pinged our developer regarding your query. I believe he will come up with his valuable feedback on this very soon.

    Please keep in mind, our developers work around the clock and they have to deal with lots of critical issues and other things. So it may take a little while for them to check this and provide his feedback. I will appreciate your patience.

    Have a nice day. Cheers!
    Rupok

  • Anton Vanyukov

    Hi Alex Wright,

    You can do almost the same thing with Hummingbird. It's not as simple, but in the end you have more control as to what is happening with the individual files. For example, you can add critical css to a separate file, enqueue it in the theme (almost all the premium themes offer you the ability to add custom css files or code in wp-admin), and in HB just leave that file in the header while moving all the other css files to the footer. With the new version of HB you will be able to inline that critical css as well.

    While the available solutions seems simple, they also have a negative side (Autoptimize is no exception). First of all, you somehow need to remove the duplicate code from the footer. A plugin won't do that for you, so you are left with duplicate code, which is not good for performance. Second of all, you need to be 100% sure that you're not just improving the score in a Google test, but also improving the performance for the end-user. It is not an easy task to separate the css that is needed in the header from files that can be loaded after rendering the initial view and not break the layout.

    Best regards,
    Anton

  • Alex Wright

    Hi Anton-

    That is really valuable feedback - thank you!

    Can you help a bit more with information on what you mean by the necessity to remove duplicate code from the main css file moved to the footer? My understanding has been that duplicate css isn't the worst thing in the world - most css files have many lines of unused styles in them, especially from frameworks like Bootstrap or Foundation, even those that have been combed through to remove general unused classes / functions.

    So is it just the bytes of code that's a concern with duplication or the idea that browsers use the last reference of a css rule to set the style, so setting it once in the header then again in the footer creates a second instance of the css rule that is then given re-prioritization?

    THANKS!

    -Alex

  • Anton Vanyukov

    Hi Alex Wright,

    Yeah, you are right... in a way. But remember that once that initial view loads, you still need to wait for everything else to load so you can use the website. If your users sees only the top part of the page, and has to wait 20 more seconds to be able to view other parts of the page - that's not a good solution. Yes, Google will add 2-3 points to your score, because you've moved all the files to the footer. But is it really worth it if you're loosing customers or potential clients who don't want to wait? There needs to be a balance as to how long it takes for the user to see the first visible part of your website and the time he can actually start using the website.

    If you're serious about optimization, I would recommend you try Google Lighthouse browser add-on. It will test your website better then Google PageSpeed Insights or Gtmetrix, and give you much more valuable information as to when and how critical parts of your page are being rendered.

    Best regards,
    Anton

  • Alex Wright

    That's awesome advice. I've been trying to get critical css more into my workflow. One can set the number of vertical pixels that are considered "critical" so in creating above the fold css, you can set what that fold really is. If it takes 4 seconds to render the rest of the page, then I've f*#ked up on a lot more than just the css :slight_smile:

    I do hear you. I've been using Autoptimize and their critical css injection for a while now with pretty good success I'd say. As you point out it's always a fine line.

    And Lighthouse is pretty dope. Great that it's baked in as the Audit tool in Chrome Dev Tools. Always opens up many rabbit holes to squirm down.

    Thanks!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.