What Fast Food Drive-Throughs Can Teach Us About Making Fast Websites

HTTP requests and fast food drive-throughs have a lot in common. Learn to avoid long queues and improve your website’s performance.

In an age of near-ubiquitous high-speed internet in developed countries, loading a website can seem like a trivial matter. However, the web’s environmental impact is significant and much of this comes from data centers. Improving your website’s performance by reducing HTTP requests is an important way to make your website more sustainable. This is an essential component of sustainable web design.

On a fast connection, most websites render quickly, almost instantaneously in many cases. This makes it easy to forget that for every image, video, CSS file, or Javascript file the page loads, your browser and server perform the following sequence of tasks:

1. Your browser makes an HTTP request to a web server for digital assets such as images, CSS files, Javascript, etc.
2. The web server validates the HTTP request and assembles the appropriate headers and content to complete the response.
3. The web server responds to the browser’s HTTP request.

Reducing Server Requests

Web servers can respond to several requests at the same time. Once all available HTTP request handlers are occupied processing requests, subsequent requests are queued up behind them and served in the order in which they were placed. If a web page loads so many assets that the server has to queue some of them, this affects page load time.

It’s hard not to see this same paradigm at work at your favorite fast food restaurant’s drive-through window:

1. The customer makes a request to the restaurant for food.
2. The restaurant confirms the request and assembles the appropriate items to complete the order.
3. The restaurant passes the completed order to the customer.

The same problem that plagues web pages that make a lot of requests is problematic for drive-through restaurants as well. If too many requests queue up, everyone has to wait. If someone ahead of you in the queue is ordering food for ten people, you’re going to wait longer for your small coffee.

Here are some very simple things that you can do to keep the number and size of HTTP requests down. Also, this will improve site speed. Faster-loading websites make for happier customers.

Order a Value Meal, Not the Individual Menu Items: Use CSS Sprites

Why would you order fries, a drink and a burger as individual items when they come as a package deal? CSS Sprites are the value meal of the CSS world. CSS sprites work by aggregating all your background images into a single image, then using background image positioning to display the appropriate background image for that element.

This will reduce all your requests for background images into a single request. For more information, see our blog post “How CSS Sprites Improve Speed And Sustainability“. When you’re ready to use CSS sprites on your site, SpriteMe.org will automatically generate a sprite image from your existing website.

Get Your Order Together First: Aggregate and Minify

Have you ever gone through the drive-through with a group of friends who aren’t quite sure what they want yet? One person wants no pickles. Another person wants to know if you can substitute a pie for french fries. Someone else wants to beg the restaurant to make a seasonal item that is no longer available. You end up relaying a series of questions and orders between your friends and the order taker, and chaos and confusion ensue.

Wouldn’t it be great if you had your order figured out before you got to the window? This is the basic principle behind aggregating and minifying your Javascript and CSS files. If your page includes multiple CSS or Javascript files, you can reduce the number and size of your requests by aggregating them into one single CSS or Javascript file.

The size of the combined files can be further reduced by eliminating the syntactically irrelevant portions of the file (such as spaces, line returns and comments). This process is called “minifying”. For more information on this topic, see our blog post “To Munge or Minify? That is the Question.” Mike Horn has graciously provided the world an online tool to aggregate and minify your Javascript and CSS.

Get Your Food Delivered: Alternative Methods For Displaying Images

If your culinary playbook doesn’t include quick take out, delivery is another option. Similarly, alternative image delivery methods can help you lower HTTP request overhead. Use Scalable Vector Graphics (SVG) format to display vector images, which has the added benefit of automatically scaling up on high-resolution displays. In addition, SVG files can be encoded and embedded as text into your CSS file.

Reducing the number of HTTP requests is a viable way to reduce page load time. After all, if your site visitors have to wait in the drive-through queue, they may just pull away and go to a different restaurant.