The Hidden Cost of Third-Party Embeds

Climate concerns are pushing developers to scrutinize every byte they ship. Social media embeds are a prime culprit: a single YouTube embed can load roughly 600kB of JavaScript even if the visitor never presses play. And Twitter embeds pull in a cascade of requests, some of which include videos embedded within tweets, ballooning page weight well beyond what's visible.

To put this in perspective, embedded content affects more than page size. Measuring total blocking time (TBT) on a mobile connection reveals that Twitter and YouTube embeds can block the main thread during initial load, delaying interactivity. Instagram is somewhat better as it loads asynchronously by default, but its footprint is still meaningful. Since caching is efficient for repeat visits, these costs are mostly a first-load problem — but that first impression matters for both user experience and energy use.

Should the Embed Exist at All?

The most effective fix is to question whether an embed is necessary in the first place. Content management systems make it trivial for editors to drop in feeds and posts, but that ease doesn't justify the performance tax. Before adding an embed, ask what the business objective is. An auto-updating Twitter feed might be a distraction rather than a value-add, and a client's goals could be met with better alternatives:

  • Curated testimonials — Hand-picked quotes from customers in a designed component often outperform a live feed.
  • Simple links — A text summary linking to the original post preserves content without loading third-party code.
  • Webmentions — If the goal is to show reactions to your content, Webmentions offer a lightweight way to display mentions from across the web.

API and Video Alternatives

When live content is essential, fetching data via an API gives you full control over rendering. Displaying only the text from recent tweets, for instance, avoids the heavy multimedia payloads that Twitter's embed script pulls in. This approach takes more development effort but yields a page that's strictly your own.

For short or looping videos, native HTML <video> can replace YouTube embeds entirely. You get complete control over controls and playback behavior, which is especially valuable for background footage. Long-form video is a different story: YouTube's CDN compression and edge delivery often make an embed the greener choice for large files, as content travels a shorter distance from server to viewer.

Lazy Loading and Facades

If embeds must stay, lazy loading is the minimum viable mitigation. For YouTube, the loading="lazy" attribute on the iframe works in most browsers, though Firefox and Safari have incomplete support. Twitter presents a harder problem because its embed script injects the iframe post-hoc, so you can't apply the attribute in markup.

Cross-browser lazy loading of tweets is possible with libraries like Lozad.js, which observes the viewport and initializes the embed only when the user scrolls near it. This pattern can extend to native video as well.

For WordPress sites, plugins such as WP Rocket's Lazy Load handle video embeds effectively. Comparable plugins for Twitter or Instagram embeds are harder to find, which pushes the burden onto custom solutions.

An alternative strategy is the "facade": show a static screenshot of the post, then swap in the real embed only if the user interacts. This is a manual process — you can capture screenshots yourself or use a service like Tweetpik. Always include alt text so the content remains accessible to screen readers.

Import on Interaction

A more robust generalization is the import-on-interaction pattern: delay loading non-critical scripts until the user clicks the component. This is a solid fit not only for video embeds, but also for chat widgets and maps. A minimal vanilla-JS implementation works like this:

See the Pen [Click to load video [forked]](https://codepen.io/smashingmag/pen/abVzbXR) by Michelle Barker.

See the Pen Click to load video [forked] by Michelle Barker.

This approach has a drawback: after the script loads, the user must click again to actually play the video. Several libraries already handle this in a more polished way, so you don't need to reinvent the logic:

  • lite-youtube-embed
  • lite-youtube
  • lite-vimeo-embed
  • lite-vimeo

The energy math of the web is tied to our code choices. Social embeds are a visible, measurable area where a little extra care can pay off both in reduced carbon impact and a snappier, more inclusive experience for every visitor.

Share Buttons: Cutting The Fat

“Click-to-share” social widgets suffer from the same problem as embeds: they drag along a substantial amount of JavaScript for what is, in practice, a rarely used feature. Despite how heavily these tools are marketed, concrete statistics on their usage are difficult to find, and the numbers that do exist suggest users largely bypass them, preferring to copy and paste a URL into their own apps.

Lighter-Weight Alternatives

If a share function is genuinely needed, the leanest option is the Web Share API. Using the navigator.share() method, you can share a URL or files (images, videos, PDFs), letting the user pick from their installed apps. Mobile browser support is decent, though desktop support remains patchy.

navigator.share({
  title: 'Smashing Magazine',
  text: 'Web development news and tutorials',
  url: 'https://www.smashingmagazine.com/'
})

The API is easy to guard: check for support with navigator.canShare() first, then hook the method up to a click handler. This trades the familiar, branded share sheet for a native look, but it costs almost nothing in performance.

See the Pen [Web Share API [forked]](https://codepen.io/smashingmag/pen/wvPBBBg) by Michelle Barker.

See the Pen Web Share API [forked] by Michelle Barker.

For a more conventional cross-browser experience without the bloat, an NPM package such as share-buttons is a better fit. It offers 19 sharing options and loads far less JavaScript than the big vendor widgets, with the added bonus of full customization.

No JavaScript At All

What’s often missed is that share links work perfectly well without a single line of JavaScript — you only need the correct URL. Helper sites like sharingbuttons.io and simpleshare.io build those links for you, and the former also provides ready-made CSS to match the look of standard share buttons. As Max Stoiber’s Sharing Buttons site puts it:

“They load incredibly fast (they only use a single HTTP request), don’t block your website from rendering, are accessible and don’t track the user.”

There’s a minor risk that a social network might change its sharing URI down the line, requiring a manual update, but that’s a trade-off that seems well worth it.

More Resources

Smashing Editorial