Free tool

Critical CSS that is tested before you get it.

Paste the address of a public page. A real browser opens it on a phone and on a desktop, collects the CSS the first screen needs, then draws the page with only that CSS and fixes anything that would jump when the full stylesheet arrives.

Generate critical CSS

Free, no sign-up. A few pages a day per visitor. We open the public page you enter; the address and the result are kept for 30 days, your IP address is only used, hashed, to count the daily limit. Privacy

Critical CSS

What makes this one different

Checked, not guessed

Most generators keep the rules that match what is on the first screen and stop. We then draw the page with only those rules: a menu, a badge or a tab bar that lands somewhere else gets its rules added, until nothing moves.

Phone and desktop in one

Both screens are collected and merged. Rules from stylesheets that only apply on small screens keep their media query, so mobile-only CSS never leaks onto desktop.

WooCommerce aware

Product galleries normally stay invisible until their script runs, then jump while the slider sets up. The CSS shows the first image at once and reserves the thumbnail strip.

How to use it

Put the CSS in a <style> tag at the top of <head>, before your other stylesheets, and load the full stylesheets without blocking the first paint:

<head>
  <style id="critical">/* paste the critical CSS here */</style>
  <link rel="stylesheet" href="/style.css" media="print" onload="this.media='all'">
  <noscript><link rel="stylesheet" href="/style.css"></noscript>
</head>

The critical CSS must come before the full stylesheets, so the full CSS wins once it has loaded.
Keep a stylesheet's own media query in the onload line (for example this.media='(max-width: 768px)') instead of all.
Critical CSS is per layout: a product page and a blog post need their own. Regenerate after design changes.
Pages behind a login, a password or a cookie wall are generated as a visitor without cookies sees them.

Or let it happen on every page, automatically.

ZeroConfig is a WordPress plugin with one switch. It generates verified critical CSS for each kind of page, refreshes it when your design changes, and a real-browser Safety Check switches it off by itself on any page where it would change how your site looks.

Install ZeroConfig free