Decreasing Load Time, Part. II

I wrote an earlier post on the importance of decreasing website load time. One of my SEO gurus, who taught me the tricks of the trade, used a general rule of thumb that has served me well in my Internet Marketing efforts:

The longer a site takes to load its objects and elements, the poorer its rankings will likely be in the SERPs.

And since Quality Score factors in to Google's ranking algorithms, it pays to learn decreasing website load time techniques.

Using Photoshop to Re-Size Images

In the previous article, I talked about the technique of pre-loading website images as a means to decreasing load time. But there is a second, easier, way to decrease load time, and that is by using Photoshop to save the images as Web images.

To do this, simply open the image you wish to resize in Photoshop. Then, go to the File menu and select "Save As." Change the image to a .jpg or .gif (whichever is appopriate - .jpegs for photo images and .gifs for graphic images, typically).

Next, hit save. This will bring up a pop up window which will allow you to slide a button to the left, where it says "Save for web" or "low resolution", or something to that effect. The idea is that you want to save the file in a lower-resolution than what it is currently.

Then, re-upload the image file into your web server location.

If done properly, the image should be significantly smaller. We have found that this technique does not lost any noticeable image quality once transferred to the Web. Super-Refresh (CTRL + F5) the web page with the image, and you should notice a faster loading page.

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)