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」はインストールするだけで自動で設定されます。
ただ、キャッシュ系のプラグインは他のプラグインと相性が良くない場合も多く、バッティングしてしまう可能性もあるので導入する前には必ずバックアップを取っておくようにしましょう。


Visual Studio CodeでCSVの編集を見やすく行う拡張機能「Edit csv」
MacのRubyをrbenvで管理する方法
CSS疑似要素の「:empty」でタグの中身が空のときのスタイルを設定する
EJSのincludeで別ファイルを読み込むときの画像パスを指定する方法
JavaScriptのテンプレートリテラル内で条件分岐を行う方法
Visual Studio CodeでMovable TypeのMTMLファイルを開く拡張機能「Movable Type Markup Language Syntax」
Dart Sassを使う上で1番基本的なネストやアンパサンドの書き方|Dart Sass入門
Font Awesome 5の基本的な使い方と、Font Awesome 4との違い
JavaScriptのforEach内で「continue」や「break」のような動作をさせる方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
ウェブサイトにおける「コピーライト」の書き方
ウェブサイトを作る上での基本「Macの画像圧縮方法」のまとめ
Ulyssesがテーブルの作成やフォーマットを正式にサポート!
Alfredを最大限活用する、ブラウザのブックマーク管理方法について
Client Folder Makerをショートカットキーからすぐ実行できるようにする
他人と共通認識を得るために必要な記号・括弧の正式名称一覧
Visual Studio CodeでToDoコメントを一覧で表示する拡張機能「Todo Tree」
Visual Studio Codeで連番を入力する拡張機能「vscode-input-sequence」
ATOKで登録した単語の品詞を、あとから一括で変更する方法
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法