Critical CSS generator.

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

Critical CSS is a collection of CSS declarations that are used to render the visible viewport. The visible viewport is often referred to as 'above the fold content'. It is that part of a webpage that you can see in your browser without having to scroll. Since the visible viewport is the first thing a visitor sees you should prioritize the rendering of the visible viewport. Critical CSS can help you do that!

Why should I use Critical CSS

In a nutshell: because it is much faster! Critical path (above-the-fold) css is one of the most important & impactful techniques available to optimize CSS delivery. Due to the way all modern browsers work, all the styles frome external files are considered render blocking. This means that a browser will not start rendering (generate the render tree to be specifical) untill it has downloaded all the external css files in the head of the page. When a browser has to download 1 or more CSS files, a page can easily block 100ms or longer. Google PageSpeed Insights suggests eliminating render-blocking resources to help your page load faster.
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.

How do I use the Critical CSS generator?

First of all you need to generate the Critcal Path CSS for your webpage. Simply prodice the url of your page and then press 'Generate Critical CSS'. After a few seconds you will see the extracted CSS
Copy that CSS and place it in the <head> of the page in <style> tag on your page, just below the <title>
The next step is to defer your original CSS. There are 3 methods of defering your CSS.

  1. Preload the CSS and swap the rel on load
  2. Load the CSS with media=print and on load swap the media element
  3. Place the oroginal CSS links in the footer of your page

Caching non-critical CSS

Critical CSS is blazingly fast for first-time visitors that do not yet have your CSS files stored in their browsers cache. For returning visitors there usually is little need for Critical CSS since the CSS files can be loaded from the browsers cache.

Should I combine my stylesheets?

Is it faster, after implementing Critical CSS, to combine your stylesheets? There is no easy answer to that questions. Sometimes it is faster to combine your stylesheets and sometimes it is not. This has to do with the critical rendering path. If there are more then 5 hight priority resources it usually makes sense to combine a few stylesheets.

How does the Critical CSS generator work?

The critical CSS generator works on a custom NodeJs platform. We basically visit your webpage with a real chrome-based webbrowser. We evaluate your website on different viewports and determine what parts of your stylesheets are used for the rendering of the visible viewport (the visible part of your page). We then clean up an minify the CSS that is needed for rendering.

Is there a wordpress plugin for you Critical CSS generator?

Yes there is. It is called the Core Web Vitals plugin, specifically designed to work together with our Critical Path extractor.

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