Penthouse 1.0 — Official Release!🎉🍾
Better, Faster, Stronger — ✨,🏇,💪
Penthouse is the first and best free critical css generator out there, helping you improve your speed index — time to first render.
So, what’s new in 1.0?
First of all — no breaking changes! 🙌
Inspired by Facebook’s awesome open source contribution with React and in particular the attention they put on creating ease upgrade paths, I wanted to make sure everyone could move to this new release without any hassle — hence the api is fully backwards compatible. Just run
yarn add penthouse (or npm equivalent)
and it will work without any changes in your code!
There’s only one caveat — you must be on Node>=6.4 (the current LTS is 6.11.3 at time of writing this).
Now to the new features!
✨ Better
📷 Automated before/after screenshots to ease checking that the generated critical css works as it should for your site. Just pass the new screenshots option.
cssString — new alternative to the existing css (file path) option. Use this to save unnecessary I/O reads and hence time if you already have your full css in memory. This is especially useful if you want to run many calls for the same css file (same site).
Not new to 1.0 specifically but worth mentioning — Penthouse does support a Promise based API out of the box. The callback api from the previous versions is still there for backwards compatibility, but I advice you to move to the Promise API so you can take advantage of async/await and all the future holds!
🏇 Faster
Individual Penthouse calls are about 2x faster!
On top of that, in 1.0 parallel execution just works. Penthouse has always worked out what css is critical via doing checks in a real browser. Previously Penthouse used to open up and run one new browser for each job it received, with no-reuse. You could try to run some calls in parallel, but you would quickly run out of memory, and sometimes get cryptic race condition errors.
Penthouse 1.0 re-uses the same browser for parallel calls, and run them in separate tabs instead of separate browsers. You are still memory/cpu bound at some point (depending on environment and page weight), but for example on my own MacBook pro on 1.0 I can run 5 jobs in parallel easily without any problems.
So did I say 2x faster? Make that 10x. 🚀
💪 Stronger
Penthouse 1.0 marks a stable production release. Gone are many of the quirks such as race conditions that were part of previous versions. Penthouse has come a long way from it’s inception 3 years ago, when it was just a single file with a bunch of for loops inside, the at the time very first critical path css generator*.
This version of Penthouse keeps up the tradition of just working for any css and html content you throw at it, and it continues to preserves everything you’d expect from your css files — your @media, @supports or other at-rules, @font-face declarations, old IE hacks and other types of content — that most other generators lose in the generation process.
Finally, version 1.0 has already been tested on over 100,000 urls (via https://criticalcss.com). That kind of leverage is priceless in terms of confidence for a stable release!
Behind the scenes
Penthouse 1.0 moves on from the now deprecated PhantomJS headless browser framework to Chrome headless, via Puppeteer. This move alone accounts for much of the improvement in both speed and stability in this release — huge thanks to the Chrome team for their work here. Huge thanks also to the creators and maintainers of PhantomJS — their library was invaluable during a time when there was no other good headless browser alternative out there.
— — — —
So that’s it — what are you waiting for? Upgrade to 1.0 today and let me know how you find it! Report issues or feature requests in the repo: https://github.com/pocketjoso/penthouse
To another 3 years! 🥂
Thanks to Addy Osmani for being helpful and just awesome in general!
*Paul Kinlan’s critical css bookmarklet was earlier, and the first critical css tool I ever saw. It didn’t handle media queries or cross domain stylesheets though.
