Generating critical CSS

Themes
1

I have a custom-built theme, and I’d love to generate critical CSS during build-time.

Has someone done this before? Here’s what I’ve tried -

  1. Critical CSS by Addy Osmani
  2. Penthouse

Both present unique challenges for generating critical CSS for a Ghost build right during the build time -

Critical requires we have the static HTML on hand, which is not possible for Ghost AFAIK. Penthouse on the other hand opens up a page/URL and then calculates the critical CSS (I like this approach better), but that means I’ll need a local dev Ghost server running, which is again difficult to automate as part of my build step.

References -

2

Important issue for FCP on google page speed. I’m also interested to have a solution like a js snippet to copy/paste and solve this. I know gulp can do this but I can only install it via CDN and it returns an error: https://cdnjs.com/libraries/gulp
anyone can point to a gulp cdn that’s fast and with a library that’s working OK?

3

You can perform various automated optimisation of CSS - including inlining critical (above the fold) CSS - with modpagespeed/ngx-pagespeed. It’s not easy to set up, but works well.

https://www.modpagespeed.com/doc/filter-prioritize-critical-css