Skip to main content

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-Pagespeed response header and a ?PageSpeedFilters=-rewrite_css comparison; Is it working? has the steps.

Configuration

Enable it in the module configuration, at server, virtual-host or location scope:

Apache

ModPagespeedEnableFilters rewrite_css

nginx

pagespeed EnableFilters rewrite_css;

IIS (pagespeed.config)

pagespeed EnableFilters rewrite_css

It 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%

See the before and after, with the source diff →

Frequently asked questions

What does the rewrite_css filter do?
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.
Is rewrite_css enabled by default?
Yes. rewrite_css is in CoreFilters, the default RewriteLevel, so it runs unless you turn it off with DisableFilters. It is also part of the OptimizeForBandwidth level.
How do I turn off rewrite_css?
Add ModPagespeedDisableFilters rewrite_css on Apache or pagespeed DisableFilters rewrite_css; on nginx. On IIS, add pagespeed DisableFilters rewrite_css to pagespeed.config.

This page is drawn from the rewrite_css entry on CSS filters. Every filter in one table: PageSpeed filters.

Search