Tips For Making Your Website Load Faster

The speed at which your site loads has a direct impact on both your search engine results and the likelihood that a visitor will become a repeat visitor. Slow is bad. Luckily, there are plenty of techniques to increase your page load times. Here are a few of them.

Simplify the Design

Not always an option but when designing a website, or revisiting an existing design, take stock of what elements are slowing your load times down and whether they are really needed or not. Google’s Chrome browser comes with Developer Tools which is an easy way to see what files are slowing you down. Firefox has the Firebug addon. There are plenty of other ones available to analyze your page load times. Work your way down from the largest files, trying to reduce their size as much as possible, then start in with the smaller ones.

One good place to reduce load times is with image slideshows. It is nice to add a little motion to your site but are visitors really waiting around to see that sixth image? Probably not. Reduce the number of images to four and you’ve reduce the HTTP Requests by two and the amount of kbs that need to be loaded by however many those two images were. Javascript files can also be surprisingly large. Take sure to minimize those files.

Reduce Database Queries

If you have a database driven website be aware of how and how many times your database gets queried.

Minimize HTTP Requests

Every time a request goes out it stops everything else from loading until it is finished. Reducing requests helps prevent bottlenecks from slowing your website down.

CSS Sprites

CSS Sprites are a great way to reduce HTTP Requests. A css sprite is a combination of many different small images in one larger image. Using css you can show only the little piece of the image you need in each place. So instead of having 10 little individual images you have one larger image. Here is a little tutorial on css sprites from CSS Tricks.

Combine Files

Not just images can be combines. If you have multiple style sheets, javascript files or php include files try combining them to reduce HTTP Requests.

Cache Static Content

Even in highly dynamic websites there is plenty of static content. Make sure your images and any static content are cached.

Expire Headers

Here is an example from HTML Boilerplate.

<IfModule mod_expires.c>
 ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
 ExpiresDefault      "access plus 1 month"

# cache.appcache needs re-requests 
# in FF 3.6 (thx Remy ~Introducing HTML5)
 ExpiresByType text/cache-manifest "access plus 0 seconds"

# Your document html
 ExpiresByType text/html "access plus 0 seconds"

# Data
 ExpiresByType text/xml "access plus 0 seconds"
 ExpiresByType application/xml "access plus 0 seconds"
 ExpiresByType application/json "access plus 0 seconds"

# RSS feed
 ExpiresByType application/rss+xml "access plus 1 hour"

# Favicon (cannot be renamed)
 ExpiresByType image/x-icon "access plus 1 week"

# Media: images, video, audio
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/jpg "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType video/ogg "access plus 1 month"
 ExpiresByType audio/ogg "access plus 1 month"
 ExpiresByType video/mp4 "access plus 1 month"
 ExpiresByType video/webm "access plus 1 month"

# HTC files  (css3pie)
 ExpiresByType text/x-component "access plus 1 month"

# Webfonts 

GZip

Most modern browsers allow for GZiping javascript and css files. Basically a way to compress them to reduce load times.

Javascript at the Bottom

Put your javascript files at the bottom of your pages, right above the closing body tag. This allows for the page content to load first.

Hosting

Not all hosting is the same. If your site is on a cheap shared hosting plan especially, you could be seeing some lengthy load times because of it. Shared hosting services are pretty notorious for jamming way to many sites onto a server. Which means your sites load times are dependent on the traffic of those other websites. If you can afford it try to at least get on a dedicated virtual server.

There are many ways to optimize load speeds. What are some techniques you’ve used to reduce load times?