Custom Website Design

No matter how great your website design looks, if it loads too slowly visitors are unlikely to stick around. In this article we look at 12 ways you can decrease the load time of your pages. To see how fast your pages load in comparison to other sites, visit Self SEO. With this free tool you can see the load times of up to 10 URLs at one time.

1- Use fewer images and graphics

The number of images and graphics on a web page has a direct influence on its load time. A page with just text will load quickly, while a page full of images will take much longer. Consider eliminating unnecessary pictures that don’t add much value to your site. Remember that photographs aren’t the only images on a page. Titles and logos often use images to feature a more attractive font than simple text can produce. All of these can add up to create a drag in your load times.

2 - Reduce image file size, dimension, or resolution

Once you have determined which images are necessary for your pages, consider reducing the file size of the image by 1) decreasing the dimensions, or 2) decreasing the resolution. Graphic editing programs such as Photoshop and Paint Shop Pro will allow you to easily resize the image or decrease the resolution will maintaining the same dimensions. Both options will result in an image with a smaller file size and faster loads.

3 - Predefine the size of your images

Use HTML to tell the browser how big the image should appear. This not only helps your page load time, but it also ensures that your images will appear how you want them to appear.

4 - Re-use the same images whenever possible

Using cache your visitor’s browser will remember images that have been seen on other pages throughout your website. When images are found in the cache the load time is significantly reduced. If images from your homepage can be used on your secondary pages, the load time of those secondary pages should be reduced.

In order to take advantage of this you must use the exact same image file on multiple pages. For example, if image1.jpg is used on your homepage, image1.jpg must be used on your secondary pages in order for this to work. Changing the size of image1.jpg and saving it as image2.jpg will cause the browser to recognize it as two different images. If you want to use a different size of image1.jpg, you can do so by specifying the size of the image in your html rather than by using a different image file.

5 - Avoid animated/moving graphics

Animated GIFs create larger page loads and are often unnecessary to the design and appearance of a page. If these types of graphics are used they should be kept to a minimum.

6 - Convert JPG files to GIF files when possible

JPG files contain more colors and have larger resolutions than GIFs. Images that are used for titles and logos can normally be saved as GIF files without sacrificing any image quality. Photographs should be left as JPGs because of how many colors they include.

7 - Use valid HTML and CSS code

By validating your code you will be certain that it is ready for the browser. Invalid code will not always slow down the page loads, but by having valid code you can ensure that these types of errors will not cause problems with the speed.

W3C provides a tool for validating HTML and for validating CSS.

8 - Decrease the size of your pages

Smaller pages will generally load faster than larger pages. If your pages are abnormally large consider breaking them up into several smaller pages.

9 - Avoid unnecessary code

Using programs that are not exclusively intended to create websites can leave your pages with extra, unnecessary code. Although the page may have the same appearance as a page that is created with minimal code, the internet browser will have to take longer to read through the unnecessary code. Hand coding or using a program such as Dreamweaver will produce the best results.

Use a HTML Tidy to automatically clean up your code.

10 - Use CSS-based design instead of table-based design

Table-based design uses more coding than CSS-based design and therefore a page that uses table-based design will usually have a longer loading time. CSS allows the designer to separate the content of the page from the design and ultimately use less code to create the same appearance.

If you must use table-based design, avoid using nested tables. By using several smaller tables the browser will not have to wait for the entire page to load before displaying parts of the page. By using multiple tables, each table will be displayed as soon as possible.

11 - Use separate CSS files rather than containing the CSS in the page

CSS can be contained inside the head tag of a page or it can be contained in a separate document and linked to specific pages. Keeping the CSS code in the head tag of each page will require the browser to read more when each page is loading (plus it makes changes in your CSS much more difficult).

12 - Avoid excessive use of JavaScript and Flash

Many websites use JavaScript and Flash in one form or another. While they both have many benefits, they should be used in moderation. Excessive JavaScript or Flash will require the browser to handle more code and will slow down page loads. Use the scripts that are most important to your website and leave out those that are extras.