Sunday, August 31, 2008

Decreasing Website Load Time

Website Load Time


Load time refers to the length of time it takes for a website to load onto a browser, after the URL is called. Load time can also be used to refer to the amount of time it takes for specific object elements to load onto a web page, such as images, video and Javascript.

There are several ways to improve (decrease) the time of object elements on a web page. We have tried different methods, and have found that no particular solution is right in every case.

Server Side Solutions to Improve Load Time


Perhaps the most effective may to decrease load time is by simply purchasing a dedicated server. Dedicated server hosting plans offer the user a comprehensive control panel which allows a variety of performance manipulations to be performed on the server side.

The downside of this method, however, is cost; dedicated server plans can run anywhere from $100-$2500 per month. So, this may not be the most feasible option if your client is on a smaller budget.

Front-End Solutions to Decrease Load Time

A second way to decrease the load time of certain object elements on your web page is by the use of Javascript. See the example below:

script type="javascript" language = "JAVASCRIPT" if (document.images)

{
img1 = new Image();

img2 = new Image();

img3 = new Image();

img4 = new Image();

img7 = new Image();

img8 = new Image();

img2.src = "/images/logo-more.gif";

img3.src = "/images/Eye-of-Gnosis.JPG" ;

img4.src = "/images/CK.bmp";

img7.src = "/images/mmc_room1.jpg"

img8.src = "/images/55th-7th.jpg";

}
/script


The above Javascript creates a function which tells the server to load the specified images (e.g., img1.src, img2.src, and so on) first - before loading the rest of the page content. This technique is also called image preloading. Ususally, preloading images and/or video will noticebly improve the overall load time of the page.

Drawbacks of Preloading Images With Javascript


As with any method, there are drawbacks. Javascript is not that easy for robots to crawl over, either. In fact, bulky Javascript can present its own load time and crawl-rate issues. So before you use Javascript to preload object elements, you may wish to first think about the size and number of images you want to preload before making a decision to use this method. There's little net gain if you stakc tons of spider-slowing Javascript into a page, just to speed up the time it takes to load elements.

Compressing Object Elements to Decrease Load Time


A third relatively easy way to decrease object element load time is by compressing certain elements. This works especially well with images. For example, you can take larger images and drop them into an image editing application, such as Windows Movie Maker. Then, you can re-save the images in a smaller, more manageable file sixe or format. Often, this can be achieved without sacrificing too much the image quality.

If you absolutely cannot sacrifice image quality, there is another option. Each image file type carries with it its own intrinsic "baseline file size.":

Audio file Formats
  • .mp3 files are typically smaller than .wav and .wma files

  • .mid files are typically smaller than .mog (drawback: .mid files don't play
    in every browser, and so must often be converted to another file format anyways to get them to play on a website)

  • .swf audio files are smaller than, say, .aiff formats. But again, they don't play in all browsers. (.aiff files are often found in audio editing software, and can be extremely unwieldy in terms of size)

Video File Formats
  • .flv are typically smaller than .wmv or .rm files. (Drawback: you need the Flash plugin to play .flv files, and the Real Media Player to play .rm files)

  • .mov, .wvx, .mp4, etc. are more compressed than, say, .avi files, but takes some finagling to get to play in various browsers.
Image File Formats
  • .gif are smaller that .jpg (drawback: .gif don't always keep the same quality of resolution as .jpg

  • .png are usually the largest of the most common image file formats
    (.jpg, .tif, .bmp, .gif)

No comments: