mod_deflateを用いてページの表示速度を底上げするgzip圧縮

2022年4月3日 2024年5月29日 8分56秒

タスラ t3l

画像は圧縮したし、いらないファイルは捨てたのに、ページが重たくて困った人は是非最後の一手として行ってほしいのがgzip圧縮です。

※一番最初から設定してしまってもいいと思います。

mod_deflateサーバーによって負荷がかからないようにインストールされていない場合があるようですが、有名なサーバーではほぼ使えるようになっていると思います。

1 htaccessに書くだけ簡単gzip圧縮
2 簡単な解説
3 まとめ

htaccessに書くだけ簡単gzip圧縮

<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE

    # Mozilla4系などの古いブラウザで無効、IEは除外
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

    Header append Vary Accept-Encoding env=!dont-vary
    # 画像は再圧縮しない
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

    # 圧縮設定
    AddType x-font/woff .woff
    AddType x-font/ttf .ttf
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/js
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf
</IfModule>

対応しているサーバーではこれを書くだけでページ表示速度の底上げをすることができます。

簡単な解説

mod_deflate有効か判定する

<IfModule mod_deflate.c>

…

</IfModule>

IfModuleで囲っていると、mod_deflateが使用可能か判定してくれるようになります。

使用可能だった場合に内容を実行してくれます。

すべてのデータを圧縮

SetOutputFilter DEFLATE

この記述をすると全ての出力データを圧縮してくれるようになります。

古いブラウザで無効だけどIEは有効

    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

今では記載しなくても大丈夫かもしれませんが、gzip圧縮が対応していないブラウザなどに配慮して無効にしている記述です。

私は念のためにいつも記載しています。

間違ったコンテンツを配信しないように確認

Header append Vary Accept-Encoding env=!dont-vary

こちらの記述はプロキシサーバーが間違ったコンテンツを配信しないように確認をする記述のようです。

私自身理解をしていないのですが、念のため昔から入れています。

画像関係は再圧縮にならないように無効

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

すでに圧縮してある画像などをもう一回圧縮すると、処理の方が重たくなってしまい逆に表示速度の遅延に繋がってしまいますので、画像などは再圧縮にならないように無効にしている記述です。

圧縮するファイルたち

    AddType x-font/woff .woff
    AddType x-font/ttf .ttf
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/js
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf

圧縮するファイルたちを指定しています。