Is flatten_css_imports enabled by default?

Yes. flatten_css_imports is in CoreFilters, the default RewriteLevel, so it runs unless you turn it off with DisableFilters.

How do I turn off flatten_css_imports?

Add ModPagespeedDisableFilters flatten_css_imports on Apache or pagespeed DisableFilters flatten_css_imports; on nginx. On IIS, add pagespeed DisableFilters flatten_css_imports to pagespeed.config.

filter · CSS filters

Flatten CSS @imports (flatten_css_imports)

Q: What does the flatten_css_imports filter do?

Replaces CSS @import rules with the contents of the imported file. Eliminates round trips caused by import chains. The CssFlattenMaxBytes parameter (default: 1024000) limits the size of the resulting flattened CSS.

Category:: CSS
CoreFilters:: Yes
OptimizeForBandwidth:: No
Risk:: Generally safe

Replaces CSS @import rules with the contents of the imported file. Eliminates round trips caused by import chains. The CssFlattenMaxBytes parameter (default: 1024000) limits the size of the resulting flattened CSS.

How it works

Flattening is trickier than plain concatenation — media queries, charset rules, and relative URLs all have to survive the merge; see flattening CSS @imports for the edge cases.

When to use it

In CoreFilters, the default RewriteLevel: it runs unless you disable it.
Risk rating on these docs: Generally safe.

Risks

The CSS filters page lists no specific risks for this filter. If a page misbehaves with it, DisableFilters flatten_css_imports turns it off for the scope you set it in.

Configuration

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

Apache

ModPagespeedEnableFilters flatten_css_imports

nginx

pagespeed EnableFilters flatten_css_imports;

IIS (pagespeed.config)

pagespeed EnableFilters flatten_css_imports

It is on by default under CoreFilters; to turn it off:

ModPagespeedDisableFilters flatten_css_imports   # Apache
pagespeed DisableFilters flatten_css_imports;   # nginx
pagespeed DisableFilters flatten_css_imports   # IIS

On the worker

The worker runs its own pipeline, configured by flags. Its equivalent of this filter is the css import flattening transform. Toggleable via --no-css-import-flattening.

Scoping, ForbidFilters and the thresholds filters read: Choosing filters .

Live example

Replaces @import rules with the imported CSS to avoid chained requests.

This filter changes how the page is structured or delivered, not its size, so the example shows a source diff rather than a byte or request reduction.

See the before and after, with the source diff →

Frequently asked questions

What does the flatten_css_imports filter do?: Replaces CSS @import rules with the contents of the imported file. Eliminates round trips caused by import chains. The CssFlattenMaxBytes parameter (default: 1024000) limits the size of the resulting flattened CSS.
Is flatten_css_imports enabled by default?: Yes. flatten_css_imports is in CoreFilters, the default RewriteLevel, so it runs unless you turn it off with DisableFilters.
How do I turn off flatten_css_imports?: Add ModPagespeedDisableFilters flatten_css_imports on Apache or pagespeed DisableFilters flatten_css_imports; on nginx. On IIS, add pagespeed DisableFilters flatten_css_imports to pagespeed.config.

combine_css — Combine CSS
compute_critical_css — Compute critical CSS
extend_cache_css — Extend cache for CSS
fallback_rewrite_css_urls — Fallback CSS URL rewriting
inline_css — Inline CSS
inline_google_font_css — Inline Google Fonts CSS
inline_import_to_link — Convert @import to link
move_css_above_scripts — Move CSS above scripts

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