Book Review: Pro CSS for High Traffic Websites

by Doug 22. June 2011 21:22

 

 

Jeff Atwood (of StackOverflow.com fame) recently posted on his blog CodingHorror.com (http://www.codinghorror.com/blog/2011/06/performance-is-a-feature.html) 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.

 

 

 

 

The Earth Is Full

by Doug 13. June 2011 02:51

 

Found this article and don't have much to say about it other than it's quite a wakeup call. 

 

 Photo By Gideon Wright

 

The Earth Is Full

 

By THOMAS L. FRIEDMAN of the New York Times

 

You really do have to wonder whether a few years from now we’ll look back at the first decade of the 21st century — when food prices spiked, energy prices soared, world population surged, tornados plowed through cities, floods and droughts set records, populations were displaced and governments were threatened by the confluence of it all — and ask ourselves: What were we thinking? How did we not panic when the evidence was so obvious that we’d crossed some growth/climate/natural resource/population redlines all at once? 

 

 “The only answer can be denial,” argues Paul Gilding, the veteran Australian environmentalist-entrepreneur, who described this moment in a new book called “The Great Disruption: Why the Climate Crisis Will Bring On the End of Shopping and the Birth of a New World.” “When you are surrounded by something so big that requires you to change everything about the way you think and see the world, then denial is the natural response. But the longer we wait, the bigger the response required.” 

 

Gilding cites the work of the Global Footprint Network, an alliance of scientists, which calculates how many “planet Earths” we need to sustain our current growth rates. G.F.N. measures how much land and water area we need to produce the resources we consume and absorb our waste, using prevailing technology. On the whole, says G.F.N., we are currently growing at a rate that is using up the Earth’s resources far faster than they can be sustainably replenished, so we are eating into the future. Right now, global growth is using about 1.5 Earths. “Having only one planet makes this a rather significant problem,” says Gilding. 

 

This is not science fiction. This is what happens when our system of growth and the system of nature hit the wall at once. While in Yemen last year, I saw a tanker truck delivering water in the capital, Sana. Why? Because Sana could be the first big city in the world to run out of water, within a decade. That is what happens when one generation in one country lives at 150 percent of sustainable capacity. 

 

“If you cut down more trees than you grow, you run out of trees,” writes Gilding. “If you put additional nitrogen into a water system, you change the type and quantity of life that water can support. If you thicken the Earth’s CO2 blanket, the Earth gets warmer. If you do all these and many more things at once, you change the way the whole system of planet Earth behaves, with social, economic, and life support impacts. This is not speculation; this is high school science.” 

 

It is also current affairs. “In China’s thousands of years of civilization, the conflict between humankind and nature has never been as serious as it is today,” China’s environment minister, Zhou Shengxian, said recently. “The depletion, deterioration and exhaustion of resources and the worsening ecological environment have become bottlenecks and grave impediments to the nation’s economic and social development.” What China’s minister is telling us, says Gilding, is that “the Earth is full. We are now using so many resources and putting out so much waste into the Earth that we have reached some kind of limit, given current technologies. The economy is going to have to get smaller in terms of physical impact.” 

 

We will not change systems, though, without a crisis. But don’t worry, we’re getting there. 

 

We’re currently caught in two loops: One is that more population growth and more global warming together are pushing up food prices; rising food prices cause political instability in the Middle East, which leads to higher oil prices, which leads to higher food prices, which leads to more instability. At the same time, improved productivity means fewer people are needed in every factory to produce more stuff. So if we want to have more jobs, we need more factories. More factories making more stuff make more global warming, and that is where the two loops meet. 

 

But Gilding is actually an eco-optimist. As the impact of the imminent Great Disruption hits us, he says, “our response will be proportionally dramatic, mobilizing as we do in war. We will change at a scale and speed we can barely imagine today, completely transforming our economy, including our energy and transport industries, in just a few short decades.” 

 

We will realize, he predicts, that the consumer-driven growth model is broken and we have to move to a more happiness-driven growth model, based on people working less and owning less. “How many people,” Gilding asks, “lie on their death bed and say, ‘I wish I had worked harder or built more shareholder value,’ and how many say, ‘I wish I had gone to more ballgames, read more books to my kids, taken more walks?’ To do that, you need a growth model based on giving people more time to enjoy life, but with less stuff.” 

 

Sounds utopian? Gilding insists he is a realist. 

 

“We are heading for a crisis-driven choice,” he says. “We either allow collapse to overtake us or develop a new sustainable economic model. We will choose the latter. We may be slow, but we’re not stupid.” 

 

 

 

 

Not a Garage

by Doug 12. June 2011 20:06

 

 

While the job search continues, I've taken the opportunity to finish a few more projects around the house.  This time, the garage gets all the attention. The term "garage" just doesn't feel right these days.  It hasn't been able to hold a car for decades.  I've updated and divided the inside to include a laundry room, shop, overhead storage and large office with two comfy workstations for Virginia and I.  New flooring, electric and plumbing.  Garage? I don't think so. But what would you call it?  It's the "free standing detached shop, laundry and office building with a garage door".   Hmm, now that's certainly elegant. 

 

Anyway - I rented a paint sprayer and blasted it with primer and two top coats.  Using one of these machines is a new experience for me.  A fire hose of paint, it tends to get a little messy if your not careful. But the final application looks much better than a roller. After the paint,  the real objective was to begin a covered porch off the office entrance.  See the pictures for the progress:

 

 

 

 

 

 

 

Miscellaneous final thoughts:

 

I thought I'd share this nice clip I stumbled upon while trolling through YouTube.  Susan Tedeschi (from Boston) does an excellent cover of "Angel From Montgomery" while performing on Austin City Limits.  Many make the mistake of attributing the song to Bonnie Raitt (who made the tune famous),but in actuality it was written by folksinger/songwriter John Prine.  Also discoverd that she's married to Derek Trucks (nephew of Allman Brothers drummer Butch Trucks) since 2001.  Where have I been?

 

Regardless, something about this version just knocks me down - a combination of the tender delivery and lyrics.  Just beautiful, don't you think?

 

 

 

Doug's Latest Tweets

Doug Who?

Hey, Doug here.  Thanks for visiting "A Doug's Life". 

 

I enjoy packaging my thoughts, pictures, video clips and other fragments into what hopefully makes up some interesting stuff to share.  

 

I've checked the list that gives you a better idea about me!

 

Love Web Technology
Sunday is for Pro Football
Hike or bike on trail most mornings
Halloween Rocks!
Chase the latest electronic gadgets
Married
(Happily Married)
Drama
Simplicity

 

My wife and I live in the shadow of Mt Lukens on the edge of the Angeles National Forest:

 

Tujunga, CA

More Stuff