Load the background graphic later

In 99% of the cases, the background graphic is not the most important to deliver as quick as possible to the visitor. The load time of other elements is more important.

Let's take a web site highly optimized for fast loading. The first TCP/IP package comes. In this package, the browser finds, that it's necessary to laod several other files. But what files are important for a first quick impression of the visitor? In 99% of the cases, not the background graphic.

Therefor, at the PEGE pages, loading the background graphic is only started after loading the JavaScript.

In CSS

.print{url(none)}
.screen{background-color:ECEBF0;background-image:url(../pic/background/20081118.png);background-repeat:repeat-y;}

In Javascript loaded at the end of the page

document.body.className='screen';

Evaluating log files showed, in this case, loading the background graphic occurs only after loading the JavaScript. Testet with MSIE 7 and Firefox 3.0.4.

Load time optimization basics
	What can at all being optimized at the load time? Basics for the load time optimization of web sites. How is the load time defined

Dummy Javascript for a fast load time
	In the HEAD section is no JavaScript loaded. The load of the JavaScript occurs only at the end of the page. To bridge this time are in the HEAD short dummy functions.

Load time optimization by CSS Cascading Style Sheets
	Already with the first 4 received TCP/IP package, the browser should be able to render the most important contents of the web page. Optimization step CSS.

Load time optimization: Content first
	Now we have learned all measures, in order that rendering the web page can start with the first 4 TCP/IP package from the server. But what should the browser do with it?

Load time test
	Erase the cache and after this far far away from the next cellular station visit the web site. Document the load with a video.