先日 Google アドセンスの審査に合格し、広告を設置したところ、アクセス数はあるもののページに訪問されていないらしいことが発覚。
告知 Google アドセンスを一時的にはずしますの内容のとおり、一時的に広告を外して速度調査をすることにしました。
ブログが重い原因調査
ネットを調べてみると、「はてなブログが遅い」、「Google アドセンスを設置したら遅くなった」など、原因は色々と考えられました。
私の場合は、あきらかに「Google アドセンスを設置したら遅くなった」に該当しました。
なので、2 つ設置していた広告を 1 つに減らしてみて速度調査を実施しました。
ホームページの速度調査の方法について
Google が提供している、PageSpeed Insights を使用して、ホームページの速度調査を実施しました。
使い方は簡単で、調査するURLを入力後、［分析］ボタンを押下するだけです。
分析結果は、下記のような形で「モバイル」と「パソコン」で表示されます。
緑色の場合は速度に問題ありませんが、黄色や赤色の場合は速度改善が必要という判断となります。
私のブログは、「モバイル」では問題なかったのですが、「パソコン」では遅いという判定となりました。
これでも、改善した後なのですが・汗。
ホームページの速度が遅い原因調査
PageSpeed Insights でも最適化する方法は色々と記載されていますが、いまいち分かりずらかったのでネットで調べることにしました。
- ブログに載せる画像を減らす
猫たちの写真は別に減らしても良いのですが、色々な技術情報の画像は、分かりやすさを目的として載せているので減らさない方向で考えました。 - ブログに載せる画像を圧縮する
画像は極力減らしたくないので、こちらを実施したいと思っています。
オンラインで様々なPNG画像をサイズ変更 - iLoveIMG
ちなみに、オンラインで手軽に加増サイイズ変更や、圧縮するホームペジがあるので、オンラインで様々なPNG画像をサイズ変更 - iLoveIMGを使用して、どの程度サイズが小さくなるかテストしてみました。
技術情報の説明で使用していた、画像のスクリーンショットを圧縮したところ、45％まで小さくなりました。（今の段階では、まだブログの画像はそのままですが、少しずつ時間をみて圧縮していきたいですね） - CSS や JavaScript を見直す
デザインや使い勝手（下にスクロールした際、上へ移動するボタンを配置）などは、このままにしたいのですが…。
とりあえず、ブログタイトルは Google Web フォントをインポートして使っていたので、これは妥協しようと思い、普通のフォントに戻しました。
【Google Web フォント】
【通常のフォント 】
変更した結果、PageSpeed Insights の値が、5 ポイントアップしました。
インポートしてデザインを変えるのって、大分速度に影響するのですね…。
勉強になりました！ - Google アドセンスの広告を減らす
改善前は 2 つ設置していたのですが、1 つに減らしました。
減らした結果、PageSpeed Insights の値が、4 ポイントアップしました。
速度調査したタイミングにもよりますが、現在では「パソコン」の速度は 80 ポイント前後まで回復しました！！
まとめ
私のブログが遅くなった原因は、
- Google Web フォントを利用していたこと
- 広告を複数設置していたこと
でした。
ひとまず暫定的に、若干の速度改善がみられたので、この状態でブログを公開したいと思います。
訪問してくださった皆様、今後とも、読んでもらえると嬉しいです！
