Increase the website performance


The most important things should be taken into account is performance of the website. In this article I present some of the tips for improving website performance. Performance tuning is main things which a website needs.

Following are the points should be taken into account while checking the performance of the site:



• Remove bad request to the server.
• Minify JavaScript
• Minify HTML
• Minify CSS
• Combine images using CSS sprites.
• Avoid Inline Css
• Avoid Inline JavaScript
• Optimize Images
• Specify Image dimensions
• Leverage browser caching
• Minimize redirects.
• Avoid HTTP request

Remove bad request to the server:
Avoid unwanted or bad request to the server. This means requesting for the files that are not available in the server.

Minify JavaScript:
Minimize the lines of code in JavaScript. Remove the unwanted and commented code in it.

Minify CSS:
Minimize the lines of code in CSS. Remove the unwanted and commented code in it.

Minify HTML:
Minimize the lines of code in HTML. Remove the unwanted and commented code in it.

Combine images using CSS sprites:
Combine all the images and place it as singe image and positioning the images needed in the CSS use it for the website. It may decrease number of request made to the site.

Avoid Inline CSS:
We should not use inline styles so that it decrease the performance.

Avoid Inline JavaScript:
We should not use inline JavaScript. It is not recommended.

Specify Image Dimensions:
For image source, need to add width, height attribute.

Minimize Redirects:
Reduce the number of redirects in the site. Unwanted redirect may affect the site performance.

Avoid HTTP Request:
Adding HTTP request within the site is not recommended. Sometimes if the request URL is not working then it will affect our sites performance.

For Example:


Script with HTTP request

Leverage Browser caching:


By enabling the browser cache will increase the performance of the site because all the css, JavaScript are loaded from browser cache itself.

Add the below code to enable browser cache: Under static content tag add the below code

cache


Attachments

Comments

Author: Ashutosh Jha14 Aug 2014 Member Level: Gold   Points : 4

Hi,

Really a nice article. Lots of knowledge to improve the website performance. But just wanted to ask some doubts like-
1. Some times when you write css in a separate css file and inherit it in your webpage using reference of that css then it will work in some browser an not in others.
I have this issue, page is working fine in internet explorer but not in Google chrome. ANy solution for this. Till now i have used inline css for this. but this is not a good method.
2. When ever we have to use javascript or jquery then which one is beneficial-
write in the same page or in a different script page and use that as a reference.



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: