couchable.co New? Start Here RSS Twitter

Tips For Making Your Website Load Faster

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?

Read More:
some other posts you might enjoy or I thought where particularly relevant to the web design post you just read

Creating User Engagement

One of the best ways to get repeat visitors is to increase the amount of engagement on your site. If there is no way for users to interact or react to your content than you are just an information site.…

Read More

Getting Traffic to Your Older Posts

It tends to be the case with most posts that once they get pushed off the homepage, they get read less and less often. Just because a post isn't brand new doesn't mean readers wouldn't like it. So here are…

Read More

Yellow Website Designs

Here is a collection of yellow websites. Yellow is one of those colors that typically is only used for a accent color. Yellow can be a hard color to design with because it can be overwhelming on a bright backlit…

Read More

Spread the Word

Subscribe to the RSS Feed or follow @couchable on Twitter

Have something to say? Leave A Comment Below

Most Popular:
the most popular posts of the year
Couchable Huh?
what this blog is all about

Couchable is a web design blog created by Tyler Herman and is one of a couple blogs and sites in my Network. There are a lot of design blogs out there so I try to cover the important topics I'd want to read about, such as: improving your designs, dealing with clients, finding better work, and making more money. I've also been focusing a lot lately on content management systems and internet marketing.