# Combine CSS (combine_css)

Combines multiple CSS files into one. How the mod_pagespeed combine_css filter works, when to use it, its risks and the Apache, nginx and IIS directives.

Canonical URL: https://modpagespeed.com/docs/filters/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](https://modpagespeed.com/examples/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?](https://modpagespeed.com/docs/is-it-working/) has the steps.

## Configuration

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

**Apache**

```apache
ModPagespeedEnableFilters combine_css
```

**nginx**

```nginx
pagespeed EnableFilters combine_css;
```

**IIS (pagespeed.config)**

```text
pagespeed EnableFilters combine_css
```

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

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

```html
<!-- 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
# Apache
ModPagespeedEnableFilters combine_css
ModPagespeedMaxCombinedCssBytes 102400
```

```nginx
# Nginx
pagespeed EnableFilters combine_css;
pagespeed MaxCombinedCssBytes 102400;
```

Scoping, `ForbidFilters` and the thresholds filters read: [Choosing filters](https://modpagespeed.com/docs/filter-selection/).

## Live example

See the before and after, with the source diff: [combine_css example](https://modpagespeed.com/examples/combine_css/).

## 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.

## Related filters

- [`rewrite_css`](https://modpagespeed.com/docs/filters/rewrite_css/): Minify CSS
- [`inline_css`](https://modpagespeed.com/docs/filters/inline_css/): Inline CSS
- [`prioritize_critical_css`](https://modpagespeed.com/docs/filters/prioritize_critical_css/): Prioritize critical CSS
- [`compute_critical_css`](https://modpagespeed.com/docs/filters/compute_critical_css/): Compute critical CSS
- [`extend_cache_css`](https://modpagespeed.com/docs/filters/extend_cache_css/): Extend cache for CSS
- [`fallback_rewrite_css_urls`](https://modpagespeed.com/docs/filters/fallback_rewrite_css_urls/): Fallback CSS URL rewriting
- [`flatten_css_imports`](https://modpagespeed.com/docs/filters/flatten_css_imports/): Flatten CSS @imports
- [`inline_google_font_css`](https://modpagespeed.com/docs/filters/inline_google_font_css/): Inline Google Fonts CSS

This page is drawn from the [combine_css entry on CSS filters](https://modpagespeed.com/docs/css-filters/#combine_css). Every filter in one table: [PageSpeed filters](https://modpagespeed.com/docs/filters/).