Nothing ruins a beautiful website design like an interminable loading time. If the site takes too long to load, users might decide against visiting the site and never even see your final design. Following these tips will decrease loading time.

Optimizing Images

Always save images as web-optimized images in Photoshop. Whenever possible, save them as PNG-8 format unless this significantly reduces the color quality. (Another advantage to using PNG images is background transparency; if you later decide to change a background color, a PNG with transparency will fit seamlessly with the new background.) When saving JPG images, bring down the image quality whenever possible. Adjust the image size to fit the exact dimensions you will use on the site.

Saving images optimized for web in Photoshop

When using hover states for background images, always save multiple images in one file as sprites. Use image mapping to display the correct section of the picture:

a#ask-an-expert { background: url('ask.jpg") no-repeat left top; }
a#ask-an-expert:hover{ background: url('ask.jpg") no-repeat left 50%; }

Using sprites for hover images also the eliminates lag time of swapping out images when the visitor hovers over the link or button. In addition, it keeps your site directories small and organized.

Including External Files

Only load the files needed for each page. This includes PHP ‘include’ files (such as files that store functions and classes), Javascript files, CSS, images, and other media. Load CSS files at the top of the page. This practice will allow the page to render immediately while other components of the site are still loading. The visitor might not yet see a fully loaded site, but they will see more than just a blank page. Load JavaScript files as the bottom of the page whenever possible.

Wisely choose the correct balance for number of external files (CSS, PHP, JS, etc). Make sure pages that require quick loading (such as PPC landing pages) are not loading irrelevant content such as unnecessary banner scripts and media content. However, you don’t want to load too many different files. Determine which content can be combined into a single file and which content is unique to a specific page or set of pages.

Lastly, the size of your external files can be decreased by eliminating extra white space. Javascript libraries are often stripped of all excess white space. However, eliminating all extra white space will hinder readability. Find a balance that remains easy to read yet maximizes loading time.

By: Sarah