When using any website one of the worse things to run into is a site responding slowly. It makes you feel like your not doing anything, like your wasting your time, and that the site is “boring”. It doesn’t matter rather your being paid to use the site or not. Even employees getting paid hourly don’t want to use a company site to do things if the site is slow. There are a few things you can do however to speed things up a bit. This article is aimed at both developers and clients, and as such it will provide only a high level look at things, that hopefully everyone can understand.

First Define slow

The most annoying thing to hear is “the site is going slow.” That may be the case, but thats not a help to anything. The first step it to define what slow is, and what it means. Is it slow to load, slow to animate, slow to render, etc. Once you have determined what you mean be slow, then you can move forward.

Slow to load

This can be seen visually, remember the good ol’ days of 14.4kbps modems. Loading a site with a few images on it could take minuets, but you could also see those images loading. Slow to load sites will look the same. To fix this, you need to reduce the overall size of the data being transmitted and reduce the number of things being transmitted.

First start with images (it’s the easiest). If you have 5 images all un-edited and taken with a 10 Megapixel camera, thats going to be a lot of data. If you can reduce the picture sizes before uploading them, that can make a huge difference. The goal here is to reduce file size.

Next take a look at the number of things being transferred. If your transferring 1,000 tiny images that still going to take a long time. Not because the files are big, but because the browser has to ask for each image in turn, and that can take a while. To fix this consider reducing the number of files needed, or combine many files into one. Theres no reason you can’t combine many javascript or CSS files to one file. Images can also be converted to sprites if you really need to reduce the number.

Lastly, when looking at slow to load problems, keep in mind that javascript can some times (when poorly written) cause the web page to look like it’s loading slow. A good example of this would be when including external javascripts in the body of a document, that also load resources. Most commonly Google Anaylitics code, used incorrectly. Make sure that all javascripts are at the end of the document, or are in the header. If you just have to have them in the middle of the document they should always be use in conjunction with something like jQuery’s document.ready event.

Slow to Render

When I say slow to render I mean slow for the server to render. This can best been seen as pages that are “waiting on server” for long periods of time. There are several things you can do to address these issues. First ask yourself, does this really need to be this dynamic. If your doing 100 data base queries to populate content that never changes, then making that content static could be a major speed boost.

Your server may also have resource issues. When you request a page, if your server resources are near 100% then it’s going to take a long time for the server to render that page. You should try using the 80/20 rule when sizing your hardware (80% of the time your server should be below 20% of capacity. The other 20% is should never climb above 80%).

Another reason a site may be slow to render is complex code. Calendars, image manipulation, and data transformations are all examples of tasks that, no matter how well the code is written, is just going to take a long time. To help with that you can try pre-rendering the content, caching the content, or redesigning to reduce complexity. If your site is a calendar app, and the month view is taking to long to load you could always try a two week view. If your just having issues with complex tasks caching should do the trick.

Lastly, you may have render issues due to just plain ol’ bad code. The only way to fix that is to get better code written.

Slow to Animate

If your website uses Javascript animations, then you could run into a problem where your page looks like it’s fully loaded but the super special animation of your call to action doesn’t fire for several seconds. This will present as video players not loading, or animations not loading. The most likely cause for this bad code. The most frequent examples I see are in systems where admins can enter ad tags that get displayed on their page. These ad tags have blocking javascript calls that either interfere with DOMLoaded events or that block the entire javascript engine. Because these are almost always hosted off site, and are under the ownership of another party, the only thing you can really do is remove the offending bits of javascript.

If you have added your own bad javascript or have the ability to edit the offending javascript, then you should make sure that all the code is non-blocking, and that nothing effects DOMLoaded calls. This is not something a non-developer can do.

Other ways websites can be slow

There are some other ways sites can be slow. I just want to take a few seconds to acknowledge them. The most difficult to correct is overly complicated markup. Markup should strive to be as simple as it can be. HTML is very powerful but when made too complex for it’s own good, browsers can usually take far too long to render it. I have seen examples of pages using 50 megs of markup or more to render simple tables. To fix this usually requires an entire rewrite.

There are also client side slowness issues. This can best be identified by the site running well for everyone except one or two people. To fix this, those people may need to upgrade their browser, get faster internet, or remove some browser add-ons. Often times with this type of slowness there is nothing to do server side.

Perceived slowness is another problem. This is harder to spot, but when a webpage takes a second or so to be usable it doesn’t matter that it rendered and transferred in 100ms. In this case it’s almost always over use of animations and page transitions that cause this problem. Try keeping your animations to highlighting things and not blocking user interaction.

Lastly, badly written websites can cause slowness issues. Mostly poorly written javascript. Remember, javascript is an interpreted language and not compiled. This means that really overly complex code can really confuse the browser. This can cause things to load or appear to load slowly.



Email: coteyr@coteyr.net
Phone: (813) 421-4338
GTalk: coteyr@coteyr.net
Skype: coteyr
Guru: Profile