in General

11 simple ways to improve website performance

A common question in the minds of webmasters or website administrators, web developers and quality assurance people is that how can we improve the performance of a website? Many factors affect the performance such as server hardware, processing power, data transmission speed and many more. One such factor is the way website has been designed. A properly designed website should produce good results in terms of performance. Following certain basic things that I have observed, the performance of the website can be drastically improved without much compromising with the functionality. Let me tell you those things one by one.

  1. Use optimized images: The images used in websites should be as small in size as possible. Less bytes mean less loading times. Depending upon the type of colors the image contains, proper image formats should be used. e.g. if the image contains solid colors or less detailed contents .png or .gif formats must be considered. For images with real world or nature images, jpg file format should be chosen for optimal performance.
  2. Use css sprites and less number of javascripts and css files: The number of http requests that is made from client to server is directly propotional to the number of files that are requested. Thus more images mean more http requests. This causes more bandwidth usage and increases load on the server. CSS sprites are special images created by merging all the images together into one image. The background-image and background-position property of css styles can be used to properly position the images on webpage. There are many websites that offer you to merge the images automatically and generate CSS for those files. Similarly instead of having too many javascripts and css files, try to merge them all in single files so as to reduce the overall http requests.
  3. Precompile if possible : Although not possible with every web technology, technologies like ASP.NET offer flexibility to precompile the website code into dlls. This reduces the load on the server to compile the website. Although the server compiles these files once, this can give a bit of delay when first request is made for the website. Precompilation will help to reduce that delay.
  4. Use caching: The client side caching is a way to cache the images and data on the client side browser or computer. Using caching helps improve the performance by reducing the overall load on the server. This is because the resources that do not change frequently are cached and are not requested by the client again and again.
  5. Use Ajax: Make use of Ajax(Asynchronous javascript with XML) within your website. Ajax causes the client to request data from the server asynchronously using XMLHttpRequest object instead of HttpRequest. This helps in only refreshing relevant page portion instead of redrawing the whole page. The disadvantage of relying on this is that browsers allow to disable execution of javascript in which case you require to have full page loading.
  6. Avoid full flash website: A website that is fully created in flash takes some time to load completely and people visiting any website don’t like to wait. Therefore try to optimize the flash components to minimize the size or if possible avoiding them totally.
  7. Use client side java script validations: Try to validate the data at the client side itself using javascript instead of relying totally on server side validations. Although you should always use server side validations, including client side validations prevents the invalid data to postback to server for mere validation. e.g. if you want to check if the user has filled the first name field in a contact form, javascript checking would be nice before form is submitted to server for same check. This reduces the server load for performing validations.
  8. Use scripts at the end of page: The javascripts that you use in your pages should be included at the end of the page instead of beginning. This is because the loading of page offers in sequential manner from top to bottom. A script loading at the start reduces the overall performance of the webpage and produces delay while drawing the visual items on the page.
  9. Avoid inline scripts and styles. Use external files : Most browsers cache the included javascript and css files. Therefore try to include the javascript and css styles as separate files using script tag and link tags respectively instead of using styles and scripts inline. Inline styles and scripts are loaded every time a request is made thus reducing the overall performance.
  10. Avoid blank image tags: Remove any image tags that have blank src attribute.This is because for each such image tag a separate http request is sent. This degrades the overall performance. Removing these tags can improve performance of the website which has thousands or more visits per day.
  11. Minify your documents: Minifying your javascripts and css styles can help reduce the overall file sizes required for transfer from web server to client. It is a process of removing unneeded characters such as new line characters, white spaces etc. from these files and sometimes obfuscating the javascript code to reduce the file size for optimal performance. e.g. A style such as

.classname

{

background-image:url(images/a.png);

color:white;

border:solid 1px black;

}

after minification becomes

.classname{ background-image:url(images/a.png);color:white;border:solid 1px black;}

A website using thousands of styles can save lot of bytes using this process. There are many tools available for minifying your javascript and css styles. Some free tools are JsMin , YUI Compressor and Minify for php.

Most points if not all when implemented can result in faster response times to the users of the websites thus improving the performance of your web application.

Good luck and have a happy web development

Write a Comment

Comment