--- layout: post title: "Speeding Up Async Snippets" date: 2022-10-12 20:48:12 categories: Web Development main: "https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/wp-content/uploads/2022/10/waterfall-async-snippets-before.png" meta: "Async snippets used to improve performance, but now they’re a legacy anti-pattern. How do we handle them now?" faq: - question: "What is an async snippet?" answer: "Async snippets are a JavaScript design pattern largely employed by third parties to inject subsequent scripts in an asynchronous manner. Async snippets are a legacy implementation designed to sidestep a lack of support for the HTML async attribute for script elements. Compared to the async attribute, async snippets are considered an anti-pattern and should be avoided." --- If you’ve been a web developer for any reasonable amount of time, you’ve more likely than not come across an _async snippet_ before. At its simplest, it looks a little like this: ```html ``` Here, we… 1. create a ` ``` How is this any different to just loading the file normally? What have we done that makes this asynchronous? Where is the magic?! Well, the answer is _nothing_. We didn’t do a thing. It’s [the spec which dictates](https://html.spec.whatwg.org/multipage/scripting.html) that any scripts injected dynamically should be treated as asynchronous. Simply by inserting the script with a script, we’ve automatically opted into a standard browser behaviour. That’s really the extent of the whole technique. But that begs the question… can’t we just use the `async` attribute? As a bit of additional trivia, this means that adding `script.async='async'` is redundant—don’t bother with that. Interestingly, adding `script.defer=defer` does work, but again, you don’t need an async snippet to achieve that result—just use a regular ` ``` …we can literally just swap this out for the following **in the same location or later** in your HTML: ```html ``` These are functionally identical. If you’re feeling nervous about completely replacing your async snippet, or the async snippet contains config variables, then you can replace this: ```html ``` …with this: ```html ``` This works because, even though the ` ``` In this instance, the async snippet is less about working around a performance issue, and more about a dynamism issue. The only optimisation I would recommend here—if the third party is important enough—is to complement the snippet with a `preconnect` for the origin in question: ```html ``` ### Injecting Into a Page You Don’t Control The second most probable need for an async snippet is if you are a third party injecting a fourth party into someone else’s DOM. In this instance, the async snippet is less about working around a performance issue, and more about an access issue. There is no performance enhancement that I would recommend here. [Never `preconnect` a fourth, fifth, sixth party.](https://speakerdeck.com/csswizardry/more-than-you-ever-wanted-to-know-about-resource-hints?slide=45) ## Takeaways There are two main things I would like people to get from this post: 1. **Specifically, that async snippets are almost always an anti-pattern.** If you’re utilising them, try move yourself onto a new syntax. If you’re responsible for one, try updating your service and documentation to use a new syntax. 2. **Generally, don’t work against the grain.** While it might feel like we’re doing the right thing, not knowing the bigger picture may leave us working against ourselves and actually making things worse.