Grow your CSS skills. Land your dream job.

The Parallels Between Personal Health and Website Health

Published by Chris Coyier

I recently spent a week at Hilton Head Health, 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.


Nice joint.

Losing weight is both very simple and very difficult

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.

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.

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.

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. 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.

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.


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.

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% 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.

Mindless Eating / Mindless Creation

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. Not to mention we are heavily influenced by the circumstances. This book is recommended reading on the subject.

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.

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...

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 about performance.

Quantity & Frequency

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.


One 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.

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.

Minutia Bullhonkey

You're not making that double cheeseburger in a teflon pan, are you?! Teflon is so bad for you!!

This is a case of missing the forest for the trees. There is some evidence 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.


What is going to kill you here ain't the pan.

This is like arguing about loading a JavaScript library when you haven't optimized your images or sprited the ones together that can be.

This is like arguing that === is faster than == or ++i is faster than i++ while you aren't serving the JavaScript as gzipped.

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 that could increase performance by amounts of time orders of magnitude higher.

Sometimes these little performance tweaks are called micro optimizations 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.

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


Whole Grain?! Give me a second bowl!

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.

Big and Getting Bigger

Perhaps you've seen this map charting the percentage of the population in the U.S. from 1985-2008 (just 23 years).

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 over 1/3 (35.7%) of all U.S. adults are obese. It's on track to reach 44% by 2030.

Here's some more rather shocking numbers:

  • Annual medical costs are $1,429 higher for obese adults.
  • More than two-thirds (68.8 percent) of adults are considered to be overweight or obese.
  • 77% of adults eat less than 5 servings of fruits and vegetables a day.
  • Globally, there are more than 1 billion overweight adults.

I bet you can see where this is going.

Websites are getting bigger and bigger too. That may be no surprise itself, but you may be surprised that the rate of growth is far higher than even these weight-related numbers. Tammy Everts has a great run-down of how this has been going.

Numbers from the HTTP Archive show that from November 2010 to May 2013, the average total website size nearly doubled. And during that time, the rate of growth more than doubled. If that trend continues, the current average website size of 1.34MB will be more like 2.68MB in a year.

To be fair, despite that growth, there is evidence that web page loading times have actually gotten better. This is from Google which collects the data and also provides very fast and very slow internet options, so take that as you will. Also note the metric here was "page load time" in which optimizations to the browser itself play a big role. There is a hard limit to that though, as the browser ultimately needs the resources to do anything.

Internet speed is clearly a major factor here. If internet speed doubles along with the doubling of website girth, we'd probably be OK, but light research suggests year over year growth of closer to 50%.

And that is just averages. Decisions can't be all based off averages. A 2.68MB website is simply unacceptable to a lot of users with slow internet speeds or that pay by the kilobyte. Faster loading websites will always be important and smaller total size will always help that.

Some Things Are Just Bad, Period.

One small public health victory is trans fats. Everybody knows what they are and everybody knows they are bad. Even companies that basically make junk food have taken steps to remove them from the food they produce. Trans fats are just bad, period. You should eat zero of them.

There are some performance related things that are also just bad, period. Not gzipping HTML and text resources is just bad. Not optimizing images is just bad. Not concatenating resources when you can is just bad. Not utilizing simple caching solutions, both front end and back, is bad.

Unwise || Better || Best

Even trained dietitians have a hard time gauging the nutrition of food at restaurants. It's just too hard to know by just looking at the menu (or even the prepared dish). How are us regular folks supposed to make smart decisions at restaurants? You may not be able to guess the calories, saturated fats, and sodium content of one particular dish, but you could probably guess correctly which of two dishes is more healthy. Is a grilled chicken salad better than a steak sandwich? Yep.

In that scenario, the steak sandwich is an unwise choice. If you saw a grilled chicken sandwich on the menu, that might be a better choice. The grilled chicken salad might be the best choice. Fairly obvious, but thinking of it that way can help you make decisions.

While doing day-to-day tasks on the web, we might be able to apply that same thinking. Say you need to add a new illustration to a page on your site. It is provided to you as a 2MB JPG. That would be unwise to just plop on the page. Can you resize it down? Can you optimize it? Those would be wise choices. Does it look like it could be an SVG? Is it a flat color? Could it be integrated into a @font-face font you are already using? Could you use a responsive images solution? Those would be the best solutions, if possible.

