How to Load 3rd-Party JavaScript Efficiently

Shared by
Published
Updated
Find your next web developer job
Associate Web Developer at Tokio Marine HCC (Houston, TX)

Milica Mihajlija from web.dev wrote an excellent article on how to use async,defer, preconnect & dns-prefetch with script tags to establish early connections, implement lazy-loading & optimize you those scripts are served.

Third-party scripts slowing down your page load? You’re not alone.

Milica Mihajlija from web.dev wrote an excellent article on how to use async,defer, preconnect & dns-prefetch with script tags to establish early connections, implement lazy-loading & optimize you those scripts are served.

The Quick & Dirty for Loading 3rd-Party Scripts

The main problem with third-party scripts is their loaded synchronously causing a delay in the DOM construction and rendering. This is why you should always load these scripts asynchronously unless the script has to run before the page can be rendered. This is done with the async and defer attributes.

What’s the difference between async and defer?

  • Scripts with the async attribute execute at the first opportunity after they finish downloading and before the window’s load event.
  • Scripts with the defer attribute execute after HTML parsing is completely finished, but before the DOMContentLoaded event
<script async src="script.js">
<script defer src="script.js">

What’s the difference between preconnect and dns-prefetch?

rel="preconnect" informs the browser that your page intends to establish a connection to another origin, and that you’d like the process to start as soon as possible. When the request for a resource from the pre-connected origin is made, the download starts immediately.

Caution: Only preconnect to critical domains you will use soon because the browser closes any connection that isn’t used within 10 seconds. Unnecessary preconnecting can delay other important resources, so limit the number of preconnected domains and test the impact preconnecting makes.
<link rel="preconnect" href="https://cdn.example.com">

rel="dns-prefetch" handles a small subset of what is handled by link rel="preconnect". Establishing a connection involves the DNS lookup and TCP handshake, and for secure origins, TLS negotiations. DNS-prefetch instructs the browser to only resolve the DNS of a specific domain before it has been explicitly called.

<link rel="dns-prefetch" href="http://example.com">

Did you find How to Load 3rd-Party JavaScript Efficiently useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on facebook

Stay updated.

Get a weekly email with the latest trends in web development & SEO.

Write a guest post.

Have an interesting article or idea? Become a guest blogger & pitch me your concept today.

2 comments on “How to Load 3rd-Party JavaScript Efficiently”.

# Aug 29, 2019

Added to quick links! Thanks for this solution. Does preconnecting work with jQuery?

# Aug 29, 2019

Yup, works with any source as long as you’re using it within 10 seconds otherwise the browser will close the connection.

Join the conversation.

Your email address will not be published. Required fields are marked *

All comments posted on 'How to Load 3rd-Party JavaScript Efficiently' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.