Critical Path CSS Generator

Speed up your page render time in no time! What is this?
Problem? Suggestion?
characters
Auto fetch css in improved service: criticalcss.com.
Sending full css..
spinner
characters

What is this Critical Path you're talking about?

The critical path is the path to render a web page - what's 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. By reducing the amount of CSS the browser has to go through, and by inlining it on the page (removing the HTTP request), we can get the page to render much, much faster.

Example setup

Example setup for critical path css

You should minify the critical CSS, then inline it on your page (wrapped in <style> tags). It should be placed in the header, replacing the full CSS link(s). The full CSS, and JS script tags (which also block rendering), should be moved out of the HEAD, to the end of the page, just before the closing body tag.

You need to generate critical css for each page individually. Make sure to only move down the full CSS to the bottom of the page for pages where you have inlined critical path css in the header.

Problems with generated CSS

Background images or Fonts missing

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

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.