Defer Loading of JavaScript

For viewing all tips see here

Applicable To

All Browsers

How Improves Page Load Time

o        By optimizing parallelization of external resources

o        By optimizing network latency (HTTP Payload Size)

o        By optimizing browser rendering

Prologue

[Detail of the technology / concept being used in the tip if required]

Why

o        Before browser can start rendering a web page, Java script code must be downloaded, parsed and executed first, which if it is not needed can be deferred

o        Even when JS file is cached, browser blocks processing of all elements after the JS code, until browser load the code from disk and processed it

o        For some browsers, while java scripts are being processed they block downloading all other external resources, which add considerable latency for script intensive application

How

o        By allowing deferred bytes to be loaded asynchronously in the background

o        By deferring all JS codes that are required for user – trigger events like onMouseClick

o        By identifying all JS functions that are not actually used by the document before the onLoad event

o        By forcing external JS file to be loaded after the onload event

Exceptions

None

Recommendations

Use DOM element for defer loading than usual simple HTML script to avoid cross-browser and same-domain policy issues