PageSpeed で「テキスト圧縮の有効化」対策で速度改善

当記事では PageSpeed Insights の表示で、「テキスト圧縮の有効化」をせよと指示されるケースの対策と改善手法をご紹介します。


テキストリソースを gzip や deflate で圧縮せよという指摘

上図ではテキストリソースの JavaScript や CSS を圧縮して通信量を抑えるように指摘されています。
この対策について見ていきましょう。

改善対策

テキスト圧縮は、ウェブサーバーが返すリソースへ圧縮の指定がよくある手法です。

gzip と deflate の指定を追加

Apache などの Web サーバーで gzip や deflate の圧縮指定をします。
圧縮指定をすれば PageSpeed の表示が消えて、速度改善が期待できます。

具体的な設定はサーバーに合わせた指定をしてください。

レンタルサーバーは .htaccess に指定

Web サーバーの設定を直接変更できないレンタルサーバーなどは、.htaccess に記述して deflate の圧縮指定を追加できる場合があります。

ご利用のレンタルサーバーの設定を確認してください。

以下は Apache を利用しているケースでの .htaccess の圧縮指定の紹介です。
.htaccess の IfModule mod_rewrite.c タグ内に AddOutputFilterByType DEFLATE を追加します。

<IfModule mod_rewrite.c>
    AddOutputFilterByType DEFLATE text/html
</IfModule>

これは HTML だけしか指定していないので、他にも追加する場合は後ろに複数追加できます。

<IfModule mod_rewrite.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/js application/x-javascript application/javascript
</IfModule>

js と css が PageSpeed の指摘にありましたので追加しました。

パフォーマンスへの影響を確認

再度 PageSpeed Insights を確認します。

deflate 設定前の点数

deflate の指定前は37点でした。

deflate 設定後の点数

こちらが deflate 設定後の点数です。

37点から66点になっています😁
29点の改善となりました。

この結果を踏まえると、速度改善では gzip と deflate の圧縮をまず検討するべきと言えますね。

参考

mod_deflate – Apache HTTP サーバ バージョン 2.2