Is combine_css enabled by default?

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

How do I turn off combine_css?

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

filter · CSS filters

Combine CSS (combine_css)

Q: What does the combine_css filter do?

combine_css concatenates consecutive references into one stylesheet and swaps the group for a single to the combined file at a .pagespeed.cc. URL. Three stylesheets in a row become one request, and the rules keep their original order so the cascade is unchanged. Live demo: combine_css.

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

combine_css concatenates consecutive <link rel="stylesheet"> references into one stylesheet and swaps the group for a single <link> to the combined file at a .pagespeed.cc. URL. Three stylesheets in a row become one request, and the rules keep their original order so the cascade is unchanged. Live demo: combine_css.

How it works

When it helps and when it does not

Combining was designed for HTTP/1.1 connection limits. CSS is render-blocking, so even over HTTP/2 one combined fetch can beat several discovered-in-parallel fetches, but the margin is much smaller than it was: multiplexing removes the queueing that made combining essential. The counter-costs are real: the combined file invalidates as a whole when any member changes, and first paint waits for the entire combined download. Sites that already ship one bundled stylesheet gain nothing.

How it decides

Only consecutive links with the same media value combine; a different media attribute starts a new group, as does an inline <style> block, an IE conditional comment, a <link> inside <noscript>, or a link carrying extra attributes such as id or title, which is left as authored. Every member must come from a domain the module is authorized to fetch. MaxCombinedCssBytes caps the combined size and defaults to -1, no limit.

When to use it

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

Risks

Relative url() paths inside combined files are resolved against each member’s own location, so members from different directories combine safely; what does not survive is markup that depends on the exact set of <link> elements, such as scripts that toggle stylesheets by index.
Verify with the X-Mod-Pagespeed response header and a ?PageSpeedFilters=-combine_css comparison; Is it working? has the steps.

Configuration

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

Apache

ModPagespeedEnableFilters combine_css

nginx

pagespeed EnableFilters combine_css;

IIS (pagespeed.config)

pagespeed EnableFilters combine_css

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

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

<!-- before -->
<link rel="stylesheet" href="/css/reset.css" />
<link rel="stylesheet" href="/css/layout.css" />
<link rel="stylesheet" href="/css/theme.css" />

<!-- after -->
<link rel="stylesheet" href="/css/reset.css+layout.css+theme.css.pagespeed.cc.HASH.css" />

# Apache
ModPagespeedEnableFilters combine_css
ModPagespeedMaxCombinedCssBytes 102400

# Nginx
pagespeed EnableFilters combine_css;
pagespeed MaxCombinedCssBytes 102400;

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

Live example

Combines multiple stylesheet files into one to cut HTTP requests.

Measured on the demo page, original against optimized:

HTTP requests

5 → 2 −3
Total bytes

4.7 KB → 4.6 KB −3%
HTML size

435 B → 305 B −30%

See the before and after, with the source diff →

Frequently asked questions

What does the combine_css filter do?: combine_css concatenates consecutive <link rel="stylesheet"> references into one stylesheet and swaps the group for a single <link> to the combined file at a .pagespeed.cc. URL. Three stylesheets in a row become one request, and the rules keep their original order so the cascade is unchanged. Live demo: combine_css.
Is combine_css enabled by default?: Yes. combine_css is in CoreFilters, the default RewriteLevel, so it runs unless you turn it off with DisableFilters.
How do I turn off combine_css?: Add ModPagespeedDisableFilters combine_css on Apache or pagespeed DisableFilters combine_css; on nginx. On IIS, add pagespeed DisableFilters combine_css to pagespeed.config.

rewrite_css — Minify 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 combine_css entry on CSS filters. Every filter in one table: PageSpeed filters.