#はじめに

「100KBのJavaScriptファイルを30KBに圧縮できます」——これだけでページの読み込みが大幅に速くなります。

HTTP圧縮は、サーバーからクライアントへのデータ転送量を削減する技術です。テキストベースのファイル（HTML、CSS、JavaScript、JSON）は特に効果が高く、60-80%のサイズ削減が期待できます。

この記事を読むと、以下のことができるようになります：

  • HTTP圧縮の仕組みを理解できる
  • gzipとBrotliの違いがわかる
  • 圧縮が有効になっているか確認できる

#HTTP圧縮の仕組み

#基本フロー

[ブラウザ]                           [サーバー]
    |                                    |
    |------ GET /app.js ---------------->|
    |       Accept-Encoding: gzip, br    |
    |       "gzipかBrotliで圧縮してね"      |
    |                                    |
    |                     元のサイズ: 100KB
    |                     圧縮後: 30KB
    |                                    |
    |<----- 200 OK ----------------------|
    |       Content-Encoding: gzip       |
    |       [圧縮されたデータ: 30KB]        |
    |                                    |
    ↓ ブラウザが自動的に解凍

#ネゴシエーション

  1. クライアント: Accept-Encodingヘッダーで対応する圧縮形式を通知
  2. サーバー: 対応可能な形式で圧縮し、Content-Encodingヘッダーで通知
  3. クライアント: Content-Encodingを見て解凍

#主要な圧縮形式

#gzip

最も広く使われている圧縮形式です。

Content-Encoding: gzip
  • 対応: ほぼすべてのブラウザとサーバー
  • 圧縮率: 良好（テキストで60-80%削減）
  • 速度: 高速

#Brotli（br）

Googleが開発した新しい圧縮形式です。

Content-Encoding: br
  • 対応: 主要な最新ブラウザ（IE除く）
  • 圧縮率: gzipより10-25%優れる
  • 速度: 圧縮は遅いが、解凍は高速
  • 制限: HTTPSでのみ使用可能

#deflate

古い形式で、現在はほとんど使われません。

Content-Encoding: deflate

#圧縮効果の目安

ファイルタイプ元のサイズ圧縮後（gzip）圧縮後（Brotli）
JavaScript100 KB30 KB25 KB
CSS50 KB10 KB8 KB
HTML30 KB8 KB6 KB
JSON200 KB40 KB32 KB

圧縮が効果的なファイル:

  • HTML、CSS、JavaScript
  • JSON、XML
  • SVG
  • プレーンテキスト

圧縮が効果的でないファイル:

  • JPEG、PNG、WebP（すでに圧縮済み）
  • 動画ファイル
  • ZIPファイル

#サーバー設定

#nginx

gzip on;
gzip_types text/plain text/css text/javascript application/javascript application/json image/svg+xml;
gzip_min_length 1000;
gzip_comp_level 6;

# Brotli（モジュールが必要）
brotli on;
brotli_types text/plain text/css text/javascript application/javascript application/json image/svg+xml;
brotli_comp_level 6;

#Apache

# .htaccess
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/css
  AddOutputFilterByType DEFLATE text/javascript application/javascript
  AddOutputFilterByType DEFLATE application/json
</IfModule>

#Express.js

const compression = require('compression');
app.use(compression());

#CDN設定

多くのCDNは自動的に圧縮を適用します。

  • Cloudflare: デフォルトでgzipとBrotliを適用
  • CloudFront: 設定で圧縮を有効化
  • Vercel/Netlify: 自動的に最適な圧縮を適用

#事前圧縮

サーバーでリアルタイムに圧縮する代わりに、ビルド時に圧縮済みファイルを生成する方法です。

#メリット

  • サーバーのCPU負荷を軽減
  • 最大圧縮率を使用可能

#Viteでの設定

// vite.config.js
import viteCompression from 'vite-plugin-compression';

export default {
  plugins: [
    viteCompression({ algorithm: 'gzip' }),
    viteCompression({ algorithm: 'brotliCompress' }),
  ],
};

出力:

app.js
app.js.gz
app.js.br

#nginx での配信

# 事前圧縮ファイルがあれば使用
gzip_static on;
brotli_static on;

#DevToolsでの確認

#圧縮の確認

  1. DevToolsのNetworkタブを開く
  2. 任意のリクエストをクリック
  3. Headersタブで確認:
    • Content-Encoding: gzip または br

#サイズの確認

Networkタブの「Size」列を確認:

Size: 30 KB / 100 KB
      ^^^^   ^^^^^^^
    転送サイズ  実際のサイズ

転送サイズが実際のサイズより小さければ、圧縮が効いています。

#Response Headers

Content-Encoding: gzip
Content-Length: 30000
Vary: Accept-Encoding

Vary: Accept-Encodingは、圧縮形式によってレスポンスが異なることを示します。キャッシュが正しく動作するために重要です。

#圧縮レベルの選択

圧縮レベルは、圧縮率と処理速度のトレードオフです。

#gzip（1-9）

レベル圧縮率速度用途
1低非常に速いリアルタイム圧縮、高トラフィック
6中バランス一般的な用途（推奨）
9高遅い事前圧縮

#Brotli（0-11）

レベル圧縮率速度用途
4中速いリアルタイム圧縮
6中高バランス一般的な用途
11最高非常に遅い事前圧縮のみ

#ベストプラクティス

#1. 適切なファイルタイプのみ圧縮

gzip_types text/plain text/css text/javascript
           application/javascript application/json
           image/svg+xml application/xml;

画像や動画は圧縮しない（すでに圧縮済み）。

#2. 小さすぎるファイルは圧縮しない

gzip_min_length 1000;  # 1KB未満は圧縮しない

小さいファイルは圧縮のオーバーヘッドが効果を上回ることがあります。

#3. Brotliを優先

ブラウザが対応していれば、Brotliを優先して使用。

#4. Varyヘッダーを設定

Vary: Accept-Encoding

キャッシュが圧縮形式ごとに正しく分離されます。

#まとめ

  • HTTP圧縮はテキストファイルのサイズを60-80%削減
  • gzip: 広くサポート、バランスが良い
  • Brotli: 圧縮率が高い、HTTPS必須
  • すでに圧縮されたファイル（画像、動画）は対象外
  • リアルタイム圧縮は中程度のレベルで
  • 事前圧縮で最高の圧縮率を実現

#次のステップ

圧縮を理解したところで、次は画像最適化について学びましょう。画像はWebページのデータ量の大部分を占めることが多く、適切な最適化で大幅なパフォーマンス改善が期待できます。

#参考リンク