Hello!

This is a short post about how to speed up your website using cutting edge CSS 3.0 techniques. Unfortunately, this isnt very viable for large scale websites (since it doesnt quite work in IE7/8), but for the other 30-60% of your users, a quick speed increase is welcome.

The CSS rules are very simple:

.preload-images {
	background: url(image-01.png) no-repeat -9999px -9999px;
	background: url(image-01.png) no-repeat -9999px -9999px,
		    url(image-02.png) no-repeat -9999px -9999px,
		    url(image-03.png) no-repeat -9999px -9999px,
		    url(image-04.png) no-repeat -9999px -9999px,
		    url(image-05.png) no-repeat -9999px -9999px;
	}

You write this at the end of your CSS file (so you load the images after the CSS images have been loaded). Very useful when it comes to gallery images and the like.

This isn't a 100% sure-fire method though, and the only major consistent results seem to be when it is used with gallery-type websites, but it's a cool trick nevertheless.

Stay Tuned for more tutorials!