Did you know when you embed HTML code provided by any third party website what does it do to render the whole widget or process something for you ? It does the following :
The page renders the HTML provided and there can be one or more Javascript files in it.Downloading this Javascript file is creating one more HTTP request and it blocks the other requests, as this leads to serial processing. Until the Javscript is completely loaded, no other request is made and hence the page cannot be rendered further.You might have noticed this when half page loads quickly and the other half takes ages to load. This is normally seen in the external javascript requests.
Another scenario can be suppose the script is request on some XYZ server and the server is down. So until the requests times out, which is generally 30 secs., the browser will keep waiting for it to load and hence everything is clogged.
How do I avoid this type of Clogging ?
Doesn’t matter if you did not understand what I tried to explain in the above lines, but still you shoule read this half to optimize your webpage. I am sure this gonna help you save lot of seconds in page load. I have discussed in one of my posts “Optimizing or speeding up your webpages” that we should include javascript after the stylesheet (.css) files. I have also shown the example that how drastically does the pageload time changes for a webpage. So extending that further, we should always try to include Javascript files at the end of the page, near the footer or just before the closing body tag.
This also makes sure that all the DOM elements are loaded and then the Javascript executes, on the elements. This could also avoid an error “element_name is null” which is pretty common for the Naive web developers.
This is where we paste script for the Google analytic, or any other tracking services script. So when you paste the embed code there, the widget is of course going to render there and of course you do not want that all. So to place the widget in a proper place we have to trick it using CSS or sometimes Javascript itself. So please look at the CSS style defined below and that way you can place your widget wherever you like to.
#widget_div_id{ overflow:hidden; position:absolute; right:10%; top:3%; } |
The position:absolute does the trick here to place the element, the top and right selectors define their actual position. You should use percentage instead of px, as this will avoid messing up the layout when the webpage is viewed in different screen resolution.
Can you show me an example ?
Yes a very live example is google translation module, which sticks in the right side of the header of Digimantra ‘s site but is actually rendered way down near the footer. So you might have noticed (if you have a slower connection), that it appears all of sudden when the page loads completely.
Any Alternative ?
Some people claim to use defer=”defer” attribute in the script tag. But some browsers fail to understand that, and if your script has document.write in it,then it may only show up the widget and clear the whole document instead. This bug is seen very rare, but i try to avoid it and instead paste the javascripts at the end of the page.
What are the exceptions ?
The exceptions can be that, sometimes you need to perform certain actions just when the page is loading, like hiding few elements quickly as they load. So at that time its not a good idea to let the whole page render and then hide the elements, until you are sure that the HTML will load too fast and so does the execution of javascript.
Hope it helps
Stay Digified !!
Sachin Khosla
