![]() |
how to defer parsing javascript - Printable Version +- WebPagetest Forums (https://www.webpagetest.org/forums) +-- Forum: Web Performance (/forumdisplay.php?fid=3) +--- Forum: Optimization Discussions (/forumdisplay.php?fid=5) +--- Thread: how to defer parsing javascript (/showthread.php?tid=7897) |
how to defer parsing javascript - Joel - 11-15-2011 04:47 AM 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) RE: how to defer parsing javascript - pmeenan - 11-15-2011 06:06 AM Here is the documentation that Page Speed provides on the check: http://code.google.com/speed/page-speed/docs/payload.html#DeferLoadingJS 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. RE: how to defer parsing javascript - Joel - 11-15-2011 06:44 AM 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 RE: how to defer parsing javascript - pmeenan - 11-15-2011 07:04 AM 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 RE: how to defer parsing javascript - Joel - 11-15-2011 07:35 AM 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 RE: how to defer parsing javascript - andydavies - 11-15-2011 10:20 PM 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') RE: how to defer parsing javascript - laboot - 11-22-2011 07:27 AM 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/docs/payload.html#DeferLoadingJS 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 ![]() RE: how to defer parsing javascript - Joel - 11-22-2011 10:25 AM 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! |