I am using Lighthouse to optimize my sites, and one of the recommendations is inlining critical CSS, so I am now using https://www.drupal.org/project/critical_css for this, and it works great.

I tried, but could not make the recommended Addy Osmani's critical library work, to generate the critical CSS, so I ended up using https://speedvitals.com/tools/critical-css-generator, which was all right.

But I would prefer to do it locally, with a tool in DDEV. Many users don't use npm/gulp, so the critical README is a bit daunting, many things are not explained ...

Can anyone help clear up the basic steps to get it up and running in a fresh Drupal 11 installation in DDEV?

I will then create a documentation page, which lists the minimum steps required to generate critical CSS in DDEV with Addy Osmani's critical package.

UPDATE: I created Need help on how to run npm scripts #8927 and with @rfay's help I got it up and running.

Comments

emij9827’s picture

A simple guide for this would be really helpful. I’ve found that step-by-step examples make these setups much easier to understand, especially for people who aren’t familiar with npm or Gulp. Looking forward to seeing the documentation! 👍