Minimizing load time for web pages

Optimized

As stated previously, a complex process exists behind the representation of a website on your monitor. Part of this complexity is because of the display of illustrations in the text flow.

If the rendering engine of the browser already knows the image size, it can reserve an appropriate space and add the image data, which loads more slowly, into the correct spot in the layout after the transfer is complete.

The images need alternate text (ALT attribute) and correct size specifications in the IMG tag so that they load with the least amount of computing cost and time. During the data transfer, the web browser will show the alternate text in the placeholder. Visually disabled persons, as well as search engines, can profit from good descriptions of the images. Image scaling turns out to be a disadvantage in this step.

It does not make sense to move a large image together with the accompanying data volume over the connection only to have the rendering engine turn it into a smaller size that fits.

The image size also influences the processing in the browser cache. Sizes that are powers of 2 have an advantage (e.g., 8, 16, 32, 64, 128, 256, 512, and 1024 pixels). The cache internal processing and the page alignment work at their most efficient when dealing with these multiples.

Loaded Later

HTML5 includes functions that already load the content before a visitor to the web page explicitly calls it. For example, this technique is used for teaser text that points to additional content, such as a complete article. News portals favor this function on the title page. Many content management systems come with this type of function already integrated.

From a technical point of view, this content is referred to as "loadable later." HTML5 provides the link attributes prefetch and prerender [29] for this purpose. The first of these attributes only loads the referenced resources. The second attribute additionally prepares the entire page in the background. Listing 2 shows two links specified accordingly as an example.

<link rel="prefetch" href="http://www.meineurl.de">
<link rel="prerender" href="http://www.andereseite.de">

As soon as the user calls the corresponding link, the web browser loads a page in the background and displays it with no further load and computing time. This approach reduces load times and better utilizes the network bandwidth. However, it also causes additional network load and generates entries in the browser cache even for pages you have not actually visited.

The entire process only functions if the corresponding option has been activated in the web browser. Firefox comes with prefetch in its standard configuration.

If needed, you can monitor the corresponding setting in the network.prefetch-next key under about:config (Figure 3). Firefox does not offer an option for controlling the function via the configuration dialog.

Figure 3: Prefetching, which is the automatic loading of content before it actually gets called, can be turned off in Firefox via the internal settings.