how to defer parsing javascript
|
11-15-2011, 04:47 AM
Post: #1
|
|||
|
|||
how to defer parsing javascript
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) |
|||
11-15-2011, 06:06 AM
Post: #2
|
|||
|
|||
RE: how to defer parsing javascript
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. |
|||
11-15-2011, 06:44 AM
Post: #3
|
|||
|
|||
RE: how to defer parsing javascript
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 |
|||
11-15-2011, 07:04 AM
Post: #4
|
|||
|
|||
RE: how to defer parsing javascript
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 |
|||
11-15-2011, 07:35 AM
(This post was last modified: 11-15-2011 09:05 AM by Joel.)
Post: #5
|
|||
|
|||
RE: how to defer parsing javascript
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 |
|||
11-15-2011, 10:20 PM
Post: #6
|
|||
|
|||
RE: how to defer parsing javascript
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') Andy Using WebPageTest - http://usingwpt.com/ |
|||
11-22-2011, 07:27 AM
Post: #7
|
|||
|
|||
RE: how to defer parsing javascript
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"> Note that this is code by me. Google suggests the following syntax: Code: <script type="text/javascript"> ... 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 ![]() |
|||
11-22-2011, 10:25 AM
(This post was last modified: 11-22-2011 10:30 AM by Joel.)
Post: #8
|
|||
|
|||
RE: how to defer parsing javascript
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> which part should go into here: Code: <script type="text/javascript"> 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! |
|||
« Next Oldest | Next Newest »
|
User(s) browsing this thread: 2 Guest(s)