To have best performance of loading an html page, we recommend while coding in js to: Minimize payload size
- Minify JS
- Defer loading of JavaScript Minimize Roundtrip times
- Combine external JavaScript
- Prefer async. Resources
- Optimize the order of styles and scripts
- Avoid document.write
Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.
Recommandation
Use: http://closure-compiler.appspot.com/home
Defer loading of JavaScript
Deferring loading of JavaScript functions that are not called at startup:
- Reduces the initial download size
- Allowing other resources to be downloaded in parallel
- Speeding up execution and rendering time.
Recommandation
Here's an example (where "deferredfunctions.js" contains the functions to be lazily loaded):
<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Prefer async. Resources
Fetching resources asynchronously prevents those resources from blocking the page load.
Recommandation
Using a script DOM element maximizes asynchronous loading across current browsers:
<script>var node = document.createElement('script');
node.type = 'text/javascript';
node.async = true;
node.src = 'example.js';
// Now insert the node into the DOM, perhaps using insertBefore()
</script>
Combine external JavaScript
Combining external scripts into as few files as possible cuts down on RTTs and delays in downloading other resources.
Recommandation
- Partition files optimally.
- Partition the JavaScript into 2 files
- one JS containing the minimal code needed to render the page at startup;
- one JS file containing the code that isn't needed until the page load has completed.
- Serve as few JavaScript files from the document as possible
- For small bits of JavaScript code that shouldn't be cached, consider inlining that JavaScript in the HTML page itself.
- Position scripts correctly in the document head.
Correctly ordering external style sheets and external and inline scripts enables better parallelization of downloads and speeds up browser rendering time.
Recommandation
- Put external scripts after external style sheets if possible.
- Put inline scripts after other resources if possible.
Avoid document.write
Using document.write() to fetch external resources, especially early in the document, can significantly increase the time it takes to display a web page.
Recommandation
- Declare resources directly in HTML markup
- Use "friendly iframes"
- A friendly iframe is an iframe on the same origin as its parent document. Resources referenced in friendly iframes load in parallel with resources referenced on the main page. Thus, calling document.write in a friendly iframe does not block the parent page from loading.
Summary
- Identify Js not called at startup
- Try to make two js file (combining, refactoring):
- One containing Js need in startup
- One containing Js not need in startup
- Minify the two files (http://closure-compiler.appspot.com/home)
- Defer loading the file in 2.b
- Put external scripts after external stylesheets if possible.
- Put inline scripts after other resources if possible
Links
