Is outline_css enabled by default?

No. outline_css is not in CoreFilters, the default RewriteLevel; it runs only when you enable it by name with EnableFilters.

How do I enable outline_css on Apache and nginx?

Add ModPagespeedEnableFilters outline_css on Apache or pagespeed EnableFilters outline_css; on nginx. On IIS, add pagespeed EnableFilters outline_css to pagespeed.config.

filter · CSS filters

Outline CSS (outline_css)

Q: What does the outline_css filter do?

outline_css is the inverse of inline_css: it takes a large inline block out of the HTML and serves it as a stylesheet of its own, at a rewritten _.pagespeed.co. URL with a long cache lifetime, leaving a in the block's place. Not a core filter; enable it by name. Live demo: outline_css.

Category:: CSS
CoreFilters:: No
OptimizeForBandwidth:: No
Risk:: Experimental

outline_css is the inverse of inline_css: it takes a large inline <style> block out of the HTML and serves it as a stylesheet of its own, at a rewritten _.pagespeed.co. URL with a long cache lifetime, leaving a <link rel="stylesheet"> in the block’s place. Not a core filter; enable it by name. Live demo: outline_css.

How it works

When it helps and when it does not

The trade is about which bytes repeat. A <style> block rides inside the HTML, so a template that pastes the same block into every page sends it again on each of them, and when the HTML is generated per request none of those bytes can be cached. Outlining gives the block a URL of its own: the browser fetches the .pagespeed.co. file once, keeps it in cache, and every later page in the same directory that carries the same block reuses it; the file is named at the page’s own path, so pages in other directories get their own copy. What the first view pays is a render-blocking stylesheet request the page did not have before, and a block that only one page carries, or that differs from page to page, gets a file nobody else requests. Most sites are better served by keeping CSS in real files; this filter exists for HTML whose large stylesheets are stuck inline.

How it decides

Only a <style> block whose text is at least CssOutlineMinBytes (default 3000 bytes) is outlined. A <style scoped> element is left alone, because a scoped block cannot become a plain <link>, and so is a block whose type is anything other than CSS. Relative url() references inside the block are re-resolved against the generated file’s location, so images keep loading from where they did. The generated <link> carries the original element’s other attributes, so an id or media survives the move. The block must also arrive whole: when a flush lands in the middle of it, or a stray tag sits inside it, that block is not outlined and stays inline.

When to use it

Not in CoreFilters: it runs only when you enable it by name.
Risk rating on these docs: Experimental.

Risks

A first-time visitor waits on a render-blocking stylesheet request the inline block did not have; on a page seen once, that wait costs more than the bytes it saves.
Markup or scripts that expect the <style> element to exist in the page see a <link> instead.
Verify with the X-Mod-Pagespeed response header and a ?PageSpeedFilters=-outline_css comparison; Is it working? has the steps.

Configuration

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

Apache

ModPagespeedEnableFilters outline_css

nginx

pagespeed EnableFilters outline_css;

IIS (pagespeed.config)

pagespeed EnableFilters outline_css

<!-- before: 8 KB of rules ride inside every page response -->
<style type="text/css" id="large">
  .checkout { ... }
</style>

<!-- after: the rules are fetched once and kept in the browser cache -->
<link rel="stylesheet" href="/_.pagespeed.co.HASH.css" type="text/css" id="large" />

# Apache
ModPagespeedEnableFilters outline_css
ModPagespeedCssOutlineMinBytes 3000

# Nginx
pagespeed EnableFilters outline_css;
pagespeed CssOutlineMinBytes 3000;

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

Live example

Moves large inline <style> blocks into external files so they can be cached.

Measured on the demo page, original against optimized:

HTML size

5.4 KB → 524 B −91%

See the before and after, with the source diff →

Frequently asked questions

What does the outline_css filter do?: outline_css is the inverse of inline_css: it takes a large inline <style> block out of the HTML and serves it as a stylesheet of its own, at a rewritten _.pagespeed.co. URL with a long cache lifetime, leaving a <link rel="stylesheet"> in the block's place. Not a core filter; enable it by name. Live demo: outline_css.
Is outline_css enabled by default?: No. outline_css is not in CoreFilters, the default RewriteLevel; it runs only when you enable it by name with EnableFilters.
How do I enable outline_css on Apache and nginx?: Add ModPagespeedEnableFilters outline_css on Apache or pagespeed EnableFilters outline_css; on nginx. On IIS, add pagespeed EnableFilters outline_css 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
flatten_css_imports — Flatten CSS @imports
inline_css — Inline CSS
inline_google_font_css — Inline Google Fonts CSS
inline_import_to_link — Convert @import to link

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