Helpful tools for working with critical CSS
- css-gather
- Fetches all the CSS files off a page and dumps their CSS to stdout.
- critical-css.js
- Uses penthouse to extract the critical CSS from CSS passed on `stdin`.
- run.sh
- Uses `css-gather` and `critical-css.js` to generate the critical CSS for a URL.
cd to a clone of this repo
Build docker image:
docker compose buildGenerate critical css by running the run.sh command in a css-gather container and passing it a URL to analyze:
docker run css-gather ./run.rb https://www.ifixit.comGenerate critical css and save screenshots in critical-css-screenshots folder:
mkdir critical-css-screenshots
docker run --mount type=bind,source="$(pwd)/critical-css-screenshots",target=/app/critical-css-screenshots css-gather ./run.rb https://www.ifixit.comGenerate critical css and exclude certain css selectors from the critical css:
docker run css-gather ./run.rb https://www.ifixit.com/ --exclude=.skip-to-content --exclude=/#contentFloat/This will remove .skip-to-content and any css selector that matches the /#contentFloat/ regex.
