Webページを表示するとき、ブラウザにはHTML、CSS、JavaScriptなどのファイルが送られます。これらのファイルサイズが大きいと、読み込みに時間がかかりやすくなります。
その対策のひとつが gzip圧縮 です。.htaccessで圧縮設定を行うと、対応しているテキスト系ファイルを小さくして送信できるため、表示速度の改善が期待できます。このページでは、初心者向けに基本の考え方と設定方法を分かりやすく紹介します。
この記事で分かること
gzip圧縮とは、サーバーからブラウザへ送るデータを圧縮して、通信量を減らす仕組みです。
とくにHTML、CSS、JavaScriptのようなテキスト系ファイルは圧縮の効果が出やすく、ファイルサイズを小さくして送信できることがあります。
gzip圧縮の効果
送信データ量が減ることで、ページの読み込みが軽くなりやすくなります。とくに通信環境があまり速くない場合には効果を感じやすいことがあります。
Apache系サーバーでは、一般的に mod_deflate を使ってgzip圧縮を有効にします。.htaccessには次のように記述します。
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/json AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE text/xml </IfModule>
この設定により、対象となるテキスト系ファイルを圧縮して送信しやすくなります。
gzip圧縮は、文字情報が多いファイルに向いています。逆に、もともと圧縮済みのファイルでは効果が少ないことがあります。
| 対象 | 圧縮との相性 | 理由 |
|---|---|---|
| HTML | よい | テキスト中心のため、圧縮効果が出やすいです。 |
| CSS | よい | 文字データなので圧縮しやすいです。 |
| JavaScript | よい | コード量が多いほど効果が出やすいです。 |
| JPEG・PNG | あまり向かない | 画像自体がすでに圧縮されていることが多いためです。 |
| ZIP | 向かない | すでに圧縮済みなので、さらに圧縮しても効果が少ないです。 |
JPEGやPNGのような画像は、すでに別の方法で圧縮されていることが多く、gzipをかけても大きな効果が出ない場合があります。
そのため、まずはHTML、CSS、JavaScriptなどのテキスト系ファイルを対象にする考え方で十分です。
初心者の方は、最初から対象を広げすぎず、テキスト系ファイルだけに絞って設定するほうが安全です。
設定例の AddOutputFilterByType は、指定した種類のファイルに対して圧縮フィルタを適用するための記述です。
たとえば text/html はHTML、text/css はCSS、application/javascript はJavaScriptを表しています。
通常は、サイトの公開ディレクトリにある .htaccess に記述します。上位ディレクトリに設定すると、その配下にも影響することがあります。
サイト全体で使いたい場合は、共通で効く場所にまとめて書くと管理しやすいです。
設定後は、ブラウザの開発者ツールやオンラインの確認ツールなどで、レスポンスヘッダに圧縮関連の情報が出ているか確認します。
見た目だけでは分かりにくいため、「表示が変わらないから失敗」とは限りません。通信の内容で確認するのがポイントです。
確認の考え方
ページのデザインが変わる設定ではないため、導入後は見た目ではなく、通信内容や読み込みの軽さで確認します。
サーバー環境によっては、.htaccessでmod_deflateを利用できない場合があります。その場合は設定しても反映されないことがあります。
gzip圧縮は「送るデータを小さくする」設定であり、キャッシュは「一度読んだファイルを再利用しやすくする」設定です。
役割が違うため、両方を組み合わせることで表示速度の改善を目指しやすくなります。
| 設定 | 役割 |
|---|---|
| gzip圧縮 | 送信するデータ量を減らす |
| キャッシュ設定 | 再読み込みを減らす |
.htaccessでgzip圧縮を有効にすると、HTML、CSS、JavaScriptなどのテキスト系ファイルを小さくして送信しやすくなり、表示速度の改善につながることがあります。
まずは mod_deflate を使った基本設定から始め、画像のような圧縮効果が少ないものは無理に対象にせず、テキスト系ファイル中心で運用するのがおすすめです。
WISNET / わいずねっと のレンタルサーバー
用途に合わせて2つのレンタルサーバープランをご用意しています。