【初心者向け】HTTPヘッダー「Content-Encoding」：圧縮でWebサイトのパフォーマンスを向上させる

Content-Encoding の役割

サーバー負荷の軽減
圧縮により、サーバーにかかる負荷を軽減できます。
ページの読み込み速度向上
帯域幅の節約により、ページの読み込み速度が向上します。
帯域幅の節約
圧縮により、送信されるデータ量が減り、帯域幅の使用量を抑えられます。これは、特に画像や動画などの大容量データを送信する場合に重要です。

Content-Encoding の値

Content-Encoding ヘッダーの値は、使用される圧縮方式を示します。一般的に使用される値は以下の通りです。

deflate
zlib ライブラリで使用される圧縮方式です。gzip よりも古い方式ですが、広くサポートされています。
br
Brotli と呼ばれる比較的新しい圧縮方式で、gzip よりも高い圧縮率を達成できます。
gzip
最も一般的に使用される圧縮方式で、Lempel-Ziv-Welch (LZW) アルゴリズムを用いています。

Content-Encoding の例

以下の例は、Content-Encoding ヘッダーが gzip を使用していることを示しています。

HTTP/1.1 200 OK
Content-Encoding: gzip
Content-Type: text/html
...

クライアントによる Content-Encoding の処理

クライアントは、Accept-Encoding ヘッダーを使用して、サポートしている圧縮方式をサーバーに伝えます。サーバーは、クライアントがサポートしている圧縮方式を使用してレスポンスを圧縮します。

クライアントがレスポンスを受信すると、Content-Encoding ヘッダーを確認して、圧縮方式を判断します。クライアントが圧縮方式をサポートしている場合は、データを解凍してから処理します。

Content-Encoding の利点

コスト削減
帯域幅の使用量を削減することで、通信コストを削減できます。
サーバー負荷の軽減
サーバーにかかる負荷を軽減できます。
パフォーマンスの向上
帯域幅とページの読み込み速度を向上させることができます。

Content-Encoding の注意点

すべてのデータが圧縮に向いているわけではない
テキストデータなどは既に圧縮されているため、圧縮効果が得られない場合があります。
圧縮処理には CPU 負荷がかかる
圧縮と解凍には CPU 負荷がかかります。低性能なサーバーでは、パフォーマンスに影響を与える可能性があります。
すべてのクライアントが圧縮をサポートしているわけではない
古いブラウザーや一部のデバイスは、圧縮をサポートしていない場合があります。

Content-Encoding は、HTTP でよく使用されるヘッダーであり、帯域幅を節約し、ページの読み込み速度を向上させるのに役立ちます。ただし、すべてのクライアントが圧縮をサポートしているわけではないことや、圧縮処理には CPU 負荷がかかることなどの注意点もあります。

注
これらの例はあくまで教育目的であり、実際のアプリケーションで使用されるように設計されていない場合があります。

Python

import zlib

def compress_data(data):
  """
  gzipを使用してデータを圧縮します。
  """
  return zlib.compress(data)

def decompress_data(data):
  """
  gzipを使用してデータを解凍します。
  """
  return zlib.decompress(data)

# データを圧縮して Content-Encoding ヘッダーを設定
data = b"This is some data to compress."
compressed_data = compress_data(data)

response_headers = {
  "Content-Encoding": "gzip",
  "Content-Type": "text/plain",
}

# 圧縮されたデータをレスポンスとして送信
with open("response.txt", "wb") as f:
  f.write(response_headers.encode("utf-8"))
  f.write(b"\r\n")
  f.write(compressed_data)

# データを解凍して表示
with open("response.txt", "rb") as f:
  headers = f.readline().decode("utf-8").strip()
  content = f.read()

  for key, value in parse_headers(headers):
    if key == "Content-Encoding":
      if value == "gzip":
        decompressed_data = decompress_data(content)
        print(decompressed_data.decode("utf-8"))

Node.js

const zlib = require('zlib');

const data = 'This is some data to compress.';

const compressedData = zlib.gzipSync(data);

const responseHeaders = {
  'Content-Encoding': 'gzip',
  'Content-Type': 'text/plain',
};

// Send the compressed data as a response
res.writeHead(200, responseHeaders);
res.end(compressedData);

