Zenn
🟦

CSSのgzip圧縮について

2024/10/11に公開
CSS
gzip
tech

CSSをgzip圧縮するとは？

CSSをgzip圧縮するとは、CSSファイルのサイズを小さくしてウェブページの読み込み速度を向上させる手法のことです。以下にgzip圧縮の詳細を説明します:

gzip圧縮とは

gzip圧縮は、Webサイトのコンテンツ(HTML、CSS、JavaScriptなど)を圧縮してデータ量を削減する方法です。この圧縮によって:

  • ファイルサイズが小さくなる
  • データの転送時間が短縮される
  • ウェブページの表示が高速化される

gzip圧縮の仕組み

gzipは以下の2つの手法を組み合わせて圧縮を行います:

  1. LZ77: 同じデータの繰り返しを識別し、単一の参照に置き換える
  2. ハフマン符号化: 使用頻度の高い文字に短いコード、低い文字に長いコードを割り当てる

これらの手法により、効率的な圧縮が実現されます。

CSSのgzip圧縮のメリット

CSSファイルをgzip圧縮することで、以下のメリットが得られます:

  1. ページ読み込み時間の短縮
  2. 帯域幅の節約
  3. SEOの向上（Googleは読み込み時間の短いページを高く評価）

gzip圧縮の設定方法

gzip圧縮を有効にするには、主に以下の2つの方法があります:

  1. .htaccessファイルの編集:
    サーバーのルートディレクトリにある.htaccessファイルに圧縮の設定を追加

  2. php.iniファイルの編集:
    php.iniファイルにzlib.output_compression = Onの記述を追加

これらの設定により、サーバーはCSSファイルを自動的に圧縮してクライアントに送信するようになります。

gzip圧縮を使用することで、CSSファイルのサイズを大幅に削減し、ウェブサイトのパフォーマンスを向上させることができます。

出力について

Gzip圧縮されたCSSファイルは、バイナリデータとして保存されるため、テキストエディタで開いても人間が読める形式ではありません。Gzip圧縮前後のCSSファイルの内容と特徴を説明します。

Gzip圧縮前のCSS

圧縮前のCSSファイルは通常、以下のような読みやすい形式で記述されています:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
}

.header {
  background-color: #007bff;
  color: white;
  padding: 20px;
}

.content {
  margin: 20px;
  line-height: 1.6;
}

Gzip圧縮後のCSS

Gzip圧縮後のCSSファイルは、以下のような特徴を持ちます:

  1. ファイル拡張子が.css.gzになることがあります。
  2. ファイルサイズが大幅に減少します（通常30-70%程度）。
  3. バイナリ形式で保存されるため、テキストエディタで開くと判読不能な文字列になります。
  4. HTTP応答ヘッダー:
    • サーバーがGzip圧縮されたファイルを送信する際、以下のようなヘッダーが含まれます：
      Content-Encoding: gzip
Content-Type: text/css

圧縮後のファイルをテキストエディタで開くと、以下のような判読不能な文字列が表示されます:

�WKo�0���W�z�6�I�v�a@�a�=��h[�,��~�e'N�����}�>�R���...

圧縮後（16進数表示の例）:

1f 8b 08 00 00 00 00 00 00 03 4d 8e 41 0e 82 30
10 44 ff 32 73 06 36 6d 77 6b 62 62 f0 e0 c1 83
26 1e 4c 08 07 63 48 5a 1a 0a 09 d8 98 f8 ef 16
7a f1 38 33 6f 66 de 2c 2a 8d 1b 38 43 55 94 65
59 14 25 94 15 54 50 43 03 2d b4 d0 41 0f 03 8c
30 c1 0c 0b 2c b0 c2 06 3b 1c 70 c4 09 67 5c 70
c5 0d f7 07 9e 78 e1 8d 0f 3e 6c 70 61 00 00 00

この16進数データは実際のGzip圧縮されたCSSの一部を表しています。ブラウザはこのデータを受け取り、解凍して元のCSSを復元します。

Gzip圧縮の効果

  1. ファイルサイズの削減: 元のCSSファイルが10KBだった場合、Gzip圧縮後は約3-7KB程度になります。

  2. 転送速度の向上: 圧縮されたファイルはより少ないデータ量で送信されるため、ウェブページの読み込み速度が向上します。

  3. 帯域幅の節約: サーバーとクライアント間で転送されるデータ量が減少するため、帯域幅の使用が抑えられます。

Gzip圧縮されたCSSファイルは、ウェブサーバーによって自動的に解凍されてブラウザに送信されるため、ユーザー側で特別な操作は必要ありません。この圧縮プロセスにより、ウェブサイトのパフォーマンスが向上し、ユーザーエクスペリエンスが改善されます。

HTMLで読み込む

CSSのgzip圧縮されたファイルは、HTMLで読み込む際に特別な処理は必要ありません。通常のCSSファイルと同じように読み込むことができます。

gzip圧縮CSSの読み込み方法

  1. HTMLファイルでの記述:
    通常のCSSファイルと同じように、<link>タグを使用してCSSファイルを指定します。
<link rel="stylesheet" href="styles.css">

  1. サーバーの設定:
    サーバー側で適切な設定がされていれば、ブラウザからのリクエストに応じてgzip圧縮されたファイルを送信します.

  2. ブラウザの対応:
    現代のブラウザはgzip圧縮に対応しており、自動的に解凍処理を行います。

gzip圧縮の仕組み

  1. ブラウザのリクエスト:
    ブラウザはAccept-Encoding: gzip, deflateヘッダーを送信し、gzip圧縮をサポートしていることを伝えます。

  2. サーバーの応答:
    サーバーはリクエストを受け取り、gzip圧縮されたCSSファイルを送信します。その際、Content-Encoding: gzipヘッダーを付加します。

  3. ブラウザの処理:
    ブラウザは受け取ったgzip圧縮ファイルを自動的に解凍し、通常のCSSとして解釈・適用します。

注意点

  1. ファイル名:
    gzip圧縮されたファイルの拡張子は変更されません。つまり、styles.cssのままです。

  2. サーバー設定:
    .htaccessファイルなどでサーバーの設定が適切に行われていることが重要です.

  3. 動的圧縮:
    多くの場合、サーバーはリアルタイムでファイルを圧縮し、送信します。事前に圧縮されたファイルを用意する必要はありません。

このように、gzip圧縮されたCSSファイルは、ユーザーやウェブ開発者が特別な対応をすることなく、通常のCSSファイルと同じように使用できます。サーバーとブラウザが自動的に圧縮・解凍を行うため、ウェブサイトのパフォーマンスが向上し、ユーザーエクスペリエンスが改善されます。

Discussion