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

投稿日:

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

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

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

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

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

原因がなにかを確認する

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

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

HTML、CSS、JavaScriptを縮小する

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

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

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

圧縮を有効にする

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

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

DEFLATEを使った圧縮

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

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

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

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

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

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

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

まとめ

たった2つのことを実践しただけでこれだけの効果を得ることができました。
まだまだ、他にもできることはあるかもしれませんが、比較的簡単に実践できる内容としては上出来ではないでしょうか。

さらなる高速化を目指してあれこれ試しながら、新しい情報を追加していきますね。

-ブログ運営

Copyright© FoB log , 2019 All Rights Reserved.