5

After reading up on critical path css, I was wondering how I could embed this into my builds. Are there any finished tools out there that does this already? The process needs to be automatable to avoid the inline CSS getting out of sync with other CSS.

If there is no such tool today, I can see how I could make one (say a grunt plugin), using this experimental script together with PhantomJS, but there is no point in re-inventing the wheel (if there is one already).

oligofren
  • 20,744
  • 16
  • 93
  • 180

2 Answers2

5

I had exactly the same idea - if you're still looking, I built exactly what we both wanted:

Critical Path CSS Generator. (I didn't end up using the tool you linked too since it misses psuedo selectors, media queries, non -webkit prefixed css rules etc).

More documentation is on the way, but basically just install PhantomJS first and then call the script like this:

phantomjs penthouse.js http://youSite.com/page1 yourSite.css > yourSite-criticalcss-page1.css
phantomjs penthouse.js http://youSite.com/page2 yourSite.css > yourSite-criticalcss-page2.css

You can pass in minified CSS as well as unminified - I don't modify the CSS except for removing unmatched selectors, rules (and I remove comments).

pocketjoso
  • 66
  • 1
  • 4
  • excellent stuff, with some room for improvement (i'll create some issues). package it as a npm plugin and I'll release it as a grunt-plugin :) – oligofren Jun 05 '14 at 11:00
1

Use IISpeed or the Apache/Nginx PageSpeed modules

Google maintains some wonderful modules called PageSpeed that works for Apache and Nginx front servers. For those on .NET, just use IISpeed, the IIS equivalent of the PageSpeed modules. It is commercial and costs 100$, but is quite marvelous from a front-end perspective in what it does, and (among lots of other stuff) handles the main problem when using Penthouse: dealing with changing/dynamic content generation.

It works by injecting some javascript into the head of some of the first visitors to any page, analysing which css rules are actually being used. Then, after some rounds, it then collects these css rules and injects them as inline css in the head of that page for all subsequent visitors.

This is totally automatic and works on any ASP.NET page. You then avoid having to manually run Penthouse (mentioned above) on every page you like to speed up, and remembering to keep that css up to date (otherwise it will be out of date at some time, messing up your styles).

Penthouse is still great for pages where the content is mostly static.

oligofren
  • 20,744
  • 16
  • 93
  • 180