I was doing some research today on preventing slow/flakey external javascript files from 3rd-party sources from slowing down your perceived page load times. Things like tracking pixels and chat widgets are generally loaded via script tags, and if you’re not careful then one rogue provider can create a really poor experience for users on your site.

I don’t have any original thoughts here, just a collection of resources which I found that summarize techniques I’ve heard about in the past but not had to use directly until now.

General best practices

I hate that phrase, but oh well.

• According to Google, including specific info on minimizing RTT (round trip time).
• According to Yahoo

Async function queuing

That’s the technique of defering loading the bulk of a 3rd party library, and while it’s loading having client code add what it wants to do to a ‘queue’ of deferred operations which are then executed once the 3rd party library eventually loads. Google’s async analytics tag is a well-known example of this technique.

It’s well described in this StackOverflow post.

Using ‘async’ and ‘defer’ script tag attributes

As usual, Ilya Grigorik does a great job covering how to do async script loading.

Chris Coyier at CSS-Tricks covers similar ground too.

Don’t forget that async and defer are not available in all browsers. Note that as Ilya mentions in his article, you should add both defer and async for a safe and backwards-compatible approach.