This will analyse any URL given and concatenate the CSS needed to display the “above the folder” HTML rendering, i.e. the “critical CSS” or “critical CSS path“.
A nice tool, doing a job that is not easy to do without. And it returns an already minified css version directly.
You must then incorporate this code into the head of your page(s), either manually, or with a dedicated plugin, or any cache or optimizer plugin.
This will permit to render the th top part of the initially visible zone faster, without loading the external css files.
- will this increase your your google metrics: likely
- will it increase your one-time visitors experience : likely
- will it increase your repeating visitors experience: no (as it will increase the weight of every page this css is added, instead of adding it only to an external file that is loaded only once).
Tip #1: clear any server or plugin cache just after
Tip #2: if going into that optimization route, in order to have the most suited CSS, it worth to make this trick once per every notably different group of page you have in your site, each one using likely a very different CSS (ex: forum pages, normal posts, custom post types …).
Tip #3: as this CSS is purely a static code -on intent-, it should be updated every time you do a major change on the CSS of the page.
