how to defer parsing javascript

[Joel]

Hi all,

working again on optimizing performance, I'm stuck with this one, can't get what defer parsing of js is all about.
when I ran page-speed on our site, I got this

Quote:94.2KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

but I have no clue "how to defer parsing of javascript" please help me understand it
(also I came across http://www.w3schools.com/tags/att_script_defer.asp which says "The defer attribute is only supported by Internet Explorer")
Thanks, your help is much appreciated

(a link to the site I refer to if it helps)

[pmeenan]

Here is the documentation that Page Speed provides on the check: http://code.google.com/speed/page-speed/...rLoadingJS

It isn't literally referring to using the defer attribute, more the concept of asynchronously (and lazily) loading as much of the javascript as possible.

Looking at an actual test: http://www.webpagetest.org/result/111114_0X_266AT/ I think you could get a fair bit of benefit by using the non-ssl version of content for non-encrypted pages but the biggest overall win would probably come from converting a bunch of the images into a sprite.

[Joel]

Thanks Pat for the quick response,
I actually read the Google advice but couldn't "get" how to get it done... now that you mentioned "lazy loading" I can go and search again

any easy way how to serve different files based on if the page is secure or not? (we use the same template for the entire site, I think it's only for the one jquery file from google libraries api)

Regarding the image sprites; I keep on getting this recommendation when I run page-speed but I tried the spriteme bookmarklet many times and it couldn't find any savings, not sure why (maybe because our site is designed in tables)

Thanks

[pmeenan]

Yeah, if most of the images are not already css background images then spriteme might not be able to find them.

The easiest way I know of to do protocol-neutral loading is to use absolute urls without the protocol: //ajax.googleapis.com/... (I think there is a problem if you use that for css on IE so just be careful).

Thanks,

-Pat

[Joel]

WOW! I'm amazed with your quick and to the point answers! haven't seen such a great moderator yet
Thanks Pat, I removed the protocol, how easy...
-
I believe I gotta redesign the site first in order to get the sprite thing done

---

I still don't understand how to load js asynchronously, would it be possible to show me an example using a js file we actually use? (if I may ask)

Thanks

---

added: we do have a lot of background images yet spriteme has no suggestions

[andydavies]

Stoyan wrote an article on asynchronously loading social media buttons.

It's got a nice bit of code of async loading part way down - http://www.phpied.com/social-button-bffs/ (just before 'All Buttons Markup')

[laboot]

To defer javascript, I use the following code. It works for all browsers, is compatible with everything (as far as I'm aware). Just add the following code right before closing body tag.

Code:

<script defer="defer" type="text/javascript">
    window.onload=function(){
        var mycode;
        mycode=document.createElement("script");
        mycode.type="text/javascript";
        mycode.src="http://www.example.com/path/yourjavascriptfile.js";
        document.getElementsByTagName("head")[0].appendChild(mycode);
    }
</script>

</body>

Note that this is code by me. Google suggests the following syntax:

Code:

<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>

... as shown here:
http://code.google.com/speed/page-speed/...rLoadingJS


If everything is implemented correctly, then the result is nice. As shown here:
http://www.webpagetest.org/result/111121...1/details/

Note that javascript file is downloaded ONLY after "document complete" event! Win!

Hope this helps

[Joel]

First thanks for your time (see you answered 2 of my questions!)

I tested with Google's suggestion, and the JS didn't work, maybe I did it wrong, that's why I asked for more specific help using our code as an example.
for example here is some code we use:

Code:

<script type='text/javascript' src='/images/css/jquery.autocomplete.js'></script>

<script type="text/javascript">
(function($) {
$().ready(function() {

    function formatItem(row) {
        return row[0] + " (" + row[1] + ")";
    }
    function formatResult(row) {
        return row[0].replace(/(<.+?>)/gi, '');
    }
    $('#suggest4').autocomplete('/index.php?action=autocomplete', {
        width: 300,
        matchContains: true,
        formatItem: formatItem
        }).result(function(event, row) {
               location.href = "/" + row[2] ;
        });

    $("#clear").click(function() {
        $(":input").unautocomplete();
    });
});
})(jQuery);
</script>

which part should go into here:

Code:

<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>

I didn't test with your code, because as per w3schools

Quote:The defer attribute is only supported by Internet Explorer.

http://www.w3schools.com/tags/att_script_defer.asp

Thanks so much for your time!