Designing Pages to Load Quickly

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 Google’s Page Speed tool.

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.

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.

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

28 Responses

Comments are now closed on this post.

  • Nuno, March 8, 2013

    I definitely think that number 12 is crucial, as a lot of sites currently load a lot of unnecessary code.

    As for using a little amount of images, I would say that we need to be responsible on this, as we can lose more for having a poor site than for taking an extra second loading it.

  • Download Photoshop, March 3, 2010

    The only advice – is properly chosen hosting provider, and also made a separate CSS all styles well, and optimized images, then the site will be quickly loaded. In this case, do not forget about the W3C Validator!

  • James, November 24, 2009

    Thx Man!!! Useful tips. You almost covered everything. ;)

  • 4design, July 15, 2009

    How to write one of your previous articles, you’ll need to make all fully in external CSS-file to unload the whole code page. Well, do not use huge pictures on the site. Thank you for your attention!

  • Heartburn Home Remedy, April 15, 2009

    I follow your blog for quite a long time and should tell you that your articles always prove to be of a high value and quality for readers.

  • Droid, August 16, 2007

    It is necesary to make some comparations while y´re generating images from FW or PS

    In some cases png beats gifs in weight.

  • Vandelay Design, August 16, 2007

    You’re right, PNG is a good option. I think PNG files are in between GIF and JPG in size. The transparency is the best feature in my opinion.

  • Droid, August 16, 2007

    Useful tips, I just want to say something about this:

    “6 – Convert JPG files to GIF files when possible”

    PNG is far better than gif in graphics, supports better color deph and transparency too.

    Photos in jpg definitely.

    See ya.

  • Average Joe Blogger, August 5, 2007

    Good set of tips.