Outline CSS

Configuration

The 'Outline CSS' filter is enabled by specifying:

Apache:
ModPagespeedEnableFilters outline_css
Nginx:
pagespeed EnableFilters outline_css;

in the configuration file.

Description

This filter is an experimental filter which takes inline CSS and puts it in an external resource.

Operation

The 'Outline CSS' filter outlines all CSS that is larger than a minimum byte threshold. The threshold can be set by adding/changing the line:

Apache:
ModPagespeedCssOutlineMinBytes 3000
Nginx:
pagespeed CssOutlineMinBytes 3000;

in the configuration file.

For example, if the HTML document looks like this: 

<html>
  <head>
    <style type="text/css">
      .yellow {background-color: yellow;}
      .blue {color: blue;}
      .big { font-size: 8em; }
      .bold { font-weight: bold; }
      ...
    </style>
  </head>
  <body>
    <div class="blue yellow big bold">
      Hello, world!
    </div>
  </body>
</html>

Then PageSpeed will rewrite it into: 

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="of.HASH.css">
  </head>
  <body>
    <div class="blue yellow big bold">
      Hello, world!
    </div>
  </body>
</html>

And a new CSS file (of.HASH.css) will be: 

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
   .bold { font-weight: bold; }
   ...

Example

You can see the filter in action at www.modpagespeed.com on this example.

Pros and Cons

This could be advantageous if:

  1. The CSS does not change much but the HTML does, then we can cache the CSS.
  2. One has many websites with the same inlined CSS, it will be outlined to a consistent name and thus will be cached more or
  3. The inline CSS is very long, in which case, outlining it will cause it to be loaded in parallel with the HTML doc.

However, for some websites it will be dis-advantageous because it will:

  1. Create an extra HTTP request.
  2. Tie up one of the connections this domain, which could have been used to fetch the actually cacheable external resources.

Requirements

Outline filters can currently only run on single-server environments because the resource can only be fetched from a server after that server has rewritten the HTML page. If a different server rewrote the HTML page, then this sever will not have the information needed to create the resource. This could be by a network database shared between servers.

The Outline CSS filter may need to "absolutify" relative URLs, if it is outlined to a different directory than the original HTML.

The Outline CSS filter will maintain the order of the CSS contents, as class order can be significant.

Risks

The 'Outline CSS' filter is considered low risk. However, JavaScript can be written that walks the DOM looking for <link> or <style> tags with certain syntax. Such JavaScript may behave differently on a page which has added <link> or removed <style> tags in this way.

Additionally we have reproduced an obscure difference that sometimes occurs on WebKit-based browsers (such as Safari, Chrome and the Android browser). As of January 2011, WebKit does not delay JavaScript evaluation for external CSS loading (See https://webkit.org/b/24898). So some CSS attributes, when outlined, can cause slightly different rendering depending on whether or not the CSS file is loaded before or after the JavaScript is executed.