Embedding and web termsUpdated
Script tag (async and defer)
Also called: <script>, async attribute, defer attribute, async script
Definition
A script tag, <script>, adds JavaScript to a web page. By default an external script pauses HTML parsing while it downloads and runs; the async and defer attributes let the browser keep parsing and run the script later.
No attribute vs async vs defer
Both attributes only apply to scripts with a src. On an inline script they do nothing, and module scripts are deferred by default. If several of your scripts depend on each other, defer keeps them in order; async doesn't.
| Neither | async | defer | |
|---|---|---|---|
| Blocks HTML parsing | Yes, while it downloads and runs | No, downloads in parallel | No, downloads in parallel |
| Runs | Immediately | As soon as it has downloaded | After parsing, before DOMContentLoaded |
| Order between scripts | Document order | Not guaranteed | Document order |
| Suits | Code later markup depends on right away | Independent code such as embed loaders | Code that needs the whole page |
How embed loaders use it
An embed loader doesn't depend on your other scripts, so async is the natural choice: the page keeps rendering while it downloads. LinkedInEmbed's script snippet is a placeholder <div> followed by <script src="…/embed.js" async>. Once loaded, the script finds each placeholder and creates the widget's iframe inside it. If the loader ends up on a page twice, it only mounts any new placeholders.
Single-page apps change pages without a full reload, so the loader has to be told to look again; the React and Next.js guide shows the one-line call.
When a script doesn't run
- The site builder or plan strips <script> tags on save or publish.
- A Content Security Policy doesn't list the script's domain in script-src.
- An optimization plugin delays, combines or rewrites third-party scripts.
- You're looking at the editor, which doesn't run custom code, instead of the published page.
- Only the <script> was pasted, without the placeholder element it looks for.
Sources
Related terms
- Embed code
- Embed code is a snippet of HTML you paste into a web page to display content hosted somewhere else, such as a video, a social media post or a widget. It's usually an iframe tag, a script tag with a placeholder element, or a combination.
- Content Security Policy (CSP)
- A Content Security Policy (CSP) is a set of rules a website sends to the browser, usually in a Content-Security-Policy header, saying which sources the page may load scripts, frames, images and other resources from. Anything not allowed is blocked.
- iframe
- An iframe (inline frame) is an HTML element, <iframe>, that displays a separate web page inside the current one. The embedded page loads from its own address and runs as its own document, kept apart from the host page's styles and scripts.
- Core Web Vitals
- Core Web Vitals are three metrics that describe a page's real-world user experience: Largest Contentful Paint for loading, Interaction to Next Paint for responsiveness and Cumulative Layout Shift for visual stability. Each has a published “good” threshold.
Related
Show your LinkedIn on your website
Paste a LinkedIn URL and embed it with one snippet. Free plan, no credit card.
Put your LinkedIn on your website today
Create your first widget in about two minutes. Free plan, no credit card required.