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
