jquery - Handling third-party javascripts quickly, so pages don't appear slow -

jquery - Handling third-party javascripts quickly, so pages don't appear slow -

i've been doing testing http://www.webpagetest.org/ today see scripts slowing downwards page loads. long story short, i've discovered third-party scripts causing noticeable slowdown in loading. i'm loading them @ bottom of page, using async , defer ( see https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/ ).

i believe main reason slowdown not in grabbing files third-party, in running various scripts, side-by-side mine.

i'd maintain scripts, want them loaded behind scenes, after scripts have loaded, , no noticeable performance decrease in browser. illustration don't want browser "stutter" or jump around if start scrolling downwards while third-party scripts loading, or various other minor annoyances.

has tackled before , come solution? far i'm thinking best alternative might load third-party scripts using jquery.getscript(), after scripts have finished (literally @ bottom of 1 of .js includes). still, may load them concurrently create browser sluggish sec or two.

some more details on how did testing, interested:

grabbed source code of product page, threw test php page modify @ will surrounded each script on/off flag such if ( isset( $_request["allowgoogleanalytics"] ) ) { ran test scripts turned off in new tabs, ran more tests, turning scripts on 1 @ time by time own scripts turned on, pages taking 1.9 seconds load (first view) , less sec on repeat view. fine me. after turning on third-party scripts, pages taking @ to the lowest degree 3.1 seconds load (first load) much 3.9

the 3rd party scripts in question are:

facebook "like" button google +1 button pinterest google trusted stores

none of these particularly bad on own, @ 1 time combine , take long, , create browser sluggish.

you can queue scripts, if problem in simultaneous load. load should started on document ready (i see using jquery, utilize in example). illustration code (tested locally, works).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> var scripts2load = [ "http://apis.google.com/js/plusone.js", "http://connect.facebook.net/en_us/all.js#xfbml=1" ]; function loadnext() { var url = scripts2load.pop(); if (url) { $.ajax({ url: url, cache: true, crossdomain: true, datatype: "script", success: loadnext }); } } $(loadnext) </script>

javascript jquery facebook pinterest google-plus-one