先日、仕事でGoogle PageSpeed Insightsのスコア改善を依頼された。
いろいろやってスコア改善に繋げることはできたが、ふと自分のサイトはどうなの?と思ってかけてみると…
散々たる結果!!
長いことメンテナンスとかしていないので仕方ないっちゃ仕方ないんだけど、ちょっとメンテナンスしていこうかという気になった。
まずはテキストリソースの圧縮から
もうどこから手を付けていいかわからないくらいひどいスコアなので、上から順に対応していくことにした。
ということでまずは「テキスト圧縮の有効化」を行います。
どうやらテキストリソースを圧縮して送信することで通信量を下げて高速化するってことらしいね。
時代はどんどん変わるもんだ。
この処理はサーバ側らしいので、いつもお世話になっているさくらのレンタルサーバでできるか調べてみたら、正式にサポートはしていないけど一応できるっぽい。
さっそく対応してみる。
さくらのレンタルサーバでGZIP圧縮を行う
方法はカンタンで、.htaccessファイルに以下を追記するだけ。
# GZIP圧縮設定
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
参考記事:
Webサイトの高速化「gzip圧縮」を試してみた | 日々、アップデートブログ
https://hibi-update.org/other/gzip/
検証
わぁ!一気に9点もスコア上がった!
こんな感じで少しずつメンテナンスしていこうと思います。