ブログの表示改善に行った2つのこと

ある日の午後の出来事。「あれ？こんなにブログの表示遅かったっけ？そんなに記事数もないのに…」

いままで、そんなに気にしてなかったんですが、試しにPageSpeed Insightsをやってみた結果、がっかりな結果が…

Poorって…今の仕事を始めたばかりの頃に、考え方がPoorだとか設計がPoorだとか言われたのを思い出しました。苦い思い出です。
まぁ、心の中では、日本語と英語を混ぜてんじゃねーよ！とか思ってましたが(笑)

他にもアジェンダとかプライオリティとか、なにそれ？
議題とか優先度とかりっぱな日本語あるんだから、それ使えよって自分の英語力のなさを棚にあげてたあの頃がなつかしい(笑)

と、話をもどして、とにかくPoorだけは回避せねばということで、2つのことを実践してなんとかPoorを脱した話です。

原因がなにかを確認する
HTML、CSS、JavaScriptを縮小する
圧縮を有効にする
1. DEFLATEを使った圧縮
まとめ

原因がなにかを確認する

う～ん、正直これどうすればいいのかわかりません。唯一わかりそうなのは「画像の最適化」ですが、すでにEWWW Image Optimizer使ってるんだけどなぁと修正方法をみてみると、対象がG〇〇gleさんが配信してくれている画像ぽいのでスルー。

どうにもならんなぁと他の項目についてかたっぱしから検索してみました。

HTML、CSS、JavaScriptを縮小する

どうやら、HTML、CSS、JavaScriptのコメントや改行などをなくすとサイズが小さくなり読み込みが早くなるとのこと。C言語なんかはコンパイルするとコメントや改行は無視されるんで、その発想が浮かんできませんでした…もっと勉強せねば…
ということで、いろいろ調べていると「Autoptimize」というプラグインを発見。
さっそくインストールし、色々設定を試してみるとこんな結果に！

いきなり、なかなかの成果です。ただ、闇雲にチェックを入れるだけでは、かえってスコアが悪くなるみたいですね。僕の場合は、次のような設定が一番良かったです。

これで、CSS、JavaScriptを縮小するの項目が消えました。

圧縮を有効にする

次に「圧縮を有効にする」ですが、これにはgzipとdeflateというのがあるみたいなんですが、gzipはファイルそのものをgzip形式で圧縮してアップロードする方法みたいですね。

しかし、これだとファイルを更新したいときに毎回圧縮しなおさないといけないので不便！ということでdeflateの方を探ってみました。

DEFLATEを使った圧縮

こちらの方法は、DEFLATEアルゴリズムをつかった方法で.htaccessファイルに以下を追記することで実現できます。

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

詳しくは、Webkaruさんのページ「圧縮を有効にする – PageSpeed Insights」にて説明がありました。ありがとうございます。

また、他にもいくつかのサイトで紹介がありましたが、同様の記述内容でした。
ここまでで、PageSpeed Insightsでの結果を見てみると…これまた、大幅アップで、Poorから卒業できました。

しっかりと「圧縮を有効にする」も消えてますね。

他にも項目は残っているのですが、

JavaScript/CSSを排除
AutoptimizeのCSSが原因のようです。でもこれって、排除したり後回しにしたらダメっぽくない？だってこれのおかげで縮小してるんだし。ということでとりあえずそのままにしておきます。
サーバーの応答時間
エックスサーバーは年内にSSD化するのでとりあえずこのまま様子見ということで。
ブラウザのキャッシュ
こちらも.htaccessファイルにおまじないを記述することで対応できるようですが、修正項目が少なかったのと、どれくらいの期間を設定すべきか決めきれなかったので、今回はそのままにしておきました。
画像の最適化
これはもう・・・なので仕方ないですね。

ということで、今回は見送りです。
後々、もっと知識をつけてから対処していきたいと思います。