サイトを爆速化！テキスト圧縮でウェブサイトを高速化する方法

Enable Text Compression to Speed Up Your Website

テキスト圧縮は、ウェブサイト上のHTML、CSS、JavaScriptファイルなどのリソースのダウンロードを高速化する方法です。

場合によっては、圧縮によってファイルサイズを約70%削減でき、ページの読み込みが速くなり、ユーザーエクスペリエンスが向上します。

このガイドでは、自分のウェブサイトでテキスト圧縮を有効にする方法と、現在の圧縮状況を確認する方法を紹介します。

ウェブサイトでテキスト圧縮を使用すべきですか？
テキスト圧縮の種類
- Gzip圧縮
- Brotli圧縮
縮小化と圧縮の違いは何ですか？
- JavaScriptにおける縮小化の例
- CSSにおける圧縮の例
テキスト圧縮をいつ使用すべきですか？
テキスト圧縮を有効にする方法
圧縮が機能していることを確認する方法
結論

ウェブサイトでテキスト圧縮を使用すべきですか？

はい！誰かがあなたのウェブサイトを訪問すると、ブラウザはHTML、CSS、JavaScriptなど、必要なすべてのファイルをダウンロードする必要があります。これらのテキストベースのファイルは、特に最新のウェブアプリケーションでは非常に大きくなる可能性があります。

テキスト圧縮は、GzipやBrotliなどのツールを適用してファイルサイズを縮小してからネットワーク経由で送信します。ブラウザはその後、ユーザーのデバイス上でこれらのファイルを解凍します。

テキスト圧縮の利点には以下が含まれます：

読み込み時間の短縮：小さいファイルはより速くダウンロードでき、Core Web Vitalsを改善できます
帯域幅使用量の削減：転送されるデータが少なくなるため、あなたとユーザーの両方のコストが削減されます
SEOの向上：ページ速度は検索エンジンのランキング要因です

テキスト圧縮のデメリットは最小限であり、テキストベースの圧縮の使用を妨げるべきではありません。

サーバー上のCPU使用量の増加：圧縮には少し余分な処理能力が必要ですが、ほとんどのサーバーでは、これは完全に無視できる程度です
クライアント上のCPU使用量の増加：低性能デバイスでのファイルの解凍には少し時間がかかる場合がありますが（ミリ秒単位）、全体的な影響は非常に小さいです

ヒント

最新の圧縮アルゴリズムに対するブラウザのサポート不足を欠点として挙げていません。これは、ブラウザがAccept-Encodingヘッダーでこれらの圧縮アルゴリズムのサポートを通知するためです。

サーバーがブラウザが指定されたアルゴリズムをサポートしていないと判断した場合、代替の圧縮方法にフォールバックできます。

テキスト圧縮の種類

GZIPとBrotli圧縮は、最新のブラウザとウェブサイトを実行するほとんどのサーバー環境でサポートされています。

これらの2つのテスト（react-dom.jsとanimate.cssの非圧縮バージョンで実施）を考えてみましょう：

圧縮方法	オリジナルファイル	Brotli出力	Gzip出力
script.js.br	1.0MB	177KB（82.7%削減）	-
style.css.gz	76KB	-	8.4KB（88.9%削減）

この例では、Brotli圧縮によりscript.jsのサイズが82.7%削減され、Gzip圧縮によりstyle.cssのサイズが88.9%削減されています。

ヒント

これはGzipが常にBrotliより優れていることを意味するわけではありません。Brotliは一般的にファイルの圧縮により効果的ですが、この例では、CSSファイルはJavaScriptファイルよりも圧縮しやすかったのです。

Gzip圧縮

Gzipは最も広くサポートされている圧縮アルゴリズムであり、事実上すべてのブラウザと互換性があります。

Gzipの動作原理：

テキストファイル内の繰り返し文字列を見つける
それらを最初のインスタンスへのポインタに置き換える
さらなる圧縮のために追加のエンコーディングを適用する

Brotli圧縮

Brotliは、Googleによって開発されたより新しい圧縮アルゴリズムで、Gzipよりもさらに優れた圧縮率を提供します - 通常10〜20%小さくなります。

Brotliはより高度な圧縮技術を使用しています：

一般的なウェブパターンの事前定義された辞書
より良いエントロピーエンコーディング

縮小化と圧縮の違いは何ですか？

縮小化と圧縮は、ウェブサイト上のテキストファイルのサイズを縮小するための2つの異なる技術です。

JavaScriptにおける縮小化の例

縮小化はテキストファイルから不要な文字を削除し、ファイルタイプによっては、変数名をより短い名前に変更することも含みます。縮小化は圧縮の前に行われます。

縮小化前：開発者によって書かれた通常のJavaScript。

// 縮小化前
function add(argument1, argument2) {
  return argument1 + argument2;
}

縮小化後：変数名が変更された縮小化されたコード。

// 縮小化後
const add=(a,b)=>a+b;

CSSにおける圧縮の例

圧縮は、繰り返しパターンを見つけてそれらをより短い表現に置き換えることで、ファイルのサイズを縮小します。圧縮は縮小化の後に行われます。

圧縮前：開発者によって書かれた通常のCSS。

/* 小さなCSSの例 */
.box {
  color: blue;
  padding: 5px;
}

.btn {
  color: blue;
  padding: 5px;
}

圧縮後：有効なCSSではないが、サイズが小さくなった圧縮コード。

