More on improving your website performance.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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 Minify for php. and
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