CSS Processors

pageflare applies two CSS processors: a minifier that runs on every CSS file, and a critical CSS extractor that identifies and separates the styles required to render the initial viewport.

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

Above-the-fold CSS extraction is the most impactful render-blocking fix available in pageflare. The goal: give the browser exactly the CSS it needs to paint the initial viewport, inlined directly in <head>, so the first paint does not wait for any external stylesheet.

How extraction works

Headless render — pageflare spawns a headless browser instance pointed at the page. The browser renders the page at a configured viewport size (default 1300×900).
Rule coverage analysis — the browser’s CSS coverage API records which CSS rules were applied to elements in the initial viewport (i.e. elements that are visible without scrolling).
Rule extraction — pageflare reads the coverage data and pulls matching rules from the original stylesheet source. @font-face, @keyframes, and any @media queries that could match on first render are always included.
Output — the extracted rules are written to a separate .critical.css file per page. This file is then consumed by the HTML critical CSS injection processor which inlines it and makes the full stylesheet non-render-blocking.

Why per-page extraction matters

A shared stylesheet may contain rules for every component on the site. The above-the-fold rules differ between a homepage, a blog post, and a product page. Extracting per-page means each page gets exactly its critical CSS, not a superset that would grow as the site grows.

Configuration

{
  "critical_css": true
}

The non-render-blocking load pattern

After extraction, the HTML processor converts:

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

into:

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

The media="print" trick causes the browser to download the stylesheet at low priority without blocking rendering. The onload handler switches it to media="all" once downloaded, applying the full styles. The <noscript> fallback ensures users with JavaScript disabled still get a styled page.

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