Webサイトの高速化「gzip圧縮」を試してみた

gzip圧縮とは

gzip（ジー・ジップ）は、データ圧縮プログラムのひとつ、およびその圧縮データのフォーマットである。「GNU zip」の略でありGNUプロジェクトによって開発・メンテナンスされている。
gzip – Wikipedia

概要はこんな感じ。要するにgzipを活用すればwebサイトのスピードが上がるということですね。

このサイトもスピードチェックをすると改善提案項目にgzipが出てきます。

前回は、次世代画像フォーマットwebPを活用して画像の読み込みスピードを上げることができました。

次世代画像フォーマットWebP(ウェッピー)を試してみた(パフォーマンス編)
次世代画像フォーマットWebP(ウェッピー)を試してみた(実装編)

今回はこのサイトでgzip圧縮を試してみたいと思います。

.htaccessでgzip圧縮を有効にする

gzip圧縮を有効にするには.htaccessの一番下に以下のコードを貼り付けます。(.htaccessのバックアップをとっておきましょう)
ただし以下の方法は、mod_deflateが使えるレンタルサーバーの場合に限ります。
さくらインターネットでは一応使えるみたい。

# gzip圧縮の設定
<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE

  # レガシーブラウザは圧縮をしない
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
  
  Header append Vary Accept-Encoding env=!dont-vary
 
  # 画像は再圧縮しない
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|webp)$ no-gzip dont-vary
  
  # 圧縮設定
  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-font-ttf
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>

圧縮させないファイルを記述

画像ファイルはすでに圧縮処理をしているの除外します。

# 画像は再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|webp)$ no-gzip dont-vary

圧縮させるファイルを記述

圧縮させるファイル形式を記述します。

  # 圧縮設定
  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-font-ttf
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

gzip圧縮されているか確認する

.htaccessの設定が出来たので実際gzip圧縮されているか確認します。

chromeで右クリック→検証→Networkタブを選択してcommond＋Rを押します。
試しにstyle.cssを選択してHeadersタブのResponse Headersを確認すると、content-encoding: gzipとなっています。
cssファイルのgzip圧縮が有効になっていますね。
jsファイルでも同じくgzip圧縮が確認できました。