// Decompress and display the data
fs.readFile('response.txt', (err, data) => {
  if (err) throw err;

  const headers = data.slice(0, data.indexOf('\r\n')).toString('utf-8');
  const content = data.slice(data.indexOf('\r\n') + 2);

  for (const [key, value] of parseHeaders(headers)) {
    if (key === 'Content-Encoding') {
      if (value === 'gzip') {
        const decompressedData = zlib.unzipSync(content);
        console.log(decompressedData.toString('utf-8'));
      }
    }
  }
});

using System.IO;
using System.Net;
using System.Web.Http;
using System.Web.Script.Serialization;

public class ContentEncodingController : ApiController
{
    public HttpResponseMessage Get()
    {
        var data = "This is some data to compress.";
        var compressedData = CompressData(data);

        var response = Request.CreateResponse(HttpStatusCode.OK);
        response.Headers.Add("Content-Encoding", "gzip");
        response.Content = new ByteArrayContent(compressedData);
        response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/plain");

        return response;
    }

    private byte[] CompressData(string data)
    {
        using (var memoryStream = new MemoryStream())
        {
            using (var gzipStream = new GZipStream(memoryStream, CompressionMode.Compress))
            {
                using (var streamWriter = new StreamWriter(gzipStream))
                {
                    streamWriter.Write(data);
                }
            }

            return memoryStream.ToArray();
        }
    }

    private Dictionary<string, string> ParseHeaders(string headers)
    {
        var headerPairs = headers.Split('\r\n');
        var parsedHeaders = new Dictionary<string, string>();

        foreach (var headerPair in headerPairs)
        {
            var parts = headerPair.Split(':');
            if (parts.Length == 2)
            {
                var key = parts[0].Trim();
                var value = parts[1].Trim();
                parsedHeaders[key] = value;
            }
        }

        return parsedHeaders;
    }
}

Transfer-Encoding: chunked

Transfer-Encoding: chunked は、HTTP レスポンスボディをチャンクと呼ばれる小さな塊に分割して送信する方法です。各チャンクには、そのチャンクのサイズ情報が含まれます。この方法の利点は、クライアントがレスポンスを受信し始める前にデータのサイズを知らなくてもよいことです。また、サーバーは圧縮処理をせずにデータを送信できます。

欠点

Content-Encoding ヘッダーと比較してオーバーヘッドが大きくなります。
古いブラウザーや一部のデバイスではサポートされていない場合があります。

例

HTTP/1.1 200 OK
Transfer-Encoding: chunked
Content-Type: text/plain

5
Hello
10
World!
0

Server Push

Server Push は、クライアントがリクエストしなくても、サーバーからクライアントにデータをプッシュする技術です。これにより、クライアントがページをロードする前にデータをプリロードして、読み込み速度を向上させることができます。

利点

クライアントがページをロードする前にデータをプリロードできます。
Content-Encoding ヘッダーよりも効率的です。

欠点

複雑な実装が必要となります。
比較的新しく、すべてのブラウザーやサーバーでサポートされているわけではありません。

例

HTTP/1.1 200 OK
Content-Type: text/html

<html>
<head>
  <link rel="preload" as="script" href="script.js">
</head>
<body>
  </body>
</html>

Brotli

Brotli は、比較的新しい圧縮アルゴリズムで、gzip よりも高い圧縮率を達成できます。多くの場合、Content-Encoding ヘッダーと組み合わせて使用されます。

利点

帯域幅とページの読み込み速度を向上させることができます。
gzip よりも高い圧縮率を達成できます。

欠点

比較的新しく、すべてのブラウザーやサーバーでサポートされているわけではありません。

例

HTTP/1.1 200 OK
Content-Encoding: br
Content-Type: text/plain

This is some data to compress.

Range Requests

Range Requests は、HTTP レスポンスの一部のみを要求する方法です。これにより、大きなファイルを分割して送信し、クライアントがファイルをダウンロードする前にその内容を確認することができます。

利点

クライアントがファイルをダウンロードする前にその内容を確認することができます。
大容量ファイルを効率的に送信できます。

欠点

クライアントとサーバーが Range Requests をサポートしている必要があります。

GET /large-file.txt HTTP/1.1
Range: bytes=0-1023