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 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.
- The web server validates the HTTP request and assembles the appropriate headers and content to complete the response.
- 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:
- The customer makes a request to the restaurant for food.
- The restaurant confirms the request and assembles the appropriate items to complete the order.
- 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.
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.