optimize your critical rendering path
created at tech crunch disrupt sf 2013
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.
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
- an out of the box solution to automatically inline css
- ready for 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
- clone the repo
- open Chrome and go to extensions
- click developer mode, load unpacked extensions, and select repo
- enable CSSVacuum
- 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
- 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.