search

Shazwazza / Smidge

A lightweight runtime CSS/JavaScript file minification, combination, compression & management library for ASP.Net Core
MIT License
367 stars 50 forks source link

Inline Critical CSS - Umbraco #194

Open JordanSayner opened 1 year ago

JordanSayner commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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.