Critical Path CSS Generator

Speed up your page render time in no time! What is this?
Analyzing the page...


What is this Critical Path you're talking about?

The critical path is the path to render a web page - what is needed before that can happen. CSS stylesheets block rendering until the browser has requested, received, downloaded and parsed your stylesheets, the page will remain blank until all of this has occurred. By reducing the amount of CSS the browser has to decipher to load the page, and by inlining it on the page (removing the HTTP request), you can get the web page to render much, much faster.

The Critical Path CSS Generator tool extracts only the CSS needed for the above-the-fold content for the page you specify. You should minify the generated CSS, then inline it on your page (wrapped in <style> tags). It should be placed in the HEAD section of your HTML - to replace the full CSS link(s). The remaining CSS stylesheet should be moved to the bottom of your page, just before the closing body tag. (Note: you do not have to remove anything from your existing CSS file - simply move it to the bottom of your page). Be sure to only move down the remaining full CSS to the bottom of the page for pages where you have actually inlined critical path CSS.

More Info on CSS Critical Path:
CSS and The Critical Path
Critical Render Path
Optimizing the Critical Rendering Path
Critical Path CSS.

Problems with the generated CSS?

Background images or Fonts missing

Change any relative paths (ie; background-image: url("../images/x.gif");) to absolute background-image: url("");, and then try again.

Unstyled content showing

The most common problem is with clearing floats. Instead of clearing elements appearing after floated elements (f.e. using clear:both;), clear the floats themselves by using the clear-fix pattern. Float clearing will now work also in the generated critical css.

If you for some reason have an element appearing early in the DOM, but that you apply styles to move outside of the above the fold content (using absolute position or transforms), consider whether it really should appear so early in the DOM.

Special glyphs not showing or showing incorrectly

Problems with special characters like after converting? Make sure you use the correct hexadecimal format in your CSS. You can always get this format from your browser console, by entering '→'.charCodeAt(0).toString(16) (answer for this arrow glyph is 2192). When using hexadecimal format in CSS it needs to be prepended with a backslash, like so: \2192 (f.e. content: '\2192';)

Other problems?

I'm always trying to make this tool better. Please report your issue on GitHub, or contact me directly, and I will try to fix it as soon as possible.

Thanks to MaxCDN for sponsoring this tool and open source development!