HTTP requests and fast food drive-throughs have a lot in common: learn how 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. But currently, 50 million computer servers contribute nearly 5% of the earth’s greenhouse gases. Improving your website’s performance by reducing the number of HTTP requests made on a page is an important way of making your website more sustainable. This is an essential component of sustainable web design.

Sites render so quickly that it is 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.

Web servers can respond to several requests at the same time. Once all of the web server’s 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, that affects the load time of the page.

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 there are more requests than can be handled, a queue of requests forms and everyone has to wait. If someone ahead of you in the queue is ordering food for 10 people, you’re going to wait longer for your small coffee.

As a web developer, there are some very simple things that you can do for your site to keep the number and size of your HTTP requests down and improve the speed at which your visitors can load your website.

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, there are some alternative image delivery methods that can help you lower your HTTP request overhead. You can use the Scalable Vector Graphics (SVG) format to display vector images, which has the added benefit of automatically scaling up on high-resolution displays. In addition, background images can be encoded and embedded as text into your CSS file.

Reducing the number of HTTP requests is one of the most significant methods of improving your 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.

How sustainable is your website? Have Ecograder give you the answer.