Speeding Up Websites
Posted by Elmer in Geek on July 19, 2010
0

Not too long ago, Google disclosed that site speed is one factor that it considers when evaluating pages/websites for search engine visibility. This means websites with sound technical make up has the advantage on that front. Fast loading websites allow search engines to access pages quicker, efficiently jumping from one page to another and covering more content without facing the risk of server time outs.

But what about those websites that face site speed challenges? Are they just left at the mercy of search engines, hoping that when spiders pay a visit at its most idle time? Or is immediate switch to a better, faster web host the way to go? Even if the latter is a good strategic move, let's not take our chances; there are still things we can do with out slow website.

Use external Javascripts/CSS

Using external Javascripts or stylesheets helps speed up page loading because Javascript and CSS files are cached by the browser. In contrast, inline JS and CSS files are downloaded every time a page is requested. While this reduces the number of requests, this also bloats the HTML. On the other hand if these files are accessed externally, the file size is reduced without increasing the number of requests.

Avoid using empty "Image src"

It is less likely we will use image tag with empty location attribute. But <img src=""> is the same as the JavaScript used to define image replacements.

var img = new Image();

img.src = "";

This is not advisable since, except for Opera, all other browsers perform certain tasks that may cripple servers (for large websites that receive millions of page views daily). For example Internet Explorer makes a request to the directory in which the page is located and Safari/Chrome will make that request to the page itself. As a result, servers are made to work for something that does not impact visitor experience.

Enable Gzip

Gzip is an open source compression algorithm that compresses the content of our web site by up to 70 per cent once they are loaded into client browsers. Apply this method to most of HTML content but not PDF or images as they are already compressed.

Minify JavaScript and CSS

Minification is the process of removing unnecessary characters in the code in order to reduce its size and thereby improving its loading speed. This step should not be treated as an alternative to Gzip as minifying a Gzipped content further reduces size by an extra 5%. YUI Compressor is a popular minifying tool for both JavaScript and CSS.

Optimize images

Proper image optimization goes a long way so applying the right file type for certain formats helps. For example, the rule of thumb is that photos be saved as JPG while graphics be saved as PNG.

Be consistent in URL naming

In order to avoid unnecessary server query, let's be consistent in our naming or file names and URLs. Consider a URL which can both be accessed with or without a trailing slash. To a casual visitor, this does not make any difference. But deep within, there is something going on. Therefore, if a website has pages linked to www.website.com/services and others to www.website.com/services/ then one must be adopted in order to avoid making unwanted requests to the server. This can be accomplished using mod_rewrite or Alias in Apache.

Avoid calling duplicate scripts

We might assume that calling the same script two or more times in our source code results to only one request and the other is requested. Wrong. This is because duplicate scripts hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution.

Don't scale images in HTML

We may be tempted to scale images to display on HTML instead of resizing them in Photoshop, but this is not a good practice. This is simply because an image in its original size is still downloaded before the HTML image height and width attribute reformats the image. If we wish to display a 500 x 500 image into a 100 x 100 output in the web page, we should resize it first using graphic editor instead of using the height and width HTML attributes.

Leave a comment

Login to post comments