31 Ways To Speed Up Your Site

Featured

Ian Lurie Dec 5 2007

A slow site sucks, no matter how pretty it is. It sheds visitors and customers like a raincoat sheds water. It can even hurt your search engine rankings.
Fortunately, there are lots of easy ways to accelerate your sluggish site. Here they are, from easiest and least geeky to most complex and/or most geeky:

First, Make Sure There’s a Problem

Before you run down this list, make sure the problem is your site, and not your own internet connection. You can test it easily. Visit speakeasy.net/speedtest and find out how you’re doing.
If it turns out your cable modem is running like it’s 1991, call your cable company, not your web host.

Improve Your Download Time

Every page of your site is comprised of one or more (likely lots more) files: The text, the images, the layout, any video or other rich media, and all javascript and other code have to make their way from the web server to the visitor’s computer.
The less there is, the faster the entire page will arrive at its destination. It’s that simple. Here are a few easy ways to lighten the load:

  1. Compress your images. Make sure images with only a few colors are GIFs and photos or otherimages with gradients are .jpg.
  2. Where you can, use 8-bit PNGs instead of GIFs. If that’s geekspeak, ignore it.
  3. Resize your images before you put them on your site. If you’re using the image height and width attributes to turn a 1000 x 900 image into a 100 x 90 thumbnail, you’re killing yourself. Your site still transfers the entire 1000 x 900 image file to the user’s browser, which then has to resize the image. Your site downloads slowly, and you put additional strain on the visitor’s computer.
  4. Don’t use images when text will do. If you’ve got text on the page that’s a graphic, change it to real HTML text.
  5. Do all your design in your stylesheet. Your HTML code should contain content and structure (like heading tags), and that’s it. The CSS file contains the rest. A visitors’ web browser will cache the CSS file on their local hard drive. So, as they click from page to page or return to your site, they won’t have to reload it. Voila – your site loads faster.
  6. Move all javascript to a .js include file. This has the same effect as putting all of your design information in a separate .css stylesheet. The visitor’s computer loads the .js file once, then uses it many times.
  7. Use css image replacement. There’s some controversy about this, but using CSS image replacement can at least let folks use your page faster: Before the images load, they’ll see relevant text. They can wait for the image, or move on.
  8. Shed the table-based layout. Tables won’t load until everything inside is completely loaded, which means massive slowdown for the whole site. See ‘Do all your design in your stylesheet’, above.
  9. Compress your CSS with http://www.cssdrive.com/index.php/main/csscompressor/ (Be sure to keep a human-readable copy!)
  10. If you’re using video, don’t start loading it right when the page loads. Load the video player and a still image. When the visitor clicks ‘play’, start loading the video.
  11. If you must have an animated GIF or other motion on your page, use it wisely, and make sure it’s as compressed as possible. Ideally, load these bandwidth hogs after the rest of the page loads. That’ll make your users happier.

Improve Rendering Times

Once the entire page arrives at the visitor’s web browser, the browser has to translate all the gobbledygook into a web page. If you use a lot of client-side scripting, like javascript, that increases the load on the browser. So do things like spacing GIFs, tables, messy code or Flash animations. Here’s what you can do to minimize the load you place on your users’ computers:

  1. Check for and remove javascript errors. Every javascript error means your the visitor’s web browser has to think a bit more.
  2. Use the required attributes for all HTML code. Images should have height and width attributes; form elements should have the method attribute, and so on.
  3. Use standards-compliant code. In most cases, this speeds things up. Of course, some browsers do a better job with standards than others. But in my experience, it always helps.
  4. Don’t use spacer GIFs. Before CSS, designers had to use little invisible images, spacer GIFs, to get everything to lay out on the page just right. The visitors’ browsers then had to interpret all those GIFs. Get rid of ‘em. You can use CSS now, I promise.
  5. Move all javascript calls, like the script for Google Analytics, as far down the page as possible. That way, you can load as much content and other stuff as possible before you have to load whatever humungous file Google, Amazon or your ad network has to send you.

Write Better (back end) Code

