5. Defer loading of JavaScript

If you must use JavaScript, then it is a good idea to defer the loading of this code until after the page load event has fired. Google actually provides a deferral script you can use to do this:

codesource
// 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);
}

This script appends the contents of the deferredfunctions.js script to the body element once it has loaded.

Simply push all the JS code you want to defer until after the page load event into a JavaScript file and reference it from the deferral script (by replacing the bold file reference to reflect the name and location of your own JavaScript file) which you can copy and paste into the HEAD of your pages.

JavaScript that might otherwise block other page elements from loading, will now only load once the page body has loaded. Since this is what browsers and Google uses to determine when a page has loaded, it no longer matters how long the rest of the JS takes to load (provided it doesn't affect the browsing experience of your users).

Have you optimized your blog or small business website? What tips and tricks worked best for reducing page load time? Share your website optimization tips and experiences in the comments below or follow me on Twitter, LinkedIn, or Google+ to continue the conversation.