When we’ve noticed that our app was responding slowly, we tried the usual optimisations. But the effect wasn’t really satisfying. As it turned out, the slowest part of our application was uploading files. But is it even possible to make uploading faster?

How about a brief introduction before we get our hands dirty? If you’re in a web applications business, you’ve probably faced some issues with your app not being responsive enough. The bottleneck is usually caused by one of the following:

Poorly optimised code

Servers and clients’ devices running slow

Bad network connection

The first one, whether it’s a legacy server code, non-optimal database queries or some browser-blocking JavaScript, can usually be tracked and fixed with relative ease (easy as “I know what should be done”, not necessarily “it’s a piece of cake”).

What if your code is already top-notch quality, but your servers begin to have trouble serving all the people who use your application? It actually sounds like quite a good sign for you and your business. You’ll probably end up switching to more powerful servers to handle all the incoming traffic. Or maybe it’s just a high latency issue? Then a Content Delivery Network (CDN) might be what you need.

Client devices being too slow is usually a non-issue in case of most web applications, because almost any device capable of running a web browser should provide a decent experience to the user.

Every article about the Internet seem to have a photo of a router and network cables ¯\_(ツ)_/¯

We’re now left with only one possible cause: poor network connection. Thankfully download speeds are getting better, but you can still make your website load faster with assets minification and compression. Any modern web server is capable of serving gzipped files, which allows clients to download less data to see your website (and if you’re not gzipping yet, it’s probably a good time to consider doing so). But what if you want faster responses the other way around?

Welcome to the Dark Grounds of Uploading

What is so dark about it? For starters, if we were to compare download and upload speeds we will find out that a lot of people use asymmetric Internet connection (no source for this, but you’re also one of them, aren’t you?). And the asymmetry means upload speeds up to 10 times slower than download. So, while 60Mbps connection is not bad at all, 6Mbps upload sounds rather slow. This is actually not even 1MB/s.

This is what uploading 160MB file at 8Mbps feels like. Just looking at it is frustrating, isn’t it? ლ(ಠ_ಠლ)

Moreover, unlike servers, browsers have no native way to compress data before uploading. So here we are, stuck with slower network speeds and bigger files, or… are we?

We came up with a simple idea to solve this problem. While we can’t force people to get a faster connection, we can try to send less data — the same way we do it on servers. But how can we compress data in a browser before uploading?

Let’s Meet Pako

What is pako? According to the description, it’s a zlib port to javascript, very fast! In other words we’ve just equipped browsers with a power of gzipping data — this allows us to turn an idea into a working solution. And using it is almost a no-brainer. For example, before uploading a file, you would compress it with:

var compressed_file = pako.deflate(input_file);

That was easy, wasn’t it? But let’s stop for a second and talk about when you should actually do this.

We Can’t Compress Everything

OK, we can but sometimes it just doesn’t make sense. For example, you won’t make images or videos any smaller with gzip (at least most of them — standard formats like jpg or mpeg are already well compressed).

Text data, on the other side, compresses really well. Depending on a file, we may actually expect up to 90% compression ratio. And it’s not only plain text that can be packed that well. In our case it was 3D related files (obj, stl, etc). Maybe you’ve got some Excel spreadsheets or huge Photoshop files waiting to be uploaded? Go ahead, and try to compress them first. You might be surprised by how much space this can save you.