Increase Website Load Speed by Compressing Data with Gzip and Pako

Background

Did you know that being fast is good? At least in the world of web development.

Walmart reports that every 100 milliseconds improvement in its website load time results in up to a 1% increase in revenue. Considering that Walmart has 50+ billion USD revenue in e-commerce, wa can say that speed is money.

Context

As I have been sharing blogs/ works frequently on my website, it came to my attention that the website load speed was getting worse as the website got bigger. Look at the most recent Lighthouse Report for this game on the website:

This performance is embarrassing to say the least.

As I'm on a quest to increase the Google Search clicks to my website to 1,000 per week, increasing speed is an essential component of this strategy.

While there are a lot of reasons why the speed performance is low, one thing that contributes majorly to this lag is the large files, as highlighted by the Lighthouse report:

What this report is telling us is that, I'm transfering 21MB worth of files when the webpage is opened, but I can reduce that size by 16 MB down to just 5 MB by compressing the files! Sounds to good to be true.

Let's actually implement text compression and see how it will help us reduce the amount of bytes transfered, and hopefully speed up the page.

Method

I have chosen the largest file served in this page, which is a JSON file named kango.json to see the effect of text compression.

You can see on the Network tab of the webpage that it is the largest file served in this session with a size of 3.1 MB. Let's do text compression to see how it works.

Zipping (Deflating) the File with Python

I created this JSON file in Python, and you need to make a small change to the section where you are saving the json file so that you save the compressed JSON file instead of the whole thing.

We use GZIP library to the compression on Python which has a very straightforward syntax.

dictionary = ['a' : 1, 'b': 2, 'c': 2]

## DONT USE THIS
with open("/path/dict.json", "w") as f:
    json.dump(dictionary, f, ensure_ascii=False)
    
## USE THIS
import gzip
with gzip.open("/path/dict.json.gzip", 'wt', encoding='UTF-8') as zipfile:
    json.dump(dictionary, zipfile)

Once you have the compressed file, put it in the location on your webpage where you used to keep the old JSON file. Now let's take a look at how we can read & decompress that file using JavaScript.

Unzipping (Inflating) the File with JavaScript

If you are using a framework like Vite, you'd read the file as is. However, now we will postpone the reading to the "onMount" as some of the functions needed for unzipping run only on client side.

// DONT USE THIS ANYMORE
<script>
import dictionary from 'path/dictionary.json';
</script>


// USE THIS
<script>
import { onMount } from 'svelte';

// Download pako.min.js from below link and save it in your webpage folder & import it
// https://github.com/nodeca/pako/blob/master/dist/pako.min.js
import 'utils/pako.min.js';

onMount(() => {
	// Create a new HTTP Request
	let request = new XMLHttpRequest();

	// Get the Zipped file we saved earlier in Python
	request.open('GET', '/path/dict.json.gzip', true);
	request.responseType = 'blob';
	request.onload = function () {

		// Once the request is loaded read the contents of the zip file as ArrayBuffer
		let reader = new FileReader();
		reader.readAsArrayBuffer(request.response);

		reader.onload = async function (e) {

			// Get the read file
			let result = e.target.result;

			// KEY PART: INFLATE THE FILE BACK TO STRING USING PAKO
			result = pako.inflate(new Uint8Array(result), { to: 'string' });

			// Convert string to object
			dictionary = await JSON.parse(result);

		};
	};
	request.send();
});

</script>

By changing our code from simply importing the JSON file, to reading the zipped file when the component is mounted and inflating back, the resulting dictionaries should be the same.

Result

Now let's see how much size we have saved by just making this simple change.

As you can see, the kango.json file does not appear as the biggest file anymore. Its size has gone down from 3.1 MB to 659 KB! This is a compression ratio of roughly 5x!

Although the code has become slighly longer with the zipped version, we can see significant benefits with zipping.

Moreover, zipped files are read faster by the browser, so the load speed will be much faster than the unzipped file. If you look at the network tab, the load time of this file has gone from 128ms to 10ms! This is 13x load time improvement!

If we were to assume the Walmart findings to be true, by just zipping your files with above approach, you can expect to increase your revenue by at least 1%.

Conclusion

In this blogpost, we have devised code to zip a large JSON file and shrink its size by 5x. This helped us improve the load speed of that file by 13x. While zipping the file on Python is straightforward, unzipping in JS is convoluted so feel free to use the code I have developed above.

By zipping your files, you can increase your page speed which will help increase user engagement and conversion.

Any questions/ comments? Let me know below.

Happy hacking!