If your site uses a shopping cart, a content management system, or some other form of ‘dynamic’ pages, chances are you’ve got code sitting on the server that the user never sees.
When a visitor arrives at the site, the server uses that code to build the page they’ve requested, ‘on the fly’. Think of it as a very complicated mail merge.
Good code = a fast site.
Lousy code = a slow site.
Here are a few things you can do to speed things up. Obviously, if you’re not a programmer, you should just pass these along:

  1. Reuse code. Most web servers self-optimize, so one ‘chunk’ of code that’s used many times will compile once, and then run many times (this is a very high-level description – coders, don’t flame me). So re-using code will always speed things up.
  2. Check your database. Make sure that the database driving your site is ‘normalized’. I won’t even try to explain this here, except to say that a normalized database stores each item of information once and once only. It’s faster, trust me.
  3. Use indexes. Make sure that your database uses indexes on fields that are read many times and written less often. An index basically helps database software more quickly locate and read an individual row of data. Used wisely, they can result in huge performance improvements. But indexes will slow down write operations – when the database stores data. So use indexes for data like product listings or any other data that doesn’t change often.
  4. Defragment your indexes. Database indexes can fragment, just like your hard drive. Defragment them periodically, or they’ll slow your site down instead of speeding it up. Each database software platform is a bit different as to how you do this, so consult the documentation. Or just Google ‘[database software name] defrag index’.
  5. Check your loops. One of my staff used to be the King of Loops. If he could do something through repetition, he did. That’s OK, but make sure you don’t overdo it. For example, if you can use a database join to group data, you can eliminate many annoying loops. I know, this is geekspeak for most. Again, just pass it along.
  6. Use stored procedures. Database platforms like SQL Server can use something called ‘stored procedures’. These are great performance boosters. The database software will compile the stored procedure after the first use, so that it runs faster thereafter. As an added bonus, properly used stored procedures can improve security.
  7. Let the database do the work. In many cases, I see sites where the developers know lots about the web server and programming language, and nothing about the database they’re using. The database platform is almost always a faster way to access, sort and format data than web server. Wherever possible, use the database software to sort, group, format and otherwise tweak information. Use the web server to build the final page with that data.
  8. If you use AJAX, use it wisely. Don’t make dozens of HTTP requests when 1 will do.
  9. Load stuff in the background! If you are using AJAX, streaming or anything else, pre-load data or content the user will want, in the background, after the rest of the page loads. That way, when they request it, they’ll experience less load time.
  10. Use server-side caching. Most programming languages provide ways to save chunks of generated content and re-use them. If you have a catalog, for example, you might only need to generate the product pages once a day, since you only update pricing each night. Use your platform’s caching code (ColdFusion, for example, has a gadget called CFSAVECONTENT) to speed things up.

Check Your Servers

The last thing to check is the web server. Just like your desktop, it can slow down due to overloading, bad setup, viruses or who-knows-what-else.

This is the last thing, not because it’s unimportant, but because your hosting provider is handling this. They are, right? Right?…

  1. Move the database. If you’re hosting both the web site and the database on the same server, move the database to a separate server. This is a nice performance boost, if you can afford it.
  2. Check for infections. If your server is getting slammed, it may be due to a computer virus or other malicious software. It’s usually not, but it’s worth a check. Run the server’s antivirus software, just to be safe.
  3. Check for unnecessary programs. Use the Windows Security menu (on Windows) to check for any running software you don’t need. Windows machines come with loads of unnecessary stuff. If you’re on a _NIX platform, use one of many commands to check – I use top. In either case, if you find something that’s causing problems, don’t turn it off! It might be important. Have your web hosting provider or IT guy do it. Otherwise, you may lop off an ear when all you needed was a haircut.
  4. Move to a dedicated server. If you’re on a shared server – one that has many other web sites on it – you may need to move to a server that’s just for your site. This is expensive, but if you can afford it, it should help a lot.
  5. Move to another host. OK, this is a pain. But some hosting providers are just slow. We worked with a web hosting company for a while that regularly lost 1/2 their internet connectivity, slowing our client’s site to a crawl. Things happen. But if they happen more than once a quarter, you should probably move.

Don’t Give Up

There is no excuse for a 20+ second load time on your site. With a little effort, you can speed up almost any web page. If you do, you’ll have happier visitors and more customers.
There are, of course, many more ways to speed up your site. If you have one and want to share it, comment below. Thanks!

tags : conversation marketing

5 Comments

  1. Great tips.
    While I like PNG over GIF because of its support of higher bits, IE6 handles transparency PNG poorly. To fix it, we need javascript, which bloat the page and slow down load…

  2. Did they even fix PNG Transparency in IE7? I didn’t hear anything about it if they did. If not, there’s another reason to use Mozilla.

  3. I wish I had more constructive input here but: I <3 geekspeak. Read this post again.

  4. simon

    I agree png is not a better alternative to most gif images, its not just the transparency issue

  5. Chris Furniss

    IE7 fixed the png transparency issue, but I have still noticed color discrepancies between the browsers. Or maybe my eyes are broken.

Comments are closed.