ブログの表示スピードがあがりました。PageSpeed Insightsは17→82に改善

快適な閲覧環境を求めて

現在は、陶器や磁器、おさんぽ記事、中古住宅の購入とリノベーションに関する記事がよく読まれている、濃紺ピッチャーというブログを運営しています。

当初は、月に100程度の閲覧数だったブログも、月に約20万から30万程度の閲覧数があるブログになりました。

これまでは、写真の多いブログなので、写真の表示が遅いことが課題でした。
通信状況が悪いと、写真が表示されずに、最後まで読めない場合もありました。

今回行ったサイトの改善により、画像のファイルサイズが約半分となり、全体の表示スピードが上がり、閲覧される方のストレスが軽減できたと思います。

改善した内容

裏側の仕組みの話になるので、興味のある方向けのお話になります。
  • サーバーの変更
  • 画像の軽量化
  • ssl通信の導入

サーバーの変更

スピードアップの改善策として、まずはサーバーを変更しました。
サーバーとは、Webサイトを収納してある家のようなものです。
今回の引っ越しで、これまで約5年間ほど、住まわせてもらっていた、xserverから、conohaへ引っ越ししました。

ちなみに、xserverは、5年の間、一度もエラーが無く、非常に安定していて、満足の行くレンタルサーバーだったので、Webエンジニアのような方で無ければ、ドメインの設定から、メールの設定もとても簡単なので、オススメのサーバーであることに変わりはありません。

conohaに引っ越した理由は、Wordpressを爆速に動かすことができる、kusanagiというシステムを簡単に導入できるからでした。
また、運営を続けていくにあたり、サーバーのスケールアップ(増強)、スケールダウン(縮小)が簡単に出来ることが決め手になりました。

PageSpeed Insights(ページスピードインサイト)をチェック

googleがページの表示スピードが、検索結果に反映すると明言してから、googleのPageSpeed Insightsを気にするようになりました。

画像が多すぎる、合羽橋記事のPCの記事を比較したところ、17から、82に改善できました。
合羽橋記事、PCサイトの圧縮前 合羽橋記事、PCサイトの圧縮後
ちなみに、合羽橋記事のスマホサイトをみてみたところ、12から65へと改善できたのがわかりました。
合羽橋記事、スマホサイトの圧縮前 合羽橋記事、スマホサイトの圧縮後
これは、前のサーバーが極端に遅いというわけではなく、写真が多すぎたサイトの設計の問題であります。
通常はここまで長い1ページはありませんので、xserverでも問題ありません。

ちなみに、画像がそんなに多くはないトップページをみてみたところ、65から83へと改善できました。
トップページの圧縮前 トップページの圧縮後 この結果から、改善できたのは画像のサイズだけではないことがわかりました。
サーバーの内容を変更し、プランをあげて、画像の修正や、コーディングの修正等を行った結果、スピードをあげることができました。
ただし、まだまだ改善の余地はあるとPageSpeed Insightsには表示されているので、今後も改善は続けていく予定です。

画像の軽量化

kusanagiには、便利な機能がいくつかあり、その1つが画像の圧縮コマンドです。
画像がトータルで8,000枚を超えるくらいありましたが、スピーディーに対応できました。
例えば、こちらの「合羽橋の散策にオススメの30軒!かっぱ橋道具街の地図とカフェ情報」で利用しているニイミさんの画像は、67KBから35KBに圧縮できました。
画像の圧縮 見た目の画像劣化が無く、約半分のサイズに、圧縮することができました。

ssl通信の導入

サーバー移動をした時に、ネットの通信情報を暗号化して保護する、SSLを導入することにより、安心安全なWebサイトとなりました。
http://news.ko-zu.com -> https://news.ko-zu.com とアドレスが少し変わりました。
※URLが、httpsに変わりましたが、Webサイトは自動で遷移されます。

今回の引っ越しについては、サーバーの知識が浅いなりに試行錯誤しながら行い、とても勉強になりました。

これから、さらにもっと見やすいブログにしていきたいと思います。