サイトの軽量化：テキスト圧縮

2019.08.16

この記事は約4分で読めます。

Webフォント軽量化、画像軽量化に引き続き3回目はテキストの圧縮（★印）。次がCSSになります。先に書きますが下記の9番目はよくよく調べると画像の最適化が最も有効になるということで、今回の記事から解決済みとしました。

ウェブフォントの読み込み中もテキストを表示する（解決済み）
次世代フォーマットで画像を配信する（ブラウザ未対応が多いので今回は行わない）
CSSを軽量化する
レンダリングを妨げるリソースを削除する
適切なサイズの画像を用意する（解決済み）
テキストの圧縮を有効にする★
不要なCSSを削除する
画像を効率的にエンコードする（投稿がほとんどのサイトなので今回は行わない）
ネットワークペイロードを過度に大きくしない（解決済み）
合理的なキャッシュポリシーで静的アセットを配信する（解決済み）

正直テキストの圧縮は今のようにモバイルファーストが言われるまでは、そこまで気にもしなかった内容です。個人的な感想で言えば、見やすいソース、なるべく複雑にならないCSSは目指してきましたが、それ以外にこんなことも必要になってくるとは…。

検索して調べ、幾つかのページを見て結論としてはhtaccessに以下を記述しました。

<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)$ 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-httpd-php
</IfModule>

gzip圧縮をしています。
gzip圧縮とはHTMLやCSSなどをgzipというものによって圧縮する方法のことです。
サイトにアクセスした際、ファイルサイズが小さくなることでデータ転送速度が速くなります。

mod_deflateモジュールで設定（サーバーによって負荷を懸念し利用できない場合有り）
mod_rewriteモジュールで設定

2通りあるようです。
検索した際多かったのはmod_deflateモジュールで設定のパターンでした。
私も実際そちらを採用しています。mod_rewriteモジュールで設定する方法は検索したら出てきました。紹介のためにリンクを貼っておきます。

「gzip圧縮」でWebサイトを高速化しよう！【mod_rewrite編】

ただしこのサイトでも利用しているさくらインターネットでは、mod_deflateモジュールは非公開機能だという話もありました。.htaccessファイルは書き間違えるとトラブルの素にもなる（実際やらかした過去）ので、実際はサポートされている方法がいいと思うのですが、結果圧縮有効になったので現時点では大丈夫かな、と思います。

これでテキスト圧縮されているかどうかを見るには、開発者ツールを使って確認できます（一応こちらでも確認して問題ありませんでした）。
が、オンラインで確認できるサイトがあります。

便利ですね～。