gzip圧縮をしてウェブサイトの表示スピードを上げる方法

ウェブサイトの表示スピードを上げる方法の1つとして、gzip圧縮での配信があります。
gzip圧縮とはなにか?
gzip圧縮は、テキストファイルの圧縮に強力な圧縮方式です。
一般的によく見られる圧縮方式にzip形式がありますが、gzipはテキストファイルであれば9割近くまでサイズを減らせます。
拡張子は「.gzip」「.gz」「.tar.gz」「.tgz」など様々で、ウェブサイトで言われる場合はサーバー上で自動的にgzip形式に圧縮して配信する意味も含んでいる場合が多いです。
テキストファイルの圧縮に適しているのでHTML・CSS・JavaScriptファイルの圧縮ができます。
gzip圧縮されているか確認
「Check GZIP Compression」というサイトがあり、そこで対象のウェブサイトがgzip圧縮されているかどうか簡単に確認できます。
サイトにアクセスしたら、真ん中の入力項目にURLを入力し、「Test Now」をクリックします。
gzip圧縮されているサイトなら「Congatulations! Your Website Have GZIP Encryption」モーダルが表示され、下には圧縮率などの情報が表示されます。
圧縮されていないサイトなら「Damn! Your Website Doesn’t Have Any Encryption」モーダルが表示されます。
gzip圧縮が利用できるか確認
「HTTP Compression Test」というサイトで、使っているサーバーでgzip圧縮が利用できるかどうか確認できます。
「URL Compression Test」にURLを入力し、「Test」をクリックします。
利用できる場合は「○○ is Compressed」というメッセージが表示されます。
最近のサーバーでは基本的に利用可能ですが、念のため確認してから設定するようにしましょう。
gzip圧縮する方法
mod_deflateを使う場合
.htaccessファイルに「mod_deflate」というアクセス検知時にサーバーがファイルを自動圧縮するモジュールを使用します。
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-varyこの記述を追加すると、gzip圧縮してくれます。
WordPressプラグインを使う場合
WordPressのキャッシュ系プラグインである「W3 Total Cache」を使うと、「ブラウザキャッシュ」設定の中に「Enable HTTP (gzip) compression(gzip圧縮を有効にする)」項目があるので、チェックを入れるだけで簡単に設定できます。
他にもキャッシュ系プラグインの「WP Rocket」はインストールするだけで自動で設定されます。
ただ、キャッシュ系のプラグインは他のプラグインと相性が良くない場合も多く、バッティングしてしまう可能性もあるので導入する前には必ずバックアップを取っておくようにしましょう。


Safari 12.1から外観モード(ライト/ダーク)の判定をCSSで行えるように!
Visual Studio Codeで簡易的なローカルサーバーを起動して、コード保存時に自動でブラウザをリロードする拡張機能「Live Server」
WordPressのデータを取得できるWP REST APIの使い方
HTMLタグの入力をラクにするスニペット集
HTTP通信をラクに実装できる「axios」の基本
Apacheのテストページを非表示にする方法
HTTP/2が設定されているはずなのに、ブラウザ上でHTTP/1.1になってしまう場合はセキュリティソフトを確認
Google Maps APIを使ってGoogle Mapsをウェブサイトに表示させる方法
JetpackでのError during WebSocket handshakeの解決方法
属性・Class・IdなどHTMLタグの細かい部分を見ていこう!!
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
かゆいところに手が届く「Supercharge」でMac環境を便利にカスタマイズする
超軽量なコードエディタ 「Zed」をサブエディタとして活用する
Bartender 6で追加されたWidgets機能で自作メニューバーアイテムを簡単に作成する
Googleカレンダーを便利に活用するための小技集(祝日だけを表示・月末の繰り返しイベントを追加)
Obsidianを使った「自己流PKM」で行う知識トレーニング
テキストエディタ・ノートアプリ関連のショートカットキーをKeyboard Maestroで統一する
Path Finderを使ってキーボードだけでファイル操作する方法(応用編)
macOSのコマンドパレット比較!SpotlightとAlfred、Raycastどれを使えばいい?
1つのノートアプリにすべて集約するのをやめた理由|2025年時点のノートアプリの使い分け