GzipとPakoでデータを圧縮してWebサイトのローディング速度を上げる方法

背景

速いことは良いことだと知っていましたか？少なくともウェブ開発の世界ではそうです。

Walmartは、ウェブサイトの読み込み時間が100ミリ秒改善するごとに収益が最大1%増加することを報告しています。Walmartのeコマース収益が500億ドル以上であることを考えると、速度はお金だと言えます。

コンテキスト

ウェブサイトでブログや作品を頻繁に共有しているうちに、ウェブサイトの読み込み速度がサイトの規模が大きくなるにつれて悪化していることに気づきました。以下のこのゲームの最近のLighthouseレポートを見てください：

このパフォーマンスは非常に恥ずかしいです。

Google検索のクリック数を週に1,000に増やすことを目指しているため、速度の向上はこの戦略の重要な要素です。

速度パフォーマンスが低い理由はいくつかありますが、Lighthouseレポートで強調されているように、遅延の主な原因の一つは大きなファイルです：

このレポートが教えてくれるのは、ウェブページを開いたときに21MBのファイルを転送しているが、ファイルを圧縮することでそのサイズを16MB減らしてわずか5MBにすることができるということです！信じられないほど良い話です。

実際にテキスト圧縮を実装して、転送されるバイト数を減らし、ページの速度を向上させましょう。

方法

このページで提供されている最大のファイルであるJSONファイルkango.jsonを選んでテキスト圧縮の効果を見てみます。

ウェブページのネットワークタブで、このセッションで提供されている最大のファイルが3.1MBであることがわかります。テキスト圧縮を行ってその効果を確認しましょう。

Pythonでファイルを圧縮（Deflate）

このJSONファイルをPythonで作成し、JSONファイルを保存するセクションで少し変更を加えて、全体のファイルではなく圧縮されたJSONファイルを保存するようにします。

Pythonでの圧縮には非常に簡単な構文を持つGZIPライブラリを使用します。

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)

圧縮されたファイルを取得したら、古いJSONファイルを置いていた場所に配置します。次に、そのファイルをJavaScriptで読み取って解凍する方法を見てみましょう。

JavaScriptでファイルを解凍（Inflate）

Viteのようなフレームワークを使用している場合、そのままファイルを読み取ります。しかし、必要な関数の一部がクライアント側でのみ実行されるため、「onMount」での読み取りを遅延させます。

// 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>

コードを単にJSONファイルをインポートするのではなく、コンポーネントがマウントされたときに圧縮ファイルを読み取って解凍するように変更することで、結果として得られる辞書は同じになるはずです。

結果

この簡単な変更を行うだけで、どれだけサイズを削減できたかを見てみましょう。

ご覧のとおり、kango.jsonファイルはもはや最大のファイルではありません。そのサイズは3.1MBから659KBに減少しました！これは約5倍の圧縮率です！

圧縮バージョンではコードが若干長くなりましたが、圧縮による大きなメリットが見られます。

さらに、圧縮されたファイルはブラウザでの読み込みが速くなるため、未圧縮ファイルよりも読み込み速度がはるかに速くなります。ネットワークタブを見ると、このファイルの読み込み時間が128msから10msに減少しました！これは13倍の読み込み時間改善です！

Walmartの調査結果が正しいと仮定すると、上記の方法でファイルを圧縮するだけで収益が少なくとも1%増加することが期待できます。

結論

このブログ投稿では、大きなJSONファイルを圧縮してそのサイズを5倍縮小するコードを考案しました。これにより、そのファイルの読み込み速度が13倍向上しました。Pythonでのファイル圧縮は簡単ですが、JSでの解凍は複雑なので、上記のコードを自由に使用してください。

ファイルを圧縮することで、ページ速度を向上させ、ユーザーエンゲージメントとコンバージョンを増やすことができます。

質問やコメントはありますか？以下にお知らせください。

ハッキングを楽しんでください！