Combine CSS

PageSpeed Service was turned off on August 3rd, 2015. Please see Turndown Information for PageSpeed Service.

Objective

Reduce number of HTTP round-trips by combining multiple CSS resources into one.

PageSpeed rule

This rewriter implements the PageSpeed rule for minimizing round trip times.

Description

This rewriter reduces the number of HTTP requests made by a browser by replacing multiple distinct CSS resources with a single CSS resource containing all the contents. This is particularly important in older browsers and mobile networks, where the number of connections are limited to two per domain. In addition to reduced overhead for HTTP headers and communications warm-up, this approach works better with TCP/IP slow-start, increasing the effective payload bit-rate through the browser's network connection. Only external (outlined) CSS resources with same media attributes are combined by this rewriter. If the URL for the combined resource exceeds the maximum URL length, multiple combined URLs are generated to accommodate all the CSS resources.

Similar to Proxy CSS rewriter, relative URLs in the stylesheet are converted to absolute URLs before combining them, so that these URLs remain valid even when the base URL of the page changes.

Operation

This rewriter parses the HTML document, finds all adjacent CSS <link> tags and replaces them with one or more combined <link> tags at the location of the first CSS <link> tag.

Example

The example below shows the HTML before rewriting:

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

and after rewriting:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://1-ps.googleusercontent.com/h/www.pssdemos.com/styles/yellow.css+blue.css+big.css+bold.css.pagespeed.cc.xo4He3_gYf.css">
  </head>
  <body>
    <div class="blue yellow big bold">
      Hello, world!
    </div>
  </body>
</html>

Limitations

PSS streams HTML to users, and thus will only see some HTML content after other content has already been sent to users. Thus PSS may not be able to combine all CSS <link>s on a page into a single CSS file. In this case, multiple combinations are made.

This filter generates URLs that are essentially the concatenation of the URLs of all the CSS files being combined. The maximum URL size is generally limited to about 2k characters due to IE: See http://support.microsoft.com/kb/208427/EN-US. PSS limits URLs to 2048 characters total and 1024 per URL segment.

Limitations mentioned for the Proxy CSS rewriter are also applicable to this rewriter.