Critical CSS + Kirby

Hey guys,

I wonder if someone has experience with critical css and Kirby?
How do you use it? Do you use loadCSS.js from the filament group guys… or something different?

I am curious and would love to see a few approaches :smile:
Thank You

1 Like

Kirby doesn’t have any special requirements for implementations like this. Treating templates like static pages should work. :slight_smile:

Is your question about writing critical CSS, loading it, or about doing it more simply with Kirby?

One way is to manually separate out your critical css as an scss partial and let your build tools compile that to your site/snippets/ directory


  • style.scss -> /style.css
  • critical.scss -> …/…/site/snippets/critical.css.php
  • modules/

And then include the critical.css.php in your header.php template. You can (optionally) set a cookie once the style.css has been loaded once and then not have to load the critical.css.php snippet after that.

Also, I’m biased towards A Book Apart, but this book does a great job of explaining the how and why of critical CSS —

So I want to use critical to generate an inline critical-styles.csst to place on my header.php. The gulp plugin works only by analysing the HTML file of the page you want to optimise:

is there a way to tell kirby to output an HTML version of a certain page?

You can use a shell command like that to download a Kirby page as HTML:

wget http://localhost/ -O index.html

It saves the response body from the given URL in the file index.html. You can then pass this file to critical.

YEAH, that was my first idea but thought there was maybe a kirby function.

I’m gonna install wget and try that! Thank you!

You could call Kirby from the command line with a PHP script, but using wget or curl is probably easier to do.

wget should already be installed on Linux and macOS systems, only on Windows you might need to install it separately.

1 Like

There is, but it’s a bit complex and requires some knowdledge of Kirby’s internals, so wget is ten times easier. :slight_smile:

No wget by default on macOS, but there is curl which can do the same thing, and is often available on Linux distros too.

And of course one can always save the HTML from a web browser.

1 Like