There are number of best practices for making web pages fast. Here I am going to discuss some of the best and simple ways to increase speed and optimize your site.
Minimize HTTP Requests:
To reduce the http requests, one way is to make y
our design simple. But, if you want fast response time with pages having loads of content here are some techniques for reducing the number of HTTP requests.
is the method used to combined multiple images into one image. This method is used to reduce the image requests. If there are multiple background images in the site, this method will combine them into a single image and use the CSS background-image and background-position properties to display the desired image segment.
Combining scripts and styles
into a single file is the way to reduce the HTTP request. In this way all the sccripts are combined into a single script, all stylesheets are combined to single stylesheet.
Reduce DOM Elements :
Grids.css can help you with the overall layout, fonts.css and reset.css can help you strip away the browser’s defaults formatting. This is a chance to start fresh and think about your markup, for example use div’s only when it makes sense semantically, and not because it renders a new line.
The number of DOM elements is easy to test, just type in Firebug’s console:
Avoid 404s :
Making an HTTP request and getting a useless response (i.e. 404 Not Found) is totally unnecessary and will slow down the user experience without any benefit.
Remove Duplicate Scripts :
Unnecessary HTTP requests happen in Internet Explorer, but not in Firefox. In Internet Explorer, if an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page.
Use minified version of jQuery Plugins, JS and CSS :
Don’t scale images in HTML :
Avoid use a bigger image than you need just because you can set the width and height in HTML. If you need
<img src="codeinsects_logo.jpg" alt="Logo" width="100" height="100" />
then your image (codeinsects_logo.jpg) should be 100x100px rather than a scaled down 500x500px image.
Put Stylesheets at head section of the page :
Putting stylesheets in the HEAD allows the page to render progressively. This is important for those users who are using slow internet connections who want something to see until the whole page loads. At least header, navigation, logo these part of the page will be shown until the page loads fully.So these are simple techniques to speed up your site. These are the basic one, will come very soon with some advance techniques. But I need your feedback too to make the list long.