Faster dashboards with web components

David Kokkelink

Hi, this is David with Datawrapper! For today’s Weekly Chart, I’d like to take a look at a new feature I’m very excited about: the ability to embed Datawrapper visualizations as web components.

If you’re an avid reader of Datawrapper’s blog, you might have already read yesterday’s announcement: There’s a new and improved way to embed Datawrapper visualizations.

For the longest time, Datawrapper (and most other tools that allow you to embed interactive content) has used iframes to embed into other websites. Iframes are very versatile, but they have one big disadvantage, and that is their performance. When using iframes, every single embed is essentially its own little website within your article or website. This provides a clear separation between the embed and the surrounding webpage. It has a drawback though: the more iframe embeds you include in your website, the more resources your browser has to load and display, which prolongs loading time and makes your website respond more slowly. “Resources” are the underlying bits of code that make up your website: the JavaScript, CSS, markup, and other data. Less resource use means a faster website, and faster is always better, so this is something we set out to improve.

With Datawrapper’s new web component embedding, this is turned on its head: rather than each embed bringing all its own resources with it, visualizations are able to share resources. This means, you can add more visualizations to a page while retaining great performance.

To test this, I created a dashboard of six visualizations, representing a typical election results page. Then, I measured the total page size of my dashboard after adding each visualization:

In this chart, the y-axis shows the total amount of data that needs to be transferred to display the webpage, and the x-axis represents the number of visualizations on the page. As you can see, as soon as you embed more than one chart, web components are already at a 30% advantage compared to iframes! This effect compounds when more embeds are added to a page.

All in all, we believe web components to be the future of rich embeds in websites, and encourage everyone to seek out alternatives to iframes to improve your website’s loading speed.

That’s it from me for this week! Next week, you’ll hear from our writer Rose again.

---

David Kokkelink

(he/him, @DavidKokkelink) is a co-founder and co-CEO of Datawrapper. Originally a software developer, he works across our customer-facing and product development teams to make sure Datawrapper is headed in the right direction. David lives in Berlin.

Liked this article? Maybe your friends will too:

Twitter Facebook