{"id":148969,"date":"2013-09-09T14:30:04","date_gmt":"2013-09-09T21:30:04","guid":{"rendered":"http:\/\/css-tricks.com\/?p=148969"},"modified":"2013-09-09T18:49:36","modified_gmt":"2013-09-10T01:49:36","slug":"parallels-personal-health-website-health","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/parallels-personal-health-website-health\/","title":{"rendered":"The Parallels Between Personal Health and Website Health"},"content":{"rendered":"

I recently spent a week<\/a> at Hilton Head Health<\/a>, a weight loss spa in South Carolina. Part of the experience was classroom learning about lots of different health related topics. While hearing all about those things, I couldn’t help but think about parallels between personal health and the health of websites. Mostly about web performance. Perhaps looking at these similarities is useful, as there is great value in taking care of both and sometimes a good ol’ analogy can trigger understanding and action.<\/p>\n

<\/p>\n

Nice joint.<\/figcaption><\/figure>\n

Losing weight is both very simple and very difficult<\/h3>\n

The one true way to lose weight is to burn more calories than you eat. This is very simple in concept. Yet, as most of us know, extremely difficult. There is also one true way to make websites load quickly, don’t put so much stuff on them that it makes them slow. That is a very simple concept but not so easy in practice.<\/p>\n

Throughout the day we are exposed to far more unhealthy eating choices as we are healthy eating choices. The unhealthy choices are typically easier, faster, and cheaper. <\/p>\n

You might face challenges like this in the organization around your website as well. Meetings where everyone has an opinion on what needs to go on the homepage. Business needs dictating what needs to go where. Analytics telling you giant images of woman wearing headsets convert better than text alone. While you might win a battle here and there, it is easy to lose ground in the war when it comes to “doing less” on a website.<\/p>\n

When losing weight, you might go on a diet. Literally a plan for what you can eat and how much. This guides your choices. The web equivalent might be a performance budget<\/a>. Perhaps something as simple as: on any given page you get X requests for X total size. Let that concept have power in the meetings about what goes where on the site.<\/p>\n

Exercise helps you lose weight too, right? It does, a little. But it’s not nearly as important as what you eat. As was told to us: “You can’t compete with what you eat.” The parallel to exercise here might be things like server upgrades. <\/p>\n

Exercise helps, but it’s not as important as diet. Better servers can help, but it’s not as important as proper front-end performance work.<\/figcaption><\/figure>\n

We need our website to be faster, so can’t we just upgrade our servers? Can’t our database guy just upgrade something? Those kind of things can help a little bit, but you “can’t compete” with what you serve. 80%<\/a> of web performance is front-end related, which has much more to do with your users computers and internet connections that it does with your servers.<\/p>\n

Mindless Eating \/ Mindless Creation<\/h3>\n

Part of what makes eating healthy difficult is that many of us don’t put much thought into it. We just do it. We don’t have much of a plan for it and we don’t even think about it as we are eating<\/em>. Not to mention we are heavily influenced by the circumstances. This book<\/a> is recommended reading on the subject.<\/p>\n

I suspect that most people who work on websites don’t pay too much mind to performance, either. They know that they shouldn’t use 2MB JPGs, but otherwise don’t really think about it. It makes some sense. Many web workers only have beginner level skills. You can’t overwhelm a beginner with too much information and it’s more important they know how HTML and CSS work than how HTTP requests work. Perhaps it’s unfortunate that beginners produce live websites, but I don’t think so. That’s part of the beauty of the web.<\/p>\n

Mindless creation is the parallel to mindless eating here. Just not thinking about what we are building, we’re just doing it. We’re just getting the job done. Users aren’t writing into support about the website being slow so there aren’t any tickets to address about it so nothing gets done about it. But of course something does need to be done about it. Performance is just one of those things you just know you have to do because it’s good for everything: engagement, conversion, general community karma…<\/p>\n

Perhaps you don’t want performance details to bog down an efficient workflow – or saddle overworked employees with a new set of concerns. That’s understandable, but there needs to be some kind of checks and balances for performance. Some kind of way for the organization to be mindful<\/em> about performance.<\/p>\n

Quantity & Frequency<\/h3>\n

Bob Wright at HHH has a story about hot dogs. He loves baseball and goes to at least a few games a year. Baseball games and hot dogs go hand in hand. It’s no mystery that hot dogs are not healthy, but Bob, typically a healthy eater, always gets one at the game. Is that a terribly disastrous choice for Bob? Nah. A couple of hot dogs isn’t going to make much of a difference in a healthy life. It’s not the hot dog, it’s the quantity and frequency of hot dogs. If you ate three hot dogs a day every day, that’s what is going to kill you.<\/p>\n


\nOne chili dog isn’t going to kill you. Three chili dogs a day might. One big JPG isn’t going to destroy your web performance, but nine might.
\n<\/figure>\n

Just like it’s not the hot dog, it’s not any individual resource on a website that is going to kill performance. It’s not jQuery, it’s loading 400k of JavaScript over 18 files. It’s not a 200k JPG, it’s a slider with 25 200k JPG’s.<\/p>\n

Minutia Bullhonkey<\/h3>\n

You’re not making that double cheeseburger in a teflon pan<\/strong>, are you?! Teflon is so bad for you!!<\/p>\n

This is a case of missing the forest for the trees. There is some evidence<\/a> Teflon may be bad, but it’s not super conclusive, hard to do (needs to get to 650°F), and probably not that big of a deal. The double cheeseburger however, is definitely terrible for you.<\/p>\n

What is going to kill you here ain’t the pan.<\/figcaption><\/figure>\n

This is like arguing about loading a JavaScript library when you haven’t optimized your images or sprited the ones together that can be.<\/p>\n

This is like arguing that ===<\/code> is faster than ==<\/code> or ++i<\/code> is faster than i++<\/code> while you aren’t serving the JavaScript as gzipped. <\/p>\n

While you could be technically correct that that little change would be faster, spending the time researching, debating, and making those changes could be spent on easier changes<\/a> that could increase performance by amounts of time orders of magnitude higher. <\/p>\n

Sometimes these little performance tweaks are called micro optimizations<\/em> which I feel is a good name for them. Best suited, perhaps, for creators of libraries, frameworks, and people who work on computationally intensive sites.<\/p>\n

There is a huge amount of bullhonkey in food packaging and advertising as well. Did you know that Trix are healthy now?<\/p>\n


\nWhole Grain?! Give me a second bowl!
\n<\/figure>\n

Fortunately the web industry is fairly honest in comparison. I don’t see web hosting companies advertising how much faster they are than each other all that often, a claim they almost certainly couldn’t keep as it’s too dependent on what you do with that hosting.<\/p>\n

Big and Getting Bigger<\/h3>\n

Perhaps you’ve seen this map charting the percentage of the population in the U.S. from 1985-2008 (just 23 years). <\/p>\n

<\/figure>\n

It goes from most U.S. states having less than 10% of people being obese to most states having over 25% and some over 30%. Pretty staggering growth! It continues as well, four years later in 2012 nation-wide they are saying<\/a> over 1\/3 (35.7%) of all U.S. adults are obese. It’s on track<\/a> to reach 44% by 2030.<\/p>\n

Here’s some more rather shocking numbers:<\/p>\n