1. Technology

Minimize HTTP Requests to Speed Up Page Load Times

Reduce the Number of Components on Your Pages

By

HTTP Requests are How Browsers Ask to View Your Pages

When your web page loads in a browser, the browser sends an HTTP request to the web server for the page in the URL. Then, as the HTML is delivered, the browser parses it and looks for additional requests for images, scripts, CSS, Flash, and so on. Every time it sees a request for a new element, it sends another HTTP request to the server. The more images, scripts, CSS, Flash, etc. that your page has the more requests will be made and the slower your pages will load.

The easiest way to reduce the number of HTTP requests on your pages is to not use many (or any) images, scripts, CSS, Flash, etc. But pages that are just text are boring.

How to Reduce HTTP Requests Without Destroying Your Design

Luckily, there are several ways you can reduce the number of HTTP requests, while maintaining high-quality, rich web designs.

  • Combine Files – Using external style sheets and scripts is important to keep them from bogging down your page load times, but don’t have more than one CSS and one script file.
  • Use CSS Sprites – When you combine most or all of your images into a sprite, you turn multiple images requests into just one. Then you just use the background-image CSS property to display the section of the image you need.
  • Image MapsImage maps are not as popular as they once were, but when you have contiguous images they can reduce multiple HTTP image requests down to just one.

Take Advantage of Caching

By using CSS sprites and combined CSS and script files, you can also improve load times for internal pages. For example, if you have a sprite image that contains elements of interior pages as well as your landing page, then when your readers go to those internal pages, the image is already downloaded and in the cache. So they won’t need an HTTP request to load those images on your interior pages either.

©2014 About.com. All rights reserved.