Velocity: Top 5 Mistakes of Massive CSS
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 | |
| Chrome Fast. | Mike Belshe |
Jan Lehnardt | 04-Jul-10 at 4:14 am | Permalink |
The “Slides†link links the video. :)
Stephane | 04-Jul-10 at 7:07 am | Permalink |
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?
Steve Souders | 04-Jul-10 at 1:42 pm | Permalink |
@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).