Most of the web pages take 80% or 90% of their loading time depending on network. There is a powerful technique that can easily reduce the amount time spent blocked over the network and avoid serializing resource downloads.

This article shows three common patterns which escape to needless serialization and ensure parallel downloads. Parallel down load is faster then serial. A group of newer browsers set up bottlenecks. So, try to discover many effective examples in every browser to find out the real difference with best results. The version of internet explorer 7 focuses in each behavior of this article.

1. The combination of external JavaScript files

To download external scripting files are fairly unique due to make popular browsers in blocking next downloads up to the script completed. This scenario makes the whole difference to download images that can happen in parallel (till the limit).

Example 01: Two external scripts

LIVE EXAMPLE CHECK PLEASE

Example 02: Two images

LIVE EXAMPLE CHECK PLEASE

Follow the example 01, here images are loading in parallel motion and taking duration one second to complete. On the contrary in Example 02, scripts are taking two second to complete fully load in serialization. This is the main difference arise between a serial and parallel download.

Therefore, if you contain multiple script files then merge them together into a single file before adding in a page.

2. Incorporate external CSS before external JavaScript files

Example 03: Script before CSS

LIVE EXAMPLE CHECK PLEASE

Example 04: CSS before script

LIVE EXAMPLE CHECK PLEASE

In example 03, it is visualized that CSS file is included after script file and takes load time much. On the other hand in example 04, it is obvious that CSS file is included before script file and takes load time less. So, if you have any external script and CSS file you should that include CSS file before script file for faster downloading in parallel form.

3. To Avoid in adding inline Script between other resources and external CSS

Inline script tags don’t download anything but prevent next resources from downloading a CSS file in parallel.

Example 05: Inline script after CSS

LIVE EXAMPLE CHECK PLEASE

Example 06: Inline script before CSS

LIVE EXAMPLE CHECK PLEASE

In example 05, it is crystal clear that an inline script puts between JavaScript and CSS files these serializes the download. Moreover, in example 06, inline script puts at top position from CSS and JavaScript files in parallel downloading appearance. It is strongly recommended that, download in parallel form is faster than serial and every webmaster should follow the correct rules & regulations of inline script, JavaScript and CSS files.