Why is Render blocking CSS bad ?

All the CSS Styles loaded from external files is considered render blocking. Why ?

In order for the browser to display your web page and use the styles you specified in the external CSS files it has to load them first. This means that your web page won't be displayed until these files are loaded.

In order to speed up the loading of your website you can inline the parts from the external CSS files which are needed to render the above the fold content. After loading the page you can instruct the browser to load the rest of the CSS files via JS.

But we can do better than this. Why using so many CSS files if we can have one single CSS file which includes them all and loads after the browsers has already downloaded the page content ?

What does this tool do ?

It was build to automatically generate the Critical Path CSS for your website and to also generate a single minified CSS file from all the CSS files your website uses.

How it works:

Insert the url of your website in the field above and press Generate Critical Path CSS .

. The tool will crawl your website and analyze all the CSS files.

They will be combined into a single CSS file which will be available download (both minified and unminified);

It will analyze the CSS styles needed for the above the fold part of your website and place them into a separate file which will also be available for download (both minified and unminified);

What do I have to do to update my web page ?

If you want to still load all your CSS files:

1.1. Download or Copy the minified or unminified Critical CSS File and PASTE all its content (including the <style> tag) in the <head> tag.

and PASTE its content (including the tag) in the tag.

1.2. Move the references to your CSS Files and JS Files just before closing the <body> tag.

*Might not work ok for some configurations since some JS might be needed to render the above the fold content. If so, move only the CSS Files and leave the JS Files in place.

and just before closing the tag. *Might not work ok for some configurations since some JS might be needed to render the above the fold content. If so, move the CSS Files and leave the JS Files in place.

Visual Setup Example



If you want to use a single CSS file which loads after the browser finished loading the page:

2.1. Follow all the steps from 1.



2.2. Download the minified or unminified Combined CSS File containing all the CSS Styles and upload it to your server.

containing all the CSS Styles and upload it to your server.

2.3. Replace all the references to your CSS Files from before closing the <body> tag with the JS code generated above.

tag with the JS code generated above.

3.4. Update the path to the Combined CSS File in the code (from step 2.3.) to point to the url where it was uploaded (from step 2.2.)

in the code (from step 2.3.) to point to the url where it was uploaded (from step 2.2.)

Visual Setup Example



A comprehensive article about the Critical Path CSS is available on Google Developers.