how to defer parsing javascript

Web Performance Optimization Discussions
1

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

but I have no clue “how to defer parsing of javascript” please help me understand it:huh:
(also I came across HTML script defer Attribute 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)

2

Here is the documentation that Page Speed provides on the check: Reduce the size of the above-the-fold content  |  PageSpeed Insights  |  Google Developers

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.

3

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

4

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

5

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 [hr]
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:dodgy:)

Thanks:)
[hr]
added: we do have a lot of background images yet spriteme has no suggestions

6

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

7

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]

[/code]

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

[code][/code]

… as shown here:

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

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

Hope this helps :slight_smile:

8

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]

[/code]

which part should go into here:

[code][/code]

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

[quote]The defer attribute is only supported by Internet Explorer.
[/quote]

Thanks so much for your time!