当ブログですが、いつの間にか表示速度が遅くなってしまいました。
スマホとかで見ると全然表示されない。体感１０秒ほど。
なんでだろうということでGTmetrixを使ってまずサイトがどのような状態にあるのか診断。
すると。
ありゃ。ページのロードに１５秒もかかっとるやないかい！遅いはずでず。この類のコンテンツは３秒ぐらいで表示させないとだめですね
まず診断結果ですが、Serve scaled imagesがボトルネックになってますね。自分はあまり詳しくないですが、画像が最適なサイズで表示されていないのが原因みたい。ひとつずつチェックしていくと５０px表示のサムネイルに６４０pxの画像を使っていたりと無茶苦茶な状態になっていました。このブログではウィジェットなどによりサムネイルを大量に表示させているためこれではダメですね。
よしまずはこれを直すか。
まずデフォルトのサムネイルですが３００ｐｘ ×３００pxのものを使っているため、新しく小さいサムネイルを作りそれを参照させる事にしました。
使ったのはRegenerate Thumbnailsというwordpressのプラグインです。これを使うことで過去にアップロードした画像を一括でリサイズすることができました。プラグインをインストールしてボタンを押すだけで簡単です。
さらに画像を表示させているスクリプトをリサイズした画像を参照するように変更。ひとつずつ地道にやっていきます。これ小さい画像でいいじゃん？っという箇所が結構見つかります。
数か所直しただけで簡単にページ表示が４秒台になりました。
今まで何をやってたんだかって感じです。
さらに頑張ります。プログラムもいくつか変更し不要な画像やピクセル指定のないタグを軒並み直してきます。するとこんな感じ。
おおついに夢の３秒台に突入。ページスピードがＡランクになりました。全体的にサイトの画像数やリクエスト数は減らしていないですが、かなり早くすることができました。
ちなみに元々無料のCDN（croud flare）のサービスも使っているため、最適化すると結構良い速度がでます。今回の教訓としては一つずつ地味に対応していくしかないというのが印象です。
いやー勉強になりました。もっと早くする場合はいくつかのページを静的ページにするか、WEBサーバ側にキャッシュを効かせればもう少し上のスコアは狙えそうですね。今回はここまで。
