When designing a website it’s important to keep in mind more than just the content and aesthetic appearance. A critical factor in website design is its performance. If a user is on a slower internet connection, pages with a lot of content and images may loading painfully slow, and this can detract from your users’ experience on the site. Here are two tips for optimizing your website:

1. Save Style Sheets in CSS Files

Sometimes it’s convenient for the developer to store page styles directly within the HTML page. While this may make it easier to modify the CSS when working on the site, it has one huge disadvantage: The user must download the CSS every time a new page loads. The solution is to store all of your CSS in a separate file, usually ending in “.css”. This allows the web browser to cache the CSS files, saving the user a little time if their connection is slow. To import a style sheet that you’ve saved elsewhere, simply add this HTML in the header of your webpage:

<link rel=”stylesheet” href=”file.css” type=”text/css” />
Make sure to replace “file.css” with the name of the file.

2. CSS Sprites

Another trick to cut down on the time needed to load your page is by storing your images in sprites. A sprite is simply a collection of images stored in one larger image. This decreases your website loading time several ways. First, if you were to have 25 images on your page, the browser would be required to make 25 HTTP calls to the web server to retrieve the images. Not only is that a lot of calls for the user, but the browser usually makes only a handful of calls at a time, so you have to wait for the images to load. It can also be daunting to the server. By combining the images into one file the browser only needs to make one request. Also, depending on compression, the size of the larger image may be substantially less than the sum of all of the small images.

For an easy method of generating a sprite image with the necessary CSS code, please visit this page.