What is WebAssembly? And Can It Speed Up Your Site?

WebAssembly is a really cool project that compiles other code languages so that they can run in the browser with JavaScript. It is significantly faster than many of its competitors. It lets more data-and-processing-heavy sites run more smoothly and quickly than otherwise possible. In this article, we’ll take a look at the technology from a top-down perspective–going over what it is and why you may want or need it.

What is WebAssembly?

In technical terms, WebAssembly is a binary encoding format that, as the original documentation says, “enables small files, fast decoding, and reduced memory usage.” It was designed to take code from the machine level. Just like languages such as C or C++ (or R, etc.). Then it compiles that into WebAssembly (or wasm), which then gets executed in the browser like JavaScript. Basically, it takes the executable code and runs it in the browser.

What this means for developers is that you can work more directly with the browser as though you’re interacting with the user’s computer on a machine level. You no longer have to go through the sometimes-convoluted steps that JavaScript requires. WASM lets you run full-fledged games and apps in the browser as though they were running on the machine itself. It’s almost like there’s an ideal virtual machine executing the commands. There are examples of Doom 3 being run solely in WebAssembly, as well as Figma.

Even if you don’t have a project quite so ambitious, WebAssembly deserves a look because it can speed up pretty much any JS-heavy site because it can keep necessary calculations away from JavaScript and into the hands of a tool that handles them better.

Why WebAssembly instead of JavaScript?

Well, first of all, don’t think about it as an either/or decision. It’s not. WebAssembly was designed to work alongside JS, not replace it. You can have some scripts run in JS, while others are executed via WASM. Additionally, it’s not a fringe technology. As of this writing, Chrome, Firefox, Safari, Android, and even Microsoft Edge (!) support WebAssembly.

That’s part of the reason looking into WebAssembly for WordPress and other web apps is so appealing. It has already become a coding standard that’s been adopted by every major player. Including Microsoft. And we all know how hesitant they can be about this kind of thing. So if there ever was a reason to start considering how you can use it, that’s it.

Also, we know that JavaScript can do some amazing things (look at the new WP Block Editor or Divi, both written in React.js). But it’s not great at everything. WebAssembly gives you the tools to render high-end visuals and animations to go along with the features and interaction you want out of JavaScript.

Until WebAssembly, if you wanted to do any of that and split your resources and computation, browser plug-ins and extensions would be required. Now, working alongside HTML5 and JavaScript, WASM makes it so that everything (roughly) that you could want to do can be compiled, executed, and rendered within the browser itself. Without a loss in performance or power.

Using WASM

To begin with, you’re going to need some sort of code in C, C++, R, etc. Then, you need to go download the Emscripten SDK, which lets you take that code and compile it to WASM.

Many of you are web developers, however, and may not have that level of polyglotitude. That’s okay. You can also write directly into the WebAssembly text style, or you can actually work your TypeScript into WASM.

With that done, Mozilla’s documentation puts it best:

The [Emscripten] generated HTML document loads the JavaScript glue file and writes stdout to a <textarea>. If the application uses OpenGL, the HTML also contains a <canvas> element that is used as the rendering target. It’s very easy to modify the Emscripten output and turn it into whatever web app you require.

Then you just run it like any other web app within your environment or CMS. Additionally, there’s an ongoing discussion among contributors about being able to import WASM scripts as modules directly, just like you can with ECMAScript (ES6) already. You’ll just indicate the script type=’module’ and that the src will be example.wasm instead of example.js.

So is WebAssembly For You?

Honestly, for the typical WordPress user, the blogger and content creator and small business owner, WebAssembly probably won’t ever concern you. And while yes, it can totally speed up your site because of how it handles calculations, it probably isn’t worth grabbing a dev and having them rework things just for that. Most WP sites aren’t heavy-duty enough to require the compression and calculations that make WebAssembly shine.

But if you’re a developer who is using the web as a home for your web app (and by this, we mean progressive web apps, not just storefronts and content delivery services unless you are super popular), WebAssembly will probably make your website run exponentially faster. If you have lots of interactions and graphics rendering, check out WASM. It will make it better. If you provide real-time analytics and data management (like CRM software), WebAssembly was designed for you.

Basically, if you run a ton of calculations at the same time your users interact with the website, WebAssembly is worth a look. If you call a lot of separate JavaScript files and modules being called, take a look into WebAssembly. There’s a very good chance that it will make your site improve a lot, not just on the back-end and easing up on resources, but on the users’ ends, too. They will have a much better experience with your product.

Do you have experience with WebAssembly? What kinds of projects do you find best for the format?

Article featured image by Sammby /shutterstock.com