Jump to content

How to Minimize HTTP Requests to Speed Up Web Pages

0
  simonstl's Photo
Posted Oct 29 2009 02:28 PM

Each unique object in a web page requires a round trip to the server, that is, an HTTP request and a reply. Each object introduces indeterminate delays. As you learned in the introduction to Part II, when the number of objects is greater than four, object overhead dominates page download times.

By minimizing the number of objects in your web pages, you can minimize the number of HTTP requests that are required to render your page and thus reduce object overhead. By requiring fewer HTTP requests, you'll speed up load times and make them more consistent.

The key to minimizing HTTP requests is to combine files and convert graphics-based techniques to CSS. You can convert graphical text to CSS text; combine external images, scripts, and CSS files; and eliminate frames and Javascript includes. Convert spacer cells into CSS margins, and replace Javascript behavior with CSS :hover techniques. Combine multiple decorative images into one CSS sprite.

Image Replacement Schemes

Image replacement schemes work by substituting static or dynamic images for text, usually headers. These replacement techniques include sIFR3, swfIR (swf Image Replacement), and Stewart Rosenberger's Dynamic Text Replacement scheme. Note that using CSS to hide and show images actually doesn't work well in screen readers. Javascript is more appropriate for the job.

Convert graphical text to styled text

Graphical text is often used for headers or menu items to achieve a certain look. As yet, search engines can't read text embedded in graphics. Rasterized text also introduces unnecessary HTTP requests. You can instead use CSS to style headers, or use an image replacement scheme. By converting to CSS text, you lose some control but gain in speed, potential search engine rankings, and accessibility.

So this:

<div align="center">

<img src="graphictext.gif" width="115" height="24" alt="graphic text example">
</div>


Attached Image

becomes this:

