--- title: "Goodbye Puppeteer, Hello Beasties: Simpler Critical CSS for Craft CMS" date: 2026-06-07T09:00:00-04:00 author: John Morton canonical_url: "https://supergeekery.com/blog/critical-css-without-chrome-how-i-traded-puppeteer-for-beasties-craft-cms" section: Blog --- # Goodbye Puppeteer, Hello Beasties: Simpler Critical CSS for Craft CMS *June 7, 2026* by John Morton ![Puppeteer to beasties](https://static.supergeekery.com/site-assets/puppeteer-to-beasties.png) *Audio narration available for this post.* The audio version of this post excludes reading big blobs of code. See the written blog post for those bits and bobs. For a long time my Craft CMS build had a small but persistent embarrassment buried inside it: a `config.applesilicon.yaml` file for DDEV that installed a small zoo of Linux libraries just so a headless Chrome could render my pages and extract critical CSS. Here is what that file looked like: ```plaintext webimage_extra_packages: [ libasound2, libatk1.0-0, libcairo2, libgtk-3-0, libnspr4, libpango-1.0-0, libpangocairo-1.0-0, libx11-xcb1, libxcomposite1, libxcursor1, libxdamage1, libxfixes3, libxi6, libxrandr2, libxrender1, libxss1, libxtst6, fonts-liberation, libnss3, xdg-utils, chromium ] web_environment: - CPPFLAGS=-DPNG_ARM_NEON_OPT=0 - PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true ``` *What a mess of dependencies. Sigh.* That config existed for one reason: I was using [`rollup-plugin-critical`](https://www.npmjs.com/package/rollup-plugin-critical), which leans on Penthouse, which leans on Puppeteer, which wants its own Chromium binary. On an Apple Silicon Mac running DDEV, none of that was going to work out of the box. So I taught DDEV to install Chromium inside its container, taught Puppeteer where to find it, and crossed my fingers. When it worked, it was great. When it didn't, I was reading container logs trying to figure out which library went missing in a Debian update. The fun didn't stop in local. My production server is, charitably, *modest*. It is a small instance running Laravel Forge, and giving it a headless Chrome process to run during deploys was always a little optimistic. Sometimes the critical CSS step would just give up halfway through a deploy. I'd find out from a slightly slower Lighthouse score the next morning. I want to talk about how I got rid of all that. The short version: I switched to [Beasties](https://github.com/danielroe/beasties), a maintained fork of Google's `critters`, and my build is now boring in the best possible way. ## **Why critical CSS at all?** If you already know, skip ahead. If not: critical CSS is the bit of your stylesheet that styles the part of the page a visitor sees *before they scroll*. Inlining it in the `` lets the browser paint that area before it has finished downloading the full CSS file. It is one of the cheapest performance wins available, and it makes Lighthouse smile at you. The downside is that you have to generate it. Something has to look at each unique page layout, figure out which selectors actually apply above the fold, and write that subset of CSS to disk. Historically that "something" has been a headless browser rendering the page for real. ## **The old approach** With `rollup-plugin-critical`, the work happened *inside* the Vite build. A Rollup plugin would, during the build: 1. Spin up Puppeteer. 2. Launch a headless Chrome. 3. Visit a list of URLs I'd configured. 4. Use Penthouse to figure out which CSS rules were used above the fold. 5. Write those rules to `web/dist/criticalcss/