ndreckshage / cssvacuum

optimize your critical rendering path

CSSVacuum

optimize your critical rendering path

created at tech crunch disrupt sf 2013

Critical Rendering Path

Ilya Grigorik gave a great talk at Velocity on the Critical Rendering Path. Please check out his full presentation, but essentially, above the fold CSS should be inlined, and external CSS should by loaded asynchronously.

Eventually, this could work with the mod_pagespeed filter, so you don't have to determine the relevant styles manually.

CSSVacuum is...

a tool to help determine what css if 'critical'. It is a Chrome content script (extension) that will

• determine all styles that are called above the fold
• provide css to copy and paste into the new inlined header
• provide a nice animation while it works

CSSVacuum isnt...

• an out of the box solution to automatically inline css
• ready for production

Example use in production...

• setup a PhantomJS script, that utilizes portions of Chrome extension.
• job that triggers Phantom to hit all relative pages on deploy (and clear existing cache keys)
• cache the resulting CSS
• if cache key exists, serve critical CSS inline, and full CSS async in footer

Install (official)

• https://chrome.google.com/webstore/detail/cssvacuum/maellbbeahlpainnadomcgbcgmhjkbac

Install (source)

• clone the repo
• open Chrome and go to extensions
• click developer mode, load unpacked extensions, and select repo
• enable CSSVacuum

Use

• with CSSVacuum installed, go to any url with ?CSSVacuum in query string. "http://amazon.com?CSSVacuum", for example.
• click the CSSVacuum button
• copy and paste the resulting css

Todo

• Lots of room for improvement
• Eliminate unecessary selectors (right now any selector, regardless of specificity, is included if it matches a class name)
• Do guess work to limit resulting CSS filesize down to 14k.
• PhantomJS script for production use.

cssvacuum's Issues

Exception on some sites - Failed to read the 'cssRules' property from 'CSSStyleSheet'

Hey there,

I've tried CSSVacuum (using the Chrome store version) on a bunch of different sites and often it works fine, except for the one site I actually want to use it for :( It's behind a login so I can't link you to it, but another example of a site it doesn't work on for me is this one: https://www.centrepointalliance.com.au/?CSSVacuum.

I see the following exception logged in the console:

Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at CSSStyleSheet.<anonymous> (chrome-extension://maellbbeahlpainnadomcgbcgmhjkbac/cssvacuum.js:127:13)
    at Function.each (chrome-extension://maellbbeahlpainnadomcgbcgmhjkbac/lib/jquery-2.0.3.min.js:2:4575)
    at CSSVacuum.browseOllivanders (chrome-extension://maellbbeahlpainnadomcgbcgmhjkbac/cssvacuum.js:126:7)
    at HTMLDocument.<anonymous> (chrome-extension://maellbbeahlpainnadomcgbcgmhjkbac/cssvacuum.js:52:13)
    at l (chrome-extension://maellbbeahlpainnadomcgbcgmhjkbac/lib/jquery-2.0.3.min.js:2:24882)
    at Object.fireWith [as resolveWith] (chrome-extension://maellbbeahlpainnadomcgbcgmhjkbac/lib/jquery-2.0.3.min.js:2:25702)
    at Function.ready (chrome-extension://maellbbeahlpainnadomcgbcgmhjkbac/lib/jquery-2.0.3.min.js:2:2900)
    at S (chrome-extension://maellbbeahlpainnadomcgbcgmhjkbac/lib/jquery-2.0.3.min.js:2:553)

Incorrectly outputs all of the styles.

All this seems to do right now is reorder styles, change some image paths, and strip out non-webkit prefixed properties, e.g. -moz-transform and -ms-transform. It's even including unused Font Awesome rules. FYI, I tested this in Chrome 52 and Opera 37.

Any ideas on what could be done to fix this?