<style type="text/css">
<!--
h1 {font:bold 18px palatino,times,serif;color:#03c;text-align:center;}
-->
</style></head><body>


Attached Image

Use text overlays. One variation on this theme is to separate graphical text from background images. To achieve high-quality text in a JPEG you need to increase the quality of the entire image so that it is higher than it needs to be, or use regional compression. In some cases, it may be more efficient to remove the text from the JPEG and overlay the text as either CSS text or, as a last resort, a transparent GIF or PNG with the text embedded in the image. With a graphical text overlay you trade an additional HTTP request for a smaller background image. A CSS text overlay avoids this trade-off.

Convert spacer cells to CSS margins or padding

A common practice is to use spacer cells with a single-pixel GIF that is stretched to enforce the spacing distance. Here is an example from Nasa.gov:

<!-- Empty spacer row -->

<table><tr>
<td colspan="2" width="223"><img border="0" alt="" height="10" width="223" src="/
images/common/spacer.gif"></td>
</tr>


Even rocket scientists can use some help with their HTML. A better way would be to use CSS to add spacing between cells:

<style type="text/css"><!--
.vmargin {margin-top:10px;} --></style></head><body>
<table><tr>

<td colspan="2" width="223" class="vmargin">Content goes here</td>
</tr>


Even better is to use relative "em" spacing to allow for changes in font size made by the user and div elements:

<style type="text/css"><!--
.vmargin {margin-top:1em;} --></style></head><body>

<div class="vmargin">Content goes here</div>


Combine remaining images and map or sprite

You can reduce the number of HTTP requests that your pages require by combining adjacent images into one composite image and mapping any links using an image map. Instead of multiple HTTP requests, this technique requires only one (see the image below, "A tale of two images = two requests"). So, this:

<div align="center">
<h4 align="center">Two Images = Two HTTP Requests</h4>

<p><img src="1.gif" alt="first image"> <img src="2.gif" alt="second image"></p>
</div>


becomes this, by combining the images into one composite image and using a client-side usemap:

<div align="center">
<h4 align="center">One Combined Image = One HTTP Request</h4>
<map name="map1">

<area href="#1" alt="1" title="1" shape="rect" coords="0,0,100,100">
<area href="#2" alt="2" title="2" shape="rect" coords="100,0,210,100"></map>
<img src="combined.gif" width="210" height="100" alt="combined image client-side
imagemap" usemap="#map1" border="0">
</div>


A tale of two images = two requests

Attached Image

This HTML creates a client-side image map with two target areas that correspond to the "1" and "2" squares in the composite image. For the rect(angle) shape, coordinates are measured from the top-left corner of the image to the bottom right, so 0,0,100,100 defines an area starting in the upper-left corner (0,0), down to X = 100 pixels to the right, and Y = 100 pixels down (100,100).

Combine and optimize CSS and Javascript files

Many developers create separate stylesheets and import them into their pages as needed. There are two problems with this approach: (1) it requires additional HTTP requests, and (2) you can encounter the same-domain connection limit. Combining files in the head of your HTML documents can avoid these problems. Browsers must load and parse external CSS files referenced within the head of your HTML before they parse the body content. By minimizing the HTTP request load, you can maximize the initial display speed of your content. So, this:

<link rel="stylesheet" type="text/css" href="/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/css/nav.css" />
<script src="/js/functions.js" type="text/javascript"></script>
<script src="/js/validation.js" type="text/javascript"></script>


becomes this, by combining the CSS files into one file and the Javascript files into one file:

<link rel="stylesheet" type="text/css" href="/css/combined.css" />
<script src="/js/combined.js" type="text/javascript"></script>


Suture CSS or Javascript files. A similar approach to saving HTTP requests is to automatically combine external CSS or Javascript files by suturing them together on the server. You can combine stylesheets or Javascript files on demand to create one master file. Done properly, these combined files can also be cached.

Here is how this digital surgery would work for CSS. You need to tell the server two things: first, to parse CSS files for PHP commands, and second, to send the correct MIME type. Add the following lines to your httpd.conf file for Apache:

AddHandler application/x-httpd-php .css
header('Content-type: text/css');


Next, you can merge your CSS files together with PHP inside the CSS file, like this:

<?php
  include("layout.css");
  include("navigation.css");
  include("advanced.css");
?>


To deliver files based on browser environment variables (e.g., to simulate an @import to filter out older browsers), you could use software such as phpsniff, available at http://sourceforge.n...jects/phpsniff/.

Cache dynamic files. As specified earlier, the dynamic CSS file will not cache properly. If you add the following headers to the top of your PHP file after the content type, they will cache for three hours (adjust 10,800 seconds as necessary):

header('Cache-control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 10800) . ' GMT');


Put CSS at the top, Javascript at the bottom. Steve Souders found that moving stylesheets to the top in your head element makes pages load faster by allowing them to load progressively. With scripts, the opposite is true. If possible, move external Javascript files to the bottom of your pages, or delay or defer the loading of Javascript files in the head. Progressive rendering is blocked for all content that is placed after scripts in your HTML.

Eliminate (i)frames and Javascript includes

More than 52% of web pages use frames, the vast majority of which are iframes used to display advertising.1 Frames, iframes, and Javascript includes can be especially harmful to web performance because they introduce extra HTTP requests and can include entire web pages within other web pages.

For advertising, you can eliminate the extra HTTP requests required by the preceding methods by using a server-side include-based ad delivery system such as 24/7 Real Media's Open AdStream. Here is some sample code from Internet.com that can be added to a web page to include a banner ad:

<!--#include virtual="/banners/adstream_sx.ads/_PAGE_@750x100-1"-->


This technique uses server-side includes (SSIs) to include the banner ad directly into the page, saving an HTTP request. The inserted code looks like this:

<div id="topvisibility"><table ALIGN="CENTER">

<tr>
<td align="center">
<A HREF="http://itmanagement.earthweb.com/RealMedia/ads/click_lx.cgi/intm/it/www.
datamation.com/datbus/article/3739896i/1286136569/468x60-1/OasDefault/SSO_BluRay_
GEMS_1d/bluray2_750x100.jpg/34376565343564363437666663326530" target="_top"><IMG
SRC="http://itmanagement.earthweb.com/RealMedia/ads/Creatives/OasDefault/SSO_BluRay_
GEMS_1d/bluray2_750x100.jpg"  ALT=""  BORDER="0"></A><img src="http://itmanagement.
earthweb.com/RealMedia/ads/adstream_lx.cgi/intm/it/www.datamation.com/datbus/article/
3739896i/1286136569/468x60-1/OasDefault/SSO_BluRay_GEMS_1d/bluray2_750x100.jpg/
34376565343564363437666663326530?_RM_EMPTY_" Width="1" Height="1" Border="0"></td>
</tr>
</table>
</div>


The resultant ad displays as shown below, "SSI inserted banner ad (750 x 100 pixels)", saving an HTTP request.

SSI inserted banner ad (750 x 100 pixels)

Attached Image

The editors at Internet.com noticed an increase in speed after switching from Javascript-based ad serving to SSI-based ad serving. Again, the idea is to shunt work to the server in exchange for less work for the browser.

[1] Levering's 2007 survey found that most frames are iframes (found in 51.2% of web pages), whereas only 0.8% are frames. Note that some dynamically created frames were not counted in this survey, so these figures will be higher.

Website Optimization

Learn more about this topic from Website Optimization.

Is your site easy to find, simple to navigate, and enticing enough to convert prospects into buyers? Website Optimization shows you how. It reveals a comprehensive set of techniques to improve your site's performance by boosting search engine visibility for more traffic, increasing conversion rates to maximize leads and profits, revving up site speed to retain users, and measuring your site's effectiveness (before and after these changes) with best-practice metrics and tools.

See what you'll learn


1 Reply

0
  Johnson Sean's Photo
Posted Apr 12 2014 07:13 PM

Hello writer
I took time to read what you wrote here but what you didn't do was to describe where these codes be placed and how it should be placed for dummies like us.

I can't just read a code and place it anywhere in the file, i guess it has to go to a certain page. I use wordpress and if you don't mind, tell me how and where EXACTLY it should be place. You can add some images just to make sure the dummies who stumble into this page like us understand.

I am sure i am not the first to read but the first to leave comment cos i really need it.

Please take a look at Http://www.naijacenter.com and you can respond to me through naijacenter1@gmail.com