Optimize your page load time

I am developing websites for over past nine months and I have found some really good stuff that could help in decreasing the load time of a web page. Below are few things related to JavaScript and CSS that could help in speed up the load time of a web page.

---

Minimize the HTTP Request.

Most of the end-user time is spent on loading the front end. If somehow we could reduce this time user gets more time to look at the content. This happens mainly due to the loading of various components used in page such as images, stylesheets, scripts, flash, etc. Each component requires a HTTP request. Reducing the number of this request can help in faster page loading.
Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet.
CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

---

Putting CSS Stylesheets at the Top

Putting stylesheet in the HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively. Loading progressively means that the browser displays whatever content it has as soon as possible. This helps a lot when the page is loaded heavily with lots for content. It also helps when the user internet connection is slow (Dial up). When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.
The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.

---

Put Scripts at Bottom

As described above how stylesheets near the bottom of the page prohibit progressive rendering, and how moving them to the document HEAD eliminates the problem. Scripts (external JavaScript files) pose a similar problem, but the solution is just the opposite: it’s better to move scripts from the top to as low in the page as possible. One reason is to enable progressive rendering, but another is to achieve greater download parallelization.
With scripts, progressive rendering is blocked for all content below the script. Moving scripts as low in the page as possible means there's more content above the script that is rendered sooner.
The second problem caused by scripts is blocking parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.

---

Make JavaScript and CSS External

Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.

---

Minify JavaScript and CSS.

Minification means removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced.