Inline Critical CSS - Umbraco

[JordanSayner]

trafficstars

Hi, I'm looking at adding critical CSS into the head of my site, and load the rest later on. see https://web.dev/extract-critical-css/ for more information.

Is there a way of doing this by default, or do I need a wrapper script to take what smidge does, then read the file and extract the content and then place that on the page?

Any help would be greatly appreciated.

[chrno1209]

I am seeking for the same, wondering if Smidge can do something for this, or at least a solution to render all css content in the head tag of my site

[Shazwazza]

There's nothing built into Smidge that knows anything about Critical CSS. However, I'm sure there's a way that you could achieve this one way or another but it depends on how you want to make it work.

Would you, for example, want a particular bundle to be rendered inline in your HTML as critical CSS?

What would need to probably happen is to move all of this code in the controller: https://github.com/Shazwazza/Smidge/blob/994e9451b9838e74669fd47b29489509dbfe92c7/src/Smidge/Controllers/SmidgeController.cs#L67

to a helper method that could either return a file path or file stream. Then the controller can use this method, but would mean that you could use that method directly as well and get the file stream for that bundle and render it directly into your html.

If anyone wants to give that a try and create a PR, that would be great.