Features / CSS optimization
Show your page.
Not a blank screen.
Visitors should see your content, not wait for your theme’s stylesheets. Airlift changes how CSS loads so your page can appear sooner.
Waiting for the full stylesheets
First-screen styles included in the page
In this example, visitors can see the Airlift page while the other page is still waiting for CSS. First paint means content starts appearing—not that the entire page has finished loading.
1s and 5s are illustrative timings. Your results depend on your site, connection and other resources.Illustration: Airlift first paint at one second; original delivery first paint at five seconds.A faster first paint
Style what visitors
can see. First.
Your header, headline and opening content should not wait for the styles used further down the page.
Airlift puts the styles for the first screen directly into the page. The browser can use them immediately, while the remaining stylesheets download without blocking that first display.
This is critical CSS. It changes when visitors see your content—not your design.
Start with critical CSS for freeLess to download
A contact page does not
need a product gallery’s CSS.
Themes and builders can load styles for components a page never displays. Airlift can remove that unused CSS from the files delivered to eligible, measured layouts.
More than minification.
Minification removes formatting. Used CSS reduces the rules sent to the browser, while keeping the conditions that make those rules work.
The appropriate treatment for the page.
Eligible measured layouts can receive used CSS. Other eligible pages can use critical CSS and deferred stylesheets. These are alternative treatments, not two layers stacked on every page.
Speed without losing the design
The menu still needs to open.
The form still needs to work.
Styles that are unused when a page opens may be needed a moment later. Airlift checks supported interactions and screen widths before deciding what to retain.
Check different screens.
Measure the layout at four widths, from phone to wide desktop. Retain media rules for sizes between those measurements too.
Check more than the initial view.
Probe supported hover, focus, active and menu states. Keep animations, font declarations and additional compatibility rules.
Keep the rule’s original conditions.
A mobile rule stays a mobile rule. Styles retain their supported media, layer and other CSS contexts when rebuilt.
For developers: what happens to the CSS?
Airlift combines browser coverage ranges across devices per stylesheet. Retained rules are rebuilt in context, and each original sheet gets its own optimized copy. Unmatched tags stay untouched; processing failures have fallbacks.
@media (max-width: 640px) {
.menu.is-open { display: block; }
}Keep editing your site
Update the theme.
Keep the optimization current.
Add a plugin, change the header or publish a new layout. The styles your site needs will change too.
On subsequent optimization runs, Airlift checks for changes to template styling and remeasures changed work. Paid plans run on a schedule. Free supports manual re-optimization.
Compare plansYour original stylesheets stay intact.
- No edits to theme or plugin files. Airlift serves optimized copies.
- Keep a stylesheet whole when needed. Exclude a sheet with custom behavior you want to preserve.
- Fall back when processing fails. Uncertain replacements are skipped rather than forced.
- Turn off CSS optimization independently. Keep your other Airlift optimizations running.
For your page builder.
The result that matters
See how much sooner
your own page appears.
Compare your before-and-after results in Airlift. Review available scores, page weight and screenshots, then test your menus, forms and key pages on desktop and mobile.
Try Airlift on your siteQuestions about CSS optimization
No. Minification removes unnecessary formatting, but leaves the rules in place. Used CSS reduces the rules delivered for eligible measured layouts. Critical CSS changes when styles load. Airlift also minifies eligible files.
Airlift probes supported interaction states during browser measurement and retains rules for compatibility, including animations, fonts and screen widths between measured devices. This reduces the risk of removing styles needed later, but is not a guarantee for every custom interaction. After optimization, test your menus, forms and checkout on desktop and mobile. You can keep specific stylesheets whole or turn off the CSS layer.
It includes rules applied during browser measurements across four screen widths, plus rules retained for compatibility. Kept rules preserve their media conditions and supported CSS contexts. It is not the smallest theoretically possible stylesheet: some rules are deliberately kept to protect the design.
No. Used CSS is applied to eligible pages whose layout has been measured and matched, depending on the enabled settings. Other eligible pages can use critical CSS with deferred stylesheets, or keep their original treatment. A response gets one treatment, not used CSS and critical CSS stacked together.
No. Each original stylesheet has its own optimized copy. Airlift preserves the relationship to the original stylesheet rather than combining all files into one bundle.
No. Airlift serves optimized copies and changes eligible page output to reference them. Your theme and plugin files remain unchanged. CSS optimization can be disabled independently of the other optimization layers.
On subsequent optimization runs, Airlift compares the styling fingerprints of templates and remeasures changed work. Paid plans include scheduled re-optimization; Free supports manual runs within its allowance. This is not an immediate remeasurement after every edit.
Airlift measures theme and builder styles in the rendered page, rather than relying only on class names in HTML. It also includes compatibility handling for supported builder markup. Results depend on the site and enabled features; test important layouts and interactions after the first run.
Free includes dynamic critical CSS. Dynamic used CSS and scheduled re-optimization are included on paid plans. See the pricing page for the current inclusions and allowances.
Give visitors a page
they can see sooner.
Start with critical CSS on the free plan. No changes to your theme files.