Link

How to Load 3rd-Party JavaScript Efficiently

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.

Direct Link →

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">

Comments

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

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

All comments are held for moderation and only published when on topic and not rude. You'll even get little stars if you do an extra good job.

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.

icon-search icon-link