Velocity: Top 5 Mistakes of Massive CSS

July 3, 2010 12:22 pm | 3 Comments

Nicole Sullivan and Stoyan Stefanov had the #3 highest rated session at Velocity – The Top 5 Mistakes of Massive CSS. Nicole (aka, “stubbornella”) wrote a blog post summarizing their work. The motivator for paying attention to CSS are these stats that show how bad things are across the Alexa Top 1000:

  • 42% don’t GZIP CSS
  • 44% have more than 2 CSS external files
  • 56% serve CSS with cookies
  • 62% don’t minify
  • 21% have greater than 100K of CSS

Many of these problems are measured by YSlow and Page Speed, but the solutions still aren’t widely adopted. Nicole goes on to highlight more best practices for reducing the impact of CSS including minimizing float and using a reset stylesheet.

Checkout the slides and video of Nicole and Stoyan’s talk to learn how to avoid having CSS block your page from rendering.

Choose Your Own Adventure Adam Jacob Opscode
TCP and the Lower Bound of Web Performance John Rauser Amazon
The Top 5 Mistakes of Massive CSS Nicole Sullivan Consultant
Building Performance Into the New Yahoo! Homepage Nicholas Zakas Yahoo!
Hidden Scalability Gotchas in Memcached and Friends Neil Gunther Performance Dynamics Company
Internet Explorer 9 Jason Weber Microsoft
Creating Cultural Change John Rauser Amazon
Scalable Internet Architectures Theo Schlossnagle OmniTI
Ignite Velocity Andrew Shafer Cloudscaling
The Upside of Downtime: How to Turn a Disaster Into an Opportunity Lenny Rachitsky Webmetrics/Neustar
Metrics 101: What to Measure on Your Website Sean Power Watching Websites
The 90-Minute Optimization Life Cycle: Fast by Default Before Our Eyes? Joshua Bixby Strangeloop Networks
Progressive Enhancement: Tools and Techniques Anne Sullivan Google
Chrome Fast. Mike Belshe Google

3 Responses to Velocity: Top 5 Mistakes of Massive CSS

  1. The “Slides” link links the video. :)

  2. Isn’t the CSS file is in the critical path for page loading? Putting it on a cookieless server forces another DNS lookup. Shouldn’t we treat it like an early loaded javascript and put it on the same server, even if that implies serving it with a cookie?

  3. @Jan: I fixed the “slides” link. Thanks!

    @Stephanie: Stylesheets aren’t as bad as external scripts. Scripts block other downloads (in many browsers) and also block rendering. Stylesheets only block rendering. Either way, it’s probably a little faster to avoid the DNS lookup even if you pay the price of cookies, but it depends on how big the cookies are. I would reserve the same domain for scripts, and shard stylesheets on a separate domain. It’s also more important to keep scripts on the same domain for XHR (so you don’t bump into the cross-site security restrictions).