Minimizing load time for web pages

Clean Code

When you use dynamic content created with JavaScript, PHP, Perl, or Python, you should use the most effective programming language that is available for the web page. And, if possible, you should always use the most up-to-date version.

Remember to take the usual principles of good programming into account, including readability, documentation, and modularity of the components. Using templates reduces the number of errors and makes it possible to have a unified site that is easier to maintain.

The complex browser differences of the past were cause for lots of extra work and lots of gray hair. Today, however, the developer has to keep all of the possible output devices in mind.

The reader with a smartphone has different requirements for the web page than a PC user. You can identify the device being used with a little PHP code snippet like the one shown in Listing 3 and then you can send back a specific format template. If you are using several different format templates, then they should all be referenced in HTML5 similarly to Listing 4.

<link href="iphone.css" rel="stylesheet" \
  type="text/css" media="only screen and (min-width: 0px) \
  and (max-width: 320px)">
<link href="ipad.css" rel="stylesheet" \
  type="text/css" media="only screen and (min-width: 321px) \
  and (max-width: 768px)">
<link href="style.css" rel="stylesheet" \
  type="text/css" media="only screen and (min-width: 769px)">

if(strpos($_SERVER['HTTP_USER_AGENT'], "iPhone"))
{
   // Instructions for a visitor with an iPhone
}

A few stumbling blocks can trip you up when information about size is used in format templates. To make the various output devices scalable, you should always use the em [30] specification. This unit has a long history in typography and is used to measure the horizontal width and the number of letters. In CSS, it will define the number of pixels and let you measure width and height even though only the proportions of the web page elements are of interest.

If you have not specified the size of the contents on the web page by means of the BODY tag, then the settings of the user will apply. This also applies to the specifications of font type and size. You can always enter a generic font like sans or sans-serif as a fallback solution. If the requested font is not found in the visitor's system, then the browser will at least load a usable alternative.

Compact Code

Although the shape of the HTML source text may be quite important to you as a web developer or an editor, the web browser ultimately pays no attention. It will ignore spaces, indentations, and line breaks. Thus, it makes sense to set up a compact and cleaned up version of the web page on the web server. This significantly decreases the data volume to be transferred and the preparation time of the web page.

Many tools can be used for the cleanup process, primarily as part of the HTML Tidy project described above. Examples include the Java-based JTidy [31], the Perl version PTidy [32] and the Python interface for TidyLib [33].

Via the libhtml-clean-perl package, users of Debian based distributions enjoy access to the workings of the htmlclean program, which assumes this task with appealing output (Listing 5).

$ htmlclean -v *.html
  2317   1999 13% impressum.html
  3669   3276 10% index.html
 15361  13823 10% neuigkeiten.html

In order of appearance, the columns in the output include the original size of the file, the size of the compressed version, the degree of reduction, and the file name. Additionally, htmlclean creates an archive file with the extension .bak so that the original file remains intact.

To avoid having to constantly compress files manually, you can use the mod_tidy [34] module for the Apache web server.