Understanding Web Performance (and How to Explain It): The Bartender Analogy

For technologists, wrapping our heads around how a website loads, and what makes it “fast,” can be a complicated process. There are a lot of variables to consider and figuring out how to improve the speed of your site takes time. However, the more challenging task is explaining the mechanics of page speed to a non-technical crowd. In my case, I had to explain why our site (www.seattletimes.com) was slower than we wanted it to be. Internally, we had a lot of confusion over how to measure and track the speed of our site and how to improve it. To get all of us on the same page, I used how a bartender makes a drink to explain how a website loads. By breaking down a bartender’s actions and mapping those to how a browser processes HTML, CSS, and JavaScript, you can not only get a better understanding of web performance, but also have a way to explain your website’s speed to less technical folks.

How a drink gets made

"Canon Cocktail - Raising the Bar with Jamie Boudreau," Small Screen,  https://youtu.be/m378-fhzlIA

If we watch this video and break down what Mr. Boudreau does, we get a number of steps.

  1. Hear The Order
  2. Set Up a Mixing Glass
  3. Measure Whiskey
  4. Pour Whiskey
  5. Measure Vermouth
  6. Measure Amaro
  7. Pour Combo into Mixing Glass
  8. Add Ice
  9. Stir
  10. Pour into Serving Glass
  11. Add Foam
  12. Add Bitters
  13.  Serve

The Waterfall

Once we know what steps are involved in how a drink is made, we can represent them in a “waterfall” and see how steps play out over time. 

drink-waterfall.jpg

The waterfall will immediately show us several things:

Some actions might be nested (Adding spirits is made up of other actions)

Some things might together or at the same time (Two spirits are added at the same time)

Some actions might block others (You can’t stir the drink until you add the ice)


Adding Milestones

Tracking the individual ingredients is a great step at monitoring how the drink is made, but what if we wanted to compare this waterfall to the waterfall of other drinks? We need to find a way to standardize our measurements even if the bartender does different things with different ingredients.

To track this process, we can use milestones. 

drink-milestones.jpg
  • Drink Started: Gives patron feedback that order is started
  • Spirits Complete: Are the bottles easy to find?
  • Drink Index: Bartender says you could technically drink it
  • Drink Complete: Bartender's job is done
  • Drink Delivered: Is the drink hard to deliver to a table?

Once we have all this mapped out, what does it tell us? The more ingredients you have, in both number and volume, the longer it takes to finish.

How does this relate to web performance?

The standard way to represent how a website loads is with a waterfall. Here is an example of a waterfall generated by www.webpagetest.org.

partial-waterfall

We have different ingredients (JavaScript, CSS, Images, and other resources) and they take different amounts of time to download and combine together on the page. We also have a number of milestones that we can choose to standardize our measurements such as Start Render Time (the time it takes for your browser to change from a white screen to showing something from your site). While there are a number of ways to make this more complicated, at a high level, front-end performance optimization is about figuring out your ingredients, seeing what you can cut, and investigating if there are ways to speed up how they get added to your page. In general, the more ingredients you have, and the more complicated they are to load (such as third-party scripts that refuse to be loaded asynchronously), and the slower a page will be.