Critical CSS generator

Critical CSS is the small part of your styles that the first screen needs. Inlining it lets the page paint before the full stylesheets arrive. The generator is a Pro feature in the Cache & Optimization tab, under the Critical CSS field. It needs nothing installed on the server, because the default engine runs in your own browser.

Generate it

1. Open Baza Helper > Cache & Optimization and scroll to the Critical CSS field.
2. Choose the Page address (the home page by default) and the Screen size: Mobile 390 x 844, Desktop 1440 x 900, or Both.
3. Press Generate automatically and wait. Hidden frames load a signed copy of the page and the collector reads which rules the first screen uses.
4. Read the result card: old and new size, warnings, the layout difference in percent and a scaled live preview.
5. Press Apply to save it, or Cancel to leave everything as it was.

Nothing is saved before you press Apply, and your stylesheets are never changed. The previous value is kept first, and Restore previous version swaps back (the last 5 versions are remembered).

How the page is read

• The page is loaded as a logged-out visitor through a signed link that works for 15 minutes, so the admin bar and your login do not leak in.
• A rule is kept when its selector matches an element that has a box on the first screen. Rules that hide an element on the first screen are kept in a trimmed form.
• Hover and focus rules, print rules, below-the-fold rules and unused @font-face, @keyframes and @property are left out.
• The order of @layer, the @media, @supports and @container wrappers, custom properties and the cascade order are kept. Identical rules are merged and the last copy stays.
• Custom properties that nothing uses are dropped. Embedded files (url(data:…) of 3000 characters or more) are left out and reported.
• The output is minified and ASCII only.

Limits and safety

• The result is limited to 64 KB. When it is over, the message shows what takes the room (custom properties, fonts, animations, media rules, the largest class groups).
• Only your own site addresses are allowed, on ports 80 and 443, without credentials.
• A run happens one at a time, up to 12 per hour and 8 seconds apart for each user.
• A site that forbids framing (X-Frame-Options or frame-ancestors) reports that the frame was blocked.
• Unreadable cross-origin stylesheets are reported as warnings.

Use it with deferred styles

After you apply critical CSS you can list the Stylesheet handles to load after critical CSS. Those styles then load without blocking the first paint, with a no-JavaScript fallback. Incomplete critical CSS can cause a flash of unstyled content, so look at the first screen on a phone and on a desktop.

The setting Use Critical CSS on the home page only is on by default. The Critical CSS is made from one page, and other pages have other first-screen rules, so with deferred styles they could flash unstyled for a moment. When it is on, only the home page gets the inline Critical CSS and the deferred styles, and the other pages load their styles as usual. When it is off, the whole site uses them, and you accept a possible flash on pages that differ from the one it was made from.

The setting covers the inline CSS, the deferred stylesheet links, the merged deferred file, the script that switches the styles on and the fonts preloaded from the Critical CSS. Each deferred stylesheet is switched on in its own turn, and the screen is measured once, when the browser is idle.

For developers

An optional server worker (Node 18+ with Chromium) can generate the CSS without a browser tab, and other generators can be added through the baza_helper_critical_css_generators filter. The active one is chosen with baza_helper_critical_css_generator.