Safest way to include/embed third party javascript

Question

Good day all, I've recently taken over a website that has about 10 third party javascripts embeded into each page load. These include but are not limited to analytics, chat system, A/B testing, reviews, fonts, product recommendations, libraries (jquery) and custom code for the site. Some of these are hosted locally, many are hosted by the company that created them.

Can I get some input on the best way to load all these and allow them all to function 100% properly but prevent them from causing delays for my visitors.

I found two solutions that seemed promising but have not heard anything about them / used them so I reluctant to implement. I would appreciate any thoughts/help. Thanks!!!

http://www.olark.com/spw/2011/10/lightningjs-safe-fast-and-asynchronous-third-party-javascript/

Detecting and terminating slow third party javascript requests [ http://headjs.com/ ]

Answer 1

这是一篇关于async主题的不错的博客文章

Answer 2

For asynchronously loading javascript, you can use the HTML5 async attribute

<script async src="http://third-party.com/resource.js"></script>

You can also use the classic way but it's less recommended nowadays.

(function(d, t) {
    var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
    g.src = '//third-party.com/resource.js';
    s.parentNode.insertBefore(g, s);
}(document, 'script'));

Answer 3

There are only two ways for that: Either add the async=true parameter to the script tag, or do as Google recommends - move the reference beyond the screen fold of your text, ideally to the foot.

Firefox has this useful Browser Console which shows some sources of delays. You'll likely have to make compromises and give up some of the hogs anyway.

If you haven't done it already, enable HTTP compression, especially for .js files. Curiously, this helps even on LAN where the connection doesn't seem to limit things.