Critical CSS generator (beta).

Generate Critical Path CSS and speed up your website

Critical CSS in 3 simple steps

  1. Enter the URL of the page for which you want to create critical CSS for
  2. Paste the results in a <style> tag on your page, just below the <title>
  3. Defer loading of the original stylesheets
    <link rel = "preload" href = "orig.css" type = "text / css" as = "style" onload = "this.onload = null; this.rel = 'stylesheet' ; "/>

What is Critical CSS

Due to the way all modern browsers work, displaying the page is blocked by external CSS files. When a browser has to download 1 or more CSS files, a page can easily block 100ms or longer. One way to avoid that is to use critical CSS. Critical CSS is a collection of CSS that is required to show only the visible part of the page. This critical CSS is often shown inline, in the head of the page. As a result, a browser does not have to download 1 or more CSS files before it can start rendering. Meanwhile, while the page is displayed, your browser downloads the final CSS files in the background.

Feedback / beta status

Currently the critical CSS generator is in beta status. That means that I am still experimenting all the time. Is the critical CSS generator not working for you? Don't worry ... try again in 5 minutes!

Feedback or missing a feature? Let me know