Related Articles

Many people browsing the Internet are impatient and unwilling to wait for slow-loading pages to load. Consider doing HTML compression on your business's website to please your customers. While repeat customers may already have your page cached for quick loading, new customers will not, thus HTML optimizations in coding, internal and external page structure, minification and server-side compression could help to increase your revenue and visibility.

HTML Optimization

Every tag, style, function, image and file of your website must be loaded to properly display the page, so cutting down on unnecessary code can speed up the page. See if you're using extra

or

tags for spacing, calling external CSS or Javascript files twice, or declaring repetitious styles. Take this HTML code, for example:

Using External Files

Breaking down your HTML into CSS and JavaScript files is another form of quick compression. If your site uses a standardized layout for each page, consider removing all of the page creation and font styling parts of your code into a layout.css file -- browsers can cache these files instead of having to re-download them within the HTML for each page. Likewise, if you use a few inline JavaScript functions repeatedly, move them to a specific required.js file. Note that you'll need to specifically call files into the HTML of each page through Server Side Includes (SSIs), PHP or ASP. The syntax is: SSI: PHP: include('includes/required.php'); ?> or ASP: Another option is to inline the styles and scripts on the front page while the browser downloads the files for use in later pages.

Basic Structure and Loading Order

Each stylesheet and JavaScript that your page calls affects the loading time. Moving the stylesheets to the HEAD section of your page will make it appear as if the page is loading faster because the main elements appear first. Along those lines, moving any script calls closer to the bottom of your page will give the appearance of faster loading; JavaScript downloads one script at a time and blocks all other downloads during the process.

Function Compression

While this can be tedious, checking over your functions -- especially within JavaScript -- can cut down on file size. Using a variable instead of repeating a long function is more efficient, and some statements can be compressed, such as if/else. An example from an expanding navigation menu: if (document.getElementById(category).className=="show") { document.getElementById(category).className="hide"; } else { document.getElementById(category).className="show"; } You can alter this into: var whichcategory = document.getElementById(category); whichcategory = (whichcategory.className=="show") ? "hide" : "show";

Further Compression and Minification

Most HTML, CSS and JavaScript code is littered with spaces and comments. Minification is the process of removing all of these unnecessary elements to further compress the code. Depending on how well commented the pages are, this can significantly speed loading times. While you can go through each file manually, programs such as Minify and YUI, or online HTML minifiers can do this work for you.

Server-Side Compression

Most browsers support automatic GZIP decompression for loading Web pages. GZIP compression is an open source alternative to proprietary compression schemes widely used today, and is also supported by most servers like Apache or IIS. You can check whether your server, Web page or browser uses or supports compression online (link in Resources).

About the Author

Ben Richard began writing in 1996. He is compiling an anthology of poetry as well as a nonfiction book. Richard studied philosophy and English at Texas A&M University. Richard writes on technology and specializes in web design.