Hey there,
We create webpages and all we are worried about is how does the webpage look like and is your script bug free, but optimizing a webpage is equally important. By optimizing I am not talking about SEO which is the most hyped term over the internet today, but instead I meant the performance. The webpages can load faster if you tweak your script a little bit. Firebug in firefox actually shows how the resources are being requested from the server. Due to some bad scripting technique the resources are requested serially from the server and hence the delay. However few minor tweaks or changes can marginally increase the performance of the same web page. Oh no, I am not asking you to change the UI aspect, instead the lines of code remain the same, its only positioning or the series by which the request is sent to the server amtters. Some bad scripting methods clog the browser and hence degrade the performance of a site on the whole. Some browsers are intelligent enough to do the trick but some just do not play around and hence the page gets rendered quite slow.
First of all let’s explore a simple web based tool which shows that how your webpages get affected by simply changing the position of the code blocks. Steve Souders’ Cuzillion tool is a nice way to determine all the the best way to place code blocks. You can try different permutation and combination of the code and choose the one you think optimizes your code the best way.
A very nice demonstration would be to place JS file a Style sheet file in the header area and we try to swap their positions. Here are the links of pages which I created just when I was writing this post, the request time may vary depending upon your connection speed and the country region, try switching the browsers from Firefox to IE to view the performance issues among different browsers.
Page 1 – Js file before the Stylesheet file , load time 3621 milliseconds
Page 2 – Stylesheet File before the JS file, load time 1747 milliseconds
Wow, isn’t that amazing Almost a difference of 2 secs, and wonder when your files are heavy enough and they are multiple in numbers ? So you can simply save 2 secs of page load each time your site is browsed by simply declaring the Stylesheet above the External Javascript declaration.
I did not get time to play around with Internal JS and internal CSS, but I am sure these two have effect on the page load. Instead you must clearly understand that each resource requested by the webpage has an effect over the performance overall. I do not suggest using Inline CSS style definitions, they are considered bad coding / designing standards. Also they have some serious performance issues.
You can also visually see the execution of these resources using the niche tool called Firebug for firefox. It actually shows you how much time does a file took to load from the server, and whether it was loaded from server or just picked from the cache because of the multiple request to the same resource which is unchanged.
We are coming up with more optimization techniques and show you how to make your code a better code 🙂
If you like this post, please feel free to give some love via comments.
Stay Digified !!
Sachin Khosla