/* これは有効なCSSコードではありません */
.box { #CB; #P5; } .btn { #CB; #P5; }

パターン置換：クライアント（例えばブラウザ）は、圧縮されたファイルを解凍し、パターンを元の値に置き換えることができます。

パターン	置換
color: blue;	#CB
padding: 5px;	#P5

テキスト圧縮をいつ使用すべきですか？

テキスト圧縮は、ファイルがクライアントに送信される前に、レスポンスフェーズにおいてサーバーレベルで適用されるべきです。

サーバーランタイム時の圧縮に加えて、テキスト圧縮をサポートするCDNも使用すべきです。

サーバーレスポンスフェーズとCDN配信フェーズでの圧縮の使用が、テキストベースの圧縮を使用する最も一般的な方法です。ただし、非常に特定の要件がある場合は、ビルドフェーズ中にファイルを圧縮することもできます。

ヒント

この方法は、ビルドフェーズ中に画像が最適化される方法と同様です。

これは、デプロイ前にビルドプロセスの一部としてファイルを圧縮することを意味します。この圧縮を実行するために、基礎となるgzipとbrotli（これらのツールのインストール手順を参照）を使用できます。

テキスト圧縮を有効にする方法

ほとんどのサーバーで圧縮を有効にすることは比較的簡単です。いくつかの例を示します：

Nginxで圧縮を有効にする

Nginxサーバーの場合、このディレクティブを追加するためにNginx設定ファイルを編集する必要があります：

gzip on;

どのファイルタイプを圧縮するかを指定するために、追加の設定を追加することもお勧めします：

# これは圧縮できるファイルタイプの非網羅的なリストです
gzip_types text/plain application/xml application/javascript application/json text/css text/html;

上記の設定は、最も一般的なテキストファイルタイプの圧縮を有効にします。Brotliを使用する場合は、Brotliモジュールを別途インストールする必要があるかもしれません。

Apacheで圧縮を有効にする

Apacheサーバーの場合、これらの行を.htaccessファイルまたはサーバー設定に追加します：

# gzip圧縮を有効にする
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/javascript application/json
</IfModule>

# Brotli用（モジュールがインストールされている場合）
<IfModule mod_brotli.c>
  AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/css application/javascript application/json
</IfModule>

そして、すべてのコード例と同様に、設定変更が期待通りに機能することを確認するためにテストしてください。

Caddy

Caddyでの圧縮は非常に簡単です：

encode zstd gzip

このディレクティブをCaddyfileに追加して、gzipとzstd圧縮の両方を有効にします。

Express.jsで圧縮ミドルウェアを使用する

Express.jsを使用するNode.jsアプリケーションの場合、圧縮ミドルウェアを使用できます。これはアプリケーションレベルで圧縮を適用します。

import express from "express";
import compression from "compression";
const app = express();

// 圧縮ミドルウェアを使用
app.use(compression());

app.listen(3000);

GzipとBrotliのエンコーディングの両方が圧縮ミドルウェアでサポートされています。

Next.jsで圧縮を使用する

Next.jsはデフォルトで圧縮を適用し、Vercelのようなサービスにデプロイする場合、圧縮は自動的に処理されます。

完全性のために、Next.jsで圧縮を有効にする設定を示します。next.config.jsファイル内：

module.exports = {
  // デフォルトで有効
  compress: true,
};

JavaScriptからGzip圧縮を適用する

クライアントサイドJavaScriptは、ブラウザ内でデータを圧縮および解凍できる圧縮ストリームAPIを提供します。

ヒント

これはページの読み込みパフォーマンスに影響せず、サーバーサイド圧縮（テキストベースのリソースに使用すべきもの）とは異なるユースケースに対応します。

これはサーバー上のファイルの圧縮には使用しませんが、圧縮データをサーバーにアップロードしたり（例：大規模なユーザー生成コンテンツ、ログファイル）、ブラウザ内で完全に圧縮データを扱ったりする（例：ブラウザ内データ処理）のに役立ちます。

const text = "a".repeat(1000);
const originalBlob = new Blob([text]);
const stream = originalBlob.stream();

// ストリームを圧縮ストリーム（gzip形式）にパイプする
const compressedStream = stream.pipeThrough(new CompressionStream("gzip"));
const gzipBlob = await new Response(compressedStream).blob();

console.log("新しいサイズ:", gzipBlob.size); // 29
console.log("元のサイズ:", originalBlob.size); // 1000

サイズの大幅な削減は、Gzipがこの例の文字「a」のような繰り返しパターンの圧縮に非常に効率的であるためです。

圧縮が機能していることを確認する方法

圧縮を有効にする前後に、それが実際に機能しているかを確認することが重要です。確認するための方法をいくつか紹介します：

コマンドラインツールの使用

curlのようなコマンドラインツールを使用して、ファイルが圧縮されているかどうかを確認できます：

curl -s -H "Accept-Encoding: gzip" -I https://example.com/ | grep content-encoding

ターミナルでこのコマンドを実行すると、圧縮が有効になっている場合は、出力に「content-encoding: gzip」が表示されるはずです。

「Accept-Encoding」ヘッダーに「gzip」という値を送信していることに注目してください。これは、クライアント（この場合はcurl）がgzip圧縮をサポートしていることをサーバーに伝えます。

ヒント

Content-Encodingヘッダーは、リソースのエンコーディングを指定するために使用されます。これにより、ブラウザやクライアントはファイルをどのようにデコードするかを知ることができます。

この場合、それはgzipです。

ブラウザDevToolsの使用

ブラウザDevToolsのネットワークパネルは、ファイルが圧縮されているかどうかを確認するのに役立ちます。

上のスクリーンショットは以下を示しています：

サイズ列には、同じリソースに対して2つのサイズが表示されています。最初のサイズ（669 B）は圧縮サイズを表しています - ネットワーク経由で転送されるデータ量です
2番目のサイズ（1.3 KB）は非圧縮サイズを表しています - ファイルの実際のサイズです
Content-Encoding列は使用される圧縮アルゴリズムを指定しています、この場合はgzipです