Jeff Atwood (of StackOverflow.com fame) recently posted on his blog CodingHorror.com ([...]) that when it comes to high performance websites, speed is a competitive advantage - a feature if you will. Getting your site to perform under the strain of high traffic is difficult at best, but there is evidence that speed (or lack there of) affects the bottom line ($$). Among other very interesting aspects in his post, Jeff writes:
"In A/B tests, [Amazon] tried delaying the page in increments of 100 milliseconds and found that even very small delays would result in substantial and costly drops in revenue."
Talk about performance in the granular. But he's absolutely spot on in his case for "the need for speed".
There are many factors to keeping a high traffic web site fast. Beefed up hardware. Content Delivery Networks. Optimized code and database queries. But don't forget your CSS files. If you thought you've tweaked everything but you're still wondering about how to trim the load time of your home page, optimizing your CSS might be the very thing you're missing.
Enter "Pro CSS for High Traffic Websites" by Anthony Kennedy and Inayaili de Leon to the rescue. Published by Apress, this book delves deep (very very deep) into keeping your CSS robust, small and efficient.
You'll learn about devices that consume your site, testing and debugging, dynamic CSS and many others - but before it gets to actual CSS related topics, it starts with a chapter named "The Value of Process". This outlines best practices to organize your development staff in a practical hierarchy, defines the typical job types such as Project Manager, Team Lead and Developer, introduces some tools that can help when the projects and staff grow as well as some additional project management philosophies.
It makes sense to include this chapter, because when dealing with a high traffic website (upward of 10,000 unique visitors a day - a definition suggested by the authors ), you're probably working for a larger company with considerable bureaucracy which can make changes to your website a slow process. Using the management tools and strategies suggested can help productivity and streamline the process. This chapter covers topics above and beyond CSS that can be used by all types of developers and managers.
This chapter also is indicative of how the rest of this books info is presented. Authors Kennedy and Leon skip any CSS retrospect or refreshers to get you up to speed with advanced CSS topics before plunging in head first. I wouldn't give this book high marks for ease of readability. There's a certain density that weights it down somewhat. However with that one complaint out of the way, I must emphasize that these two really know their stuff and award it high marks for content.
I'm not sure where you'd find a more comprehensive look at CSS and its effect on site performance. Nothing goes without thorough examination. Folder names and file paths for example. You're probably used to linking to your images like so:
/images/mainContentPage/background_homepage.jpeg
What could be so wrong with that? Wow, you're just asking for a performance hit with such verbose folder names - that's what. There's a "scale of negative performance magnification" (OK, I just made that up) that goes with each bit that isn't optimized when asking your pages to load at lightning speed under the strain of high traffic and a busy web server. What to do in this case?
Shorten your images folder to "i".
Shorten your mainContentPage folder to "main".
Abbrieviate your image file names. "background_homepeage.jpeg" should become "bg_home.jpg" - and compress those images appropriately while your at it.
/images/mainContentPage/background_homepage.jpeg now becomes becomes
/i/main/bg_home.jpg.
You've just shaved 29 chars, a 40% reduction in size. Now you get the picture.
This is just one simple example of the world of CSS efficiency that's explored. You'll also get thorough enlightenment on CSS Frameworks such as Blueprint, 960 and YUI. And Object Oriented CSS. Building flexible CSS to accept site expansion. Don't forget Accessibility too. Your high traffic site is probably visited by many impaired visitors and consumed by special devices such as braille printers. What? You've never taken precautions to make sure your site is properly printable for the blind? Yeah. Neither have I. Like I mentioned, this book is scarily comprehensive.
What will appeal to most developers though, will come in chapters 8 and 10. Chapter 8 deals with the meat of the matter: Performance. Get ready to redo your naming conventions, start minifying, get concatenating, setting up compression on your web server, examining delays during DNS look ups and the advantages of using a CDN (Content Delivery Network). Oh, and don't forget caching content, dealing with animation and proper use of JavaScript.
Chapter 10 deals with Testing and Debugging. Here is a treasure trove of advice that developers will find useful. Automated testing. Manual testing. Debugging processes and suggested tools to use. Getting on track with efficient and fast CSS development. Oh and how about that dreaded Internet Explorer version 6 that we all curse during development? Not only in this chapter but throughout the book, there are many examples of how to overcome IE bugs.
We developers usually have many books at hand to refer to. This one may get more dog eared than others on your shelf depending on what sort of developer you are. Myself, being a C# middle-tier type of coder, CSS isn't foremost in my typical day at the office. This is why my CSS horizon has been blasted wide open during this read - and why I'm glad it'll be at hand as a core CSS reference for me.