You don't always have to make the best decisions. We all know it's too hard to live a perfect life. But if you can lean toward making better decisions by just making simple comparisons and edging toward the wise, you'll be better off.

Are there more connections?

I bet ya'll can come up with more fun personal health - website health connections. What would represent bad cholesterol and good cholesterol? Is there an equivalent to a fad diet?

Also just for fun, I recently re-created the Nutrition Facts label in HTML and CSS. Then I forked that and made a tongue-in-cheek Performance Facts version:

See the Pen Performance Facts by Chris Coyier (@chriscoyier) on CodePen

Just for fun of course, but perhaps this kind of thing can get you thinking about web performance for your site and getting started with a performance budget.

Comments

  1. Jesse
    Permalink to comment#

    Fun article, Chris! I think it’s great you’ve found ways to connect and understand these topics via a similar perspective. What’s more, you did a good job of outlining the parallels. You’re clearly an ‘active thinker’ (which was apparent before anyway).

    The only thing I’d change is the double cheeseburger hatin’, so long as it’s grass-fed (pasture raised), bunless and topped with some veggies. But that’s just me. ;)

    • Or… changing to a single-cheeseburger.

      As someone who lives within minutes of the US border, I can say that there is a noticeable shift in both portion size and seasoning below the 49th parallel. foodstuffs are bigger, restaurants add more flavoring. Once you oversaturate your tastebuds, it can take a year of eating so-called “bland” food to appreciate the nuanced tastes of different fruits and veggies!

      I think that’s what we’re doing on the web. People felt uncomfortable with JUST content. Stakeholders feel ripped off when they see lots of white space. Sites like thegreatdiscontent do a fantastic job of just letting content shine. When we read books we are engaged in the content. I hope this trend of letting the content shine keeps up.

    • You could probably do a whole article on different types of cheeseburgers and different types of websites!

    • Yes there is definitely a connect here Jesse I agree. I recently went to the web design conference in Dubai in the United Arab Emirates that shows just this and they called this ‘website fatigue’.

      Although they said with people using mobiles and tablets it should make them more ‘active’…. I am not sure if they meant this with people walk and surfing, etc.

      But great post none the less.

  2. Great article, Chris. I loves me some thought-provoking analogies!

    On a slightly related topic, I often find myself relating the profession of Graphic/Web Design to that of a chef, kitchen, or cook in general. (i.e. fewer ingredients -> less is more/flat design, too many cooks in the kitchen -> design by committee, and others that I’m blanking on right now).

  3. Very interesting view. In my working environment however, we have to deploy a lot of sites as fast as possible and as cheap as possible. Usually there’s no room for optimizations. When there is, our customers don’t see the use of optimizations. After all, the site works, right?

    Personally I’m almost obsessed with performance (I’m the == or === type of guy). On server-side languages, where you often perform a lot of tasks (database calls, parsing files, etc), performance is a big issue as well. At work we mostly use WordPress for our sites that, like many other CMS perform a lot of background tasks you don’t always need and require tons of resources. Sometimes, you just have to deal with what you have.

    Either way, I will try to implement/smuggle optimizations in my workflow. We should deal with fatties (no offence). Now I just have to find a way to avoid getting overweight myself. I’m getting hungry as I speak. Better grab crisps fruit.

  4. Great article, I was a big fan of “Let’s Do Simple Stuff to Make Our Websites Faster” and started implementing those practices and trying to maintain them on the websites I make.

    The one true way to lose weight is to burn more calories than you eat.

    I’ve recently been reading “Why we get fat and what to do about it” and apparenlty this “Common sense” knowledge may be one of the contributing factors to why we are becoming more and more overweight. It seems the “calories in and calories out” explanation is probably too simplified and that WHAT we eat matters much more than how much we eat.

    Just thought I’d share that as you seem to be on the same quest that I am to find a healthier, more sustainable lifestyle.

    • Totally agree. It’s a very western attitude to think food === energy (calories).

      In many parts of Asia, they view it like this food ~= health.

      As food is viewed (in general) as contributing to (and sustaining) your health, care is taken to what properties a food has beyond its calories. Once you treat food like energy and not the biological information that it is, your mindset is focused on only one small aspect.

      The body is an extremely complex set of hundreds of different biological systems capable of working and communicating and repairing itself all in sync. Even the ability to clot blood (and stop clotting) is a staggeringly complex cascade of interdependent processes.

      Websites are similar, albeit infinitely less complex… but web workers have to educate the content managers of the world to keep the site in good shape.

  5. This is a perfect comparison. Great article!

  6. CatnCream
    Permalink to comment#

    I hate to be that guy but this article flies a bit in the face of your recent article where you push the use of Jquery In cases where Vanilla Js would do just fine. Sorry.

    • Where do I fly in the face of that? I totally get the “why use jQuery when literally the only thing you do is hide and show something” or however that argument goes. But I’ve long rolled my eyes at it. Production websites are never that simple and demo sites don’t matter, so yep, use jQuery.

      In fact in this article I literally write:

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

      In which I essentially say go ahead and use a JS library, there are bigger fish to fry.

    • Permalink to comment#

      Loved the article Chris, it’s an elegant and relevant analogy.

      Cat, I’m confused, how does the use of jQuery vs. vanilla JS relate? Chris seems to be advocating for simplicity over complexity here.

      Chris, as a side note, the 7 min workout workout published by the New York Times has been an amazing way for me to stay in lean while working from home.

  7. morhys
    Permalink to comment#

    A calorie is not a calorie you can eat 3000 cal of doughnuts and 3000 cal of bananas what’s going to make you fat?

    Watch fat sick and nearly dead. To many opinions not enough facts I say.

  8. Lots of good tips/reminders sprinkled in here like little pieces of kale ;)

    The nutrition panel is so funny, it would be a great bookmarklet/extension. Like YSlow.

  9. Permalink to comment#

    Hey Chris,

    Congrats on taking steps to get healthier. This is a perfect example of optimizing at the correct level. Sure, you could have spent the last week optimizing css-tricks instead of taking care of yourself, but that would have a much worse return on investment. Being healthier can add years to your life, refactoring code to remove a javascript library, not so much.

    Stay mindful.

    • Thank you! That’s a good point about how being personally healthier has a better return on investment – you can use that extra life time to fix more websites later :).

  10. Beautifully written article!

    Read this with my wife and we loved it! The header about eating healthy/losing weight is very simple and very hard is so true. I hope that your week in South Carolina was enjoyable & life-changing.

    Sidenote: My wife loves reading about good health and healthy eating and wanted to share a fun shirt she saw on Facebook.

    Link to Naked Food Magazine Fun shirt on Facebook

    All the best!

  11. Jake
    Permalink to comment#

    This is something I’ve been noticing lately. For the longest time, it was heavily pounded into the heads of web developers that everything needed to be optimized, and that sites should be built for the slowest levels of performance within the target audience.

    Within the last couple years, it’s like a switch got flipped. None of this mattered anymore. I don’t know whether the onset of 4G caused it, or if a new set of students graduated with a focus in graphic design and fast connections to test on, but somehow all of the sites are now filled with massive images and boatloads of fancy JavaScript that will only perform well for a small part of the Internet’s population. Even little things — like loading JavaScript first and using embedded fonts that make the text appear after everything else — are enough to drive one crazy.

  12. I know the mod filter will put this comment up for review. But I gotta say it.

    This is why I fucking love this site. Nice to have human expression of otherwise robotic computions.

  13. Chris
    Permalink to comment#

    Not trying to nitpick, but while diet is FAR more important for losing weight, exercise is absolutely essential to overall muscle/organ/tendon/cardiovascular/etc health. Metaphor was very effective though; good article :)

  14. Mags
    Permalink to comment#

    Chris,

    Thanks for sharing! Since I am a newbie at web design, I won’t comment on that part of this analogy (other than to say, I am listening and learning…), however I will comment on the diet/food/exercise/life choices as I have plenty of experience there (who doesn’t?).

    IMO exercise is as equally important as diet. If you can find an activity or sport that you love to do then partaking in that can be life-changing.

    Most of us sit way too long at a desk or in front of some sort of screen, not moving our bodies very much most of the day. This is not good, duh..

    For me there is nothing like getting on my bike (bicycle) to meet a bunch of friends for 20-50-100 mile rides (trust me you can work up to it), or just bike-commuting to/from work. You burn calories. You will love how your body responds to hard efforts. You sleep better (because you are physically tired). You naturally will tend to eat healthy to fuel your body properly. AND, you can reward yourself with cheeseburgers & beer, ice cream and cookies on occasion without guilt and without packing on Lbs.

    If not bicycling then maybe hiking, soccer, ultimate Frisbee or running???? Maybe try ‘em out, see what you like and meet a lot of cool people who are into the same.

    Good luck, brother.

    MC (previous bad eater, overweight smoker & sedentary)

  15. Harry
    Permalink to comment#

    I wonder what is the “other” category that is catching up to scripts in the increasing page weight graphic. I can only imagine Webfonts.

  16. jurotek
    Permalink to comment#

    While hearing all about those things, I couldn’t help but think about parallels between personal health and the health of websites.

    Very interesting and true. What I think it comes down to is simplicity, which is so darn difficult to achieve in our personal lives or in things we create. To get there, start simplifying by removing unnecessary, so the necessary can speak and strive.

  17. Sepp
    Permalink to comment#

    Funny article. But you know when you go to a Health training and always end up seeking parallels between Health and webdesign, thats a bit … lets say too focused.

    In Switzerland we call this «Deformation Professionelle»

  18. LawrenceP
    Permalink to comment#

    You Hit it Spot on!, very interesting comparison.

  19. John
    Permalink to comment#

    Glad you are doing something about your weight Chris. I had the chance to meet you this year; next you should work in how incredibly rude you are. Look yourself in the mirrow before talking down to people.

  20. Marijke
    Permalink to comment#

    This article reminded me about a website called Browser Diet, which shares a bunch of optimization tips.

    I always use the HeadJS loader for parallel loading of scripts (so when using a front-end framework, I’m totally guilty of loading 6–12 different .js-files) which I think works nicely. I will try some benchmarks for my next project and see how I can improve more. Nice post Chris!

  21. Frank Black
    Permalink to comment#

    America is in complete decline. The end of it all is coming. Worship of your gladiators and big mac. You earthlings have always been on a course for self destruction. Do gooders, feel gooders. From hell this civilization came and to hell it shall return. There is only darkness, eternal and empty. Souls cry out for change but it dies out in the deafening din of the herd. Bahh Baah sheep, remember the 12. The Blood God has been invoked. Let the torment begin.

  22. Mariam Massadeh
    Permalink to comment#

    Really smart; I felt that I’m listening directly to you Chris, it seems as a conversation :) .

    Thank you for your notes, always you guide me to the correct way in everything you share.

  23. Cary Hartline
    Permalink to comment#

    This is why we have compass, ucss, and many others to help us cut down our websites as much as possible. I have always focused on making very light websites, but using all the optimizations available is just incredibly difficult. This is especially true for Javascript which has an endless number of tricks and weird things that can cut down the code(and usually make less readable), but most people don’t know those things so they only use them after reading about tricks on CSS Tricks.

    Although the best thing to do is to start off with a clean template without any of those libraries. The fact that people think including jQuery(not important) and Modernizr(a little important) as a basic html5 template shows that we have a serious problem nowadays with this.

  24. Kevin McAlear
    Permalink to comment#

    I love this post. I can completely relate to both topics. I have changed weight too many times and have build lots of healthy and unhealthy websites. I am currently getting back in shape from blowing out my knee and having wrist surgery from destroying it and I am always getting better and not being a web douche! :)

  25. Ramesh Chowdarapally
    Permalink to comment#

    Chris you are always comes up with different thoughts and great things. we love this info.

  26. Noel
    Permalink to comment#

    Also would like to add that a faster metabolism is one of the fastest ways to lose weight. That’s why exercises is an important piece of it, because the more muscle a person has the faster their metabolism. The faster their metabolism the more calories they burn.

    Maybe a metabolism can analogous with connection speed? The faster the better

  27. Permalink to comment#

    Haha, this is such a great article! Didn’t know that three hot dogs a day every day is going to kill me.

  28. João Carmona
    Permalink to comment#

    I really liked the idea and examples used.
    And I really liked the Nutrition facts for HTML/CSS.
    I’ts my time to have fun with it :)

  29. I love this post. Thank you very much..

  30. Luke
    Permalink to comment#

    I love the nutrition panel graphic. I may have to…[clears throat]…borrow it…to explain some things to people.

  31. Hans Kuijpers
    Permalink to comment#

    Nice blog Chris. I like the metafor of you’re health trip and the health of websites. This will help a lot of developers convincing the content editorswhy optimization is important. Thx

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".