filter · CSS filters
Minify CSS (rewrite_css)
- Category:
- CSS
- CoreFilters:
- Yes
- OptimizeForBandwidth:
- Yes
- Risk:
- Generally safe
rewrite_css parses each stylesheet, minifies it, and rewrites the url() references inside it so images and fonts go through mod_pagespeed’s optimization and cache-extension pipeline. The result is served from a rewritten .pagespeed.cf. URL with a long cache lifetime; the original file on disk is never touched. In OptimizeForBandwidth mode the minified bytes replace the original response in place and the URL stays as authored.
How it works
Live demo: rewrite_css.
When it helps and when it does not
Minification helps most on hand-maintained CSS with comments and generous formatting, and the URL rewriting helps wherever stylesheet-referenced images are not already optimized. A build pipeline that already minifies and fingerprints its CSS leaves the filter little to do; running it anyway only adds a rewrite step. Because the parser declines a stylesheet it cannot fully parse rather than guessing, heavily hack-laden legacy CSS may pass through unminified — the companion fallback_rewrite_css_urls still rewrites the URLs inside such files.
How it decides
The filter runs a real CSS parser over the file. On a parse failure it produces no minified output and leaves minification to no one: only URL rewriting can still happen, through fallback_rewrite_css_urls. Values are shortened only where the equivalence is exact, such as 0px to 0 and #ffffff to #fff. The stylesheet must sit on a domain the module is authorized to fetch, and the rewritten URL embeds a content hash so a changed file is picked up without a purge.
When to use it
- In CoreFilters, the default RewriteLevel: it runs unless you disable it.
- Part of OptimizeForBandwidth, the level that optimizes resources without changing their URLs.
- Risk rating on these docs: Generally safe.
Risks
-
A stylesheet that relies on parser-error recovery (old browser hacks) can be declined or rewritten differently than a browser would interpret it; test such files before rolling out.
-
Verify with the
X-Mod-Pagespeedresponse header and a?PageSpeedFilters=-rewrite_csscomparison; Is it working? has the steps.
Configuration
Enable it in the module configuration, at server, virtual-host or location scope:
Apache
ModPagespeedEnableFilters rewrite_cssnginx
pagespeed EnableFilters rewrite_css;IIS (pagespeed.config)
pagespeed EnableFilters rewrite_cssIt is on by default under CoreFilters; to turn it off:
ModPagespeedDisableFilters rewrite_css # Apache
pagespeed DisableFilters rewrite_css; # nginx
pagespeed DisableFilters rewrite_css # IIS/* before */
/* Site header, see ticket 412 */
.header {
margin: 0px 0px 16px 0px;
background: #ffffff url(/img/banner.png) no-repeat;
}
/* after */
.header{margin:0 0 16px 0;background:#fff url(/img/banner.png.pagespeed.ce.HASH.png) no-repeat}
On the worker
The worker runs its own pipeline, configured by flags. Its equivalent of this filter
is the
css minification
transform. Always-on under pagespeed on;; use --disable-css to skip CSS rewriting entirely.
Scoping, ForbidFilters and the thresholds filters read:
Choosing filters
.
Live example
Strips whitespace and comments, then rewrites CSS to the smallest equivalent form.
Measured on the demo page, original against optimized:
-
Total bytes
721 B → 588 B −18%
-
HTML size
685 B → 558 B −19%
Frequently asked questions
- What does the rewrite_css filter do?
rewrite_cssparses each stylesheet, minifies it, and rewrites theurl()references inside it so images and fonts go through mod_pagespeed's optimization and cache-extension pipeline. The result is served from a rewritten.pagespeed.cf.URL with a long cache lifetime; the original file on disk is never touched. In OptimizeForBandwidth mode the minified bytes replace the original response in place and the URL stays as authored.- Is rewrite_css enabled by default?
- Yes.
rewrite_cssis in CoreFilters, the default RewriteLevel, so it runs unless you turn it off withDisableFilters. It is also part of the OptimizeForBandwidth level. - How do I turn off rewrite_css?
- Add
ModPagespeedDisableFilters rewrite_csson Apache orpagespeed DisableFilters rewrite_css;on nginx. On IIS, addpagespeed DisableFilters rewrite_cssto pagespeed.config.
Related filters
- combine_css — Combine CSS
- inline_css — Inline CSS
- prioritize_critical_css — Prioritize critical CSS
- compute_critical_css — Compute critical CSS
- extend_cache_css — Extend cache for CSS
- fallback_rewrite_css_urls — Fallback CSS URL rewriting
- flatten_css_imports — Flatten CSS @imports
- inline_google_font_css — Inline Google Fonts CSS
This page is drawn from the rewrite_css entry on CSS filters. Every filter in one table: PageSpeed filters.