CSS Processors

pageflare applies three CSS-side optimizations: a minifier that runs on every CSS file, a critical-CSS extractor that identifies the styles required to paint the initial viewport, and an opt-in Remove Unused CSS pass that drops rules unused across the site.

CSS minification

pageflare’s CSS minifier operates on the parsed stylesheet structure rather than as a plain text transformer, enabling semantically correct optimizations:

Removes comments, redundant whitespace, and unnecessary semicolons.
Collapses shorthand properties where safe (e.g. margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0 → margin: 0).
Removes duplicate rules and overridden declarations.
Normalizes color values to their shortest representation.
Strips vendor prefixes that are no longer required for the configured browser targets.

The minifier also processes inline <style> blocks inside HTML files — these are minified in place as part of the HTML minification pass.

Critical CSS extraction PRO

The most impactful render-blocking fix pageflare offers. The goal: give the browser exactly the CSS it needs to paint the initial viewport, inlined directly in <head>, so the first paint never waits for an external stylesheet.

How it works

For each page, pageflare lays the page out in a real browser at every configured viewport (default desktop and mobile) and identifies the CSS rules that affect what’s visible without scrolling. Those rules become the page’s critical CSS. The remainder is loaded asynchronously, so the browser can paint immediately.

A rule that’s critical at any configured viewport is kept — one HTML output per page, no per-device split.

@font-face, @keyframes, and any @media queries that could apply on first render are always included.

Output

The original render-blocking stylesheet is split in two:

Critical rules — inlined into <head> so they’re available on first byte.
The remainder — published as a sibling stylesheet, loaded asynchronously, and named with a content hash so updates invalidate the cache automatically. The original (now unused) stylesheet is removed from the output.

The asynchronously-loaded sheet contains the full original source with the critical rules subtracted, not a separate below-fold extraction. This preserves cascade correctness: declarations that should win once everything is loaded still get their chance.

The HTML rewrite looks like:

<!-- Before -->
<link rel="stylesheet" href="/styles/main.css">

<!-- After -->
<style>/* inlined critical CSS */</style>
<link rel="stylesheet" href="/styles/main-a1b2c3d4.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="/styles/main-a1b2c3d4.css"></noscript>

The media="print" trick lets the browser download the stylesheet at low priority without blocking the first paint. onload promotes it to media="all" once it’s ready. The <noscript> fallback covers users without JavaScript.

Why per-page

A shared stylesheet usually contains rules for every component on the site. The above-the-fold rules differ between a homepage, a blog post, and a product page. Per-page extraction means each page gets exactly its critical CSS, not a superset that grows with the site.

Configuration

{
  "critical_css": true,

  // Default: desktop + mobile. Add tablet by appending {"width":768,"height":1024}.
  "critical_css_viewports": [
    {"width": 1280, "height": 720},
    {"width": 360,  "height": 640}
  ]
}

Remove unused CSS PRO

A complementary opt-in feature. Scans every HTML output and removes CSS rules whose selectors don’t match any element on the site, then ships the pruned stylesheet.

If you’ve used “Remove Unused CSS” in other tools, this is the same idea — same name, same goal, smaller CSS payload.

Off by default, because false positives are possible on JS-heavy sites where classes are added at runtime. Safe to enable on:

Astro / 11ty / Hugo / other static-site generators where the HTML output reflects all reachable DOM.
React / Vue sites that hydrate but don’t add new class names client-side.

{
  "remove_unused_css": true
}

The pruning runs across the whole site, so a rule used on any page is kept. Combined with critical-CSS extraction, this is the most aggressive CSS-byte reduction pageflare offers — review the output before shipping the first time.

HTML processors — critical CSS injection that inlines the extracted output
Asset graph — tracks CSS→HTML dependencies used during extraction
Processors — how the CSS processor chain is ordered and gated