CSS: fast to load, easy to maintain

Josh

Matt

By Matt Atterbury and Joshua Marantz, Pagespeed Automatic Team

Fast web pages are important, but so are maintainable ones. For example, CSS @import helps web designers modularize the implementation of their sites. The drawback to using @import is performance. Each @import is a new HTTP request, and every level of @import costs an additional serial round-trip between browser and server, since the browser does not know the URI of the imported CSS file until it downloads, parses, and executes the file that’s importing it. Here’s a waterfall diagram of a simple HTML page that uses @import to load a CSS file that includes a background image:

Web designers deserve the same benefits enjoyed by programmers, who get to use optimizing compilers and other tools to employ modularity without sacrificing performance. Driving toward this goal, we recently announced mod_pagespeed 0.10.21.2, which supports the new feature flatten_css_imports.

Using this feature, the same web page is automatically optimized by flattening the imported CSS files into their parent. This reduces the number of HTTP requests, and more importantly, the number of serial round trips. In this case, the small background image also got inlined into the combined CSS file, reducing the serial round-trip count by 2:

This feature is especially useful to WordPress users with child themes that override their parent theme (http://codex.wordpress.org/Child_Themes) because that feature uses @imports. But every web page and web user benefits from CSS that’s fast and well-structured, so if you’re an Apache administrator, download mod_pagespeed today and read more on our code site.


Matt Atterbury and Joshua Marantz are Software Engineers on Google’s Pagespeed Automatic team in Cambridge, MA, which is dedicated to making the web faster for everyone. When not coding, Matt is probably on his bike. Josh has been working on making software run fast for several decades, at Google and before that on accelerated chip simulation.

Posted by Scott Knaster, Editor