September 21st, 2023
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.
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.