[Hummingbird Pro] Caching inline CSS

I just read this about caching inline CSS and thought it could be a great addition to Hummingbird. Details are below, read the linked articles.

What do you think? :slight_smile:

From the Smashing Magazine newsletter:
"With browsers having to download and parse CSS files before rendering a page, your CSS can easily become a performance bottleneck. To improve the perceived performance, Milica Mihajlija suggests extracting and inlining critical CSS (https://web.dev/extract-critical-css) for above-the-fold-content. However, inlining prevents the file from being cached for reuse. To close this gap, Scott Jehl found a solution that uses Service Worker and Caching APIs to enable caching for inline code (https://www.filamentgroup.com/lab/inlining-cache.html). Combined, Milica’s and Scott’s solutions make a perfect match to take your site’s performance to the next level."

  • Adam Czajczyk
    • Support Gorilla

    Hi Julian

    I hope you're well today and thank you for raising that subject!

    What if I told you that it actually is already here? :slight_smile:

    It's not exactly the same way as described in this articles and there's a reason for this but let me explain.

    There are three "aspects" of the topic:

    1) extracting critical CSS
    2) inlining CSS
    3) caching CSS

    1) Hummingbird -> Asset Optimization -> Tools

    There's a "CSS above the fold" field there where you can add any "above the fold" critical CSS. It does exactly that - puts a critical CSS inline, injected into site's source code. The "downside" is that it doesn't "automatically" extract such "critical above the fold CSS" so it would have to be found manually as well.

    What's written in these articles is really great but it's actually quite "general" and it's not that simple in case of WordPress that creates most of the site/pages dynamically. There's too many "factors" there. However, what you could try - but that might take some experimentation to make it right - try some online tool for this.

    The important part here is to do this with all the other JS/CSS optimization options (and preferably cache too) completely disabled, including any options of that kind that are part of the theme and/or other plugins.

    2. For all other "non-critical" CSS there's already an option in "Hummingbird -> Asset Optimization -> Asset". If you switch it to "Advanced Mode" (an icon next to "Clear Cache" button there), the second button from the right for each of CSS files is "inline". That makes the CSS from the file injected into the page source instead of being loaded as a file.

    Again though, it's important to remember that it's not that "straightforward" as it may seem after reading these articles. In a "perfect worlds" you could just inline all the CSS files "as they are" and that would beautifully. But on WP site you're usually dealing with multiple CSS resources, some might even be coming from external URLs and some may be created dynamically (e.g. by page builders such as Elementor or Divi or WP Bakery Page builder or similar) and it might take some experiments to get that all set the way it does inline as much as possible while the site's still working flawlessly. But it's there and you can inline CSS.

    So, with these two options, the "critical/above the fold" CSS and "inline CSS" aspects can be addressed.

    3. The last part is caching and that's even simpler than that :slight_smile:

    All you need to do is to enable Page Caching and make sure that browser caching is configured. All the inlined CSS is a part of the requested page code an is cached out of the box inside it. Other CSS files - loaded via URL - are cached by browser. Furthermore, since most of the modern servers support HTTP/2, that's even less of the issue as resources are transferred to the browser in parallel rather than "queued one by one".

    I hope that helps but if you got any follow-up questions, please ask and I"ll be happy to respond :slight_smile:

    Best regards,
    Adam

    • Julian
      • Fake Russian Bot

      Hey Adam Czajczyk thanks for the thorough reply. I guess you're right that Hummingbird can already do this more or less. I'm still wondering though, with the methods you described, inlined CSS can indeed be cached but only after you load a page for the first time. If you then visit other pages then a cached version of that page must first be created as well and those pages could contain the exact same inlined CSS, but instead of loading a cached version of that inlined CSS, it simply creates a cached version of the entire page, including the inlined CSS. so effectively you're loading all that data for every new page you visit.
      What the article describes is something different. It's a methed where inlined CSS can be stored in a local cache using a Service Worker. So when you load a new page (that isn't yet cached) it loads the CSS from the local cache instead of downloading that data from the server. See how that's different? Or maybe I'm missing something?

  • Adam Czajczyk
    • Support Gorilla

    Hi Julian

    I think you are right. The way you described it is how it works and it actually does both caching and inlining and - for not inlined resources - browser caching. That's fine solution but yes, it's a bit different than using Service Workes which would, kind of, "inject" browser-side cached CSS inline.

    Whether that makes that much of a difference, that's a question - I'd say results might be different and in some cases not really making any noticeable difference (after all, it's still some JS fired up in browser) but in some it can probably have nice benefits.

    But implementing that "automatically" in WordPress, that's a whole different story in my opinion. I've actually seen some interesting articles on how to implement that in WP but still - that's something, at least as far as I understand it, that would mostly be done on a development level. On sites with complex themes (especially builders) and tens or more of plugins trying to "change WP" on the fly to use that way might be a risk.

    However, that's more of my opinion rather than any official statement. I'm not that fluent with this kind of development so don't take my word on it. I just felt like sharing some thoughts :slight_smile:

    I did ask our developers about that, though. I think their opinion on this can explain a lot so let's see what they say :slight_smile:

    Best regards,
    Adam

    • Julian
      • Fake Russian Bot

      There are some performance benefits but it depends on the site and how you set it up. Just like placing scripts in the footer and deferring scripts, you would have to do it manually and run a test to see if it improves the performance.
      Hopefully Hummingbird will offer an option for this in the future.

  • Adam Czajczyk
    • Support Gorilla

    Hi Julian

    After some consultation with our developers I think it's not quite going to happen anytime soon. Basically, it's always kind of "extra step" and we're talking here about really small chunks of CSS code which, if any, would most likely give really small fractions of seconds of benefits. It's a nice idea but unless it's really a huge and complex and fully inline CSS (which might sound nice but actually is not always the best idea itself), that seems more like art for art's sake...

    However, we're already planning something else that should actually make quite a difference in many cases - that'll be HTTP2 "server push". It's kind of "pro active" solution: actually forcing browser to download and cache resources "in advance". So to say: send site to user before it's even requested :slight_smile:

    Take a look here please:

    https://www.smashingmagazine.com/2017/04/guide-http2-server-push/

    This is already on the future features list so it's going to be implemented in Hummingbird :slight_smile:

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.