Optimize Images

It is widely known that the loading time of websites has a major influence on the overall user experience. If on the age of 56K Modems people would be willing to wait even half a minute for a website to load this time span has been drastically reduced lately. The are market researches, in fact, confirming that users will just skip a site altogether if it fails to load within 4 seconds.

The first part of the “Speed Up Your Site” series will cover how to optimize images. Images can create an extra load on the size of your pages, specially if you forget to optimize them. Photoshop and similar image editing software include a feature called “Save for the web”. Always use this feature since it will reduce the image size and load time substantially.

If you do not use an image editing software or if you want something more practical you can use this online image optimizer from Dynamic Drive. It will automatically optimize gif, png and jpeg images, and it will also convert file formats if needed.

Image Formats

JPEG: Stands for Joint Photographic Experts Group. This format was created for photographs and fine art-work. You should use JPEG images whenever you are displaying a photo or a true-color image. Notice that if you are using compression to reduce the file size you should use a 50% compression rate for optimal results.

GIF: Stands for Graphics Interchange Format. The GIF format is connected with the history of the Internet, mainly because of its small size. JPEG images support millions of colors while GIF ones will integrate a maximum of 256 colors. You should use this format for flat-color images like logos, buttons or text images. GIF is also the format of choice for animated images.

PNG: Stands for Portable Network Graphics. The PNG format was created specifically for the Internet, with the objective of replacing GIF images. The main advantage of PNG images over GIF ones is that they support 24-bit colors and alpha transparency. That said not all the browsers recognize some of its features. You should use the PNG format for simple images that require more than 256 colors.

Optimize CSS

Cascading Style Sheets make websites much more efficient because they allow the browsers to cache style-related information from the .css file directly, removing the need to read that information every time a single page is loaded. Even if Style Sheets are naturally more efficient than HTML tables you can still optimize the CSS code to make your website cleaner and faster.

First of all try to locate dispersed code and aggregate it together. For instance instead of:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

you should use:

margin: 10px 20px 10px 20px;

Instead of:

<p>A paragraph of decorated text</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Forth paragraph</p>

you should use:

<div>
<p>A paragraph of decorated text</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Forth paragraph</p>
</div>

Secondly you can also try a CSS optimizer tool like CleanCSS. Those tools are supposed to merge similar selectors, remove useless properties, remove whitespace and so on.

Links

When a server opens a link in the form of “http://www.domain.com/about” it will need to figure what kind of file or webpage is contained on that address, wasting time on the process. If instead of using that link you include a slash (“/”) at the end like “http://www.domain.com/about/” the web server will already know that the link points to a directory, reducing the time to load the page.

The improvement on the loading time of links ending with a slash will not be astronomical, but when it comes to speeding up a website every small bit helps!

Tags

This is a very important factor that many people (including myself until some time ago) tend to overlook. When you use images or tables on your pages you should always include the height and width tags. If the browser does not see those tags it will need to figure the size of the image, then load the image and then load the rest of the page. Here is an example of code containing those tags:

<img id="moon" height="200" width="450" src="http://www.domain.com/moon.png" alt="moon image" />

When the height and width tags are included the browser will automatically know the size of the image. As a consequence it will be able to hold a place for the image and load the rest of the page contemporaneously. Apart from the improvement on the load time of the page this method is also more user friendly since the visitor can start reading the text or other information while the image is being downloaded.

HTTP Requests

When a user is opening your website every object on the page (e.g. images or scripts) will require a round trip to the server. Those HTTP requests will delay the response time of your site, and if you are loading dozens of objects this delay can add up to several seconds.

The first step to reduce the delay from HTTP requests is to reduce the number of objects on your website. Get rid of unnecessary images, headers, styling features and the like. If possible you can also combine 2 or more adjacent images into a single one.

Secondly make sure that your requests for external files or scripts are combined in a single location. For example instead of using three CSS files to create the layout of your page:

<link rel="stylesheet" type="text/css" href="/body.css" />
<link rel="stylesheet" type="text/css" href="/side.css" />
<link rel="stylesheet" type="text/css" href="/footer.css" />

You should use a single one with all the styling information:

<link rel="stylesheet" type="text/css" href="/style.css" />