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
asyncattribute execute at the first opportunity after they finish downloading and before the window’s load event. - Scripts with the
deferattribute 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.
<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">
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.
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.