Make fewer HTTP requests / Combine and minify files

1) Minify CSS and Javascript: This is pretty important. If you reduce the amount of http requests to your domain you will speed up the loading of your pages. There are lots of tools that help you with this task. A javascript builder can for example take several files and put their content into one, automatically every time you republish your website code. The builder can also minify the content for you and remove comments you had in the development version of the file.

For this task and to keep my code organized into modules i use require.js. Require.js has a builder (called optimizer / r.js) that will minify your css and javascript files and combine them into a single css and javascript file. You could as well use Google Closure, The Dojo Toolkit also has it's own builder and jQuery uses UglyfyJS. jQuery mobile has an online builder. Yet another tools comes from Yahoo, the YUI compressor can minify javascript and css.

2) Combine images using the CSS sprites technique: You could also use a technique called CSS sprites to reduce your amount of requests. You combine several images into a single image using a graphic design software like Photoshop or Gimp. If you don't want to do it manually you can also use CSS Sprites tools like on online sprites generator. The trick is that you have to use the background position CSS property to define which image out of the sprite you want to show.

div.someclass { background-image: url(my_sprites.png); background-position: x-value y-value; }

The x and y values are for the top / left pixel of the image.

3) Use Data uris: Data uris let you put images in your css. To use the data uri CSS trick you need to encode your image into a base64 string. You can use php (base64_encode function) to do this dynamically or you use an online tool to generate base64 encoded images for you and then add those to your CSS.

div.someclass { background: url(data:image/gif;base64,BASE64_IMAGE_STRING_HERE); }