thumbnail

読み込み速度を高速化 | Blogのデザインを変更 その2

約1年前の2014年7月頃から開始した、このBlog。
そのデザインを、2015年8月30日に一新する。
ちょうど、自分の誕生日にあわせたかのような対応。

しかし、Bloggerで使える有料テンプレートを使用し、設定したら、ブログの読み込み速度が、極めて重たくなる。

今回は、その対応方法のメモ。

今回使ったWebスピードチェックサイト「Pingdom」
サイト内のどこが重たいのかがわかりやすく表示される。





「BMAG - Magazine Responsive Blogger Template」という有料テンプレートを使い、ブログを設定してみる。

そしての、自分iPhoneや(旧型)iPadで見ると。。。
なかなかサイトが表示されない。

しばらくしてから表示される。
(旧型)iPadでは、途中Webブラウザのsafariがハングアップしてしまう。
つまり、かなり読み込みが遅い。

「Pingdom」というWebのスピードテストサイトで見てみると、

こんな数値結果となる。
Load Time:9.26s
Page Size:22.6M
Requests:424

ブログのトップページが表示されるまでに、400ぐらいのリクエストが生じて、読み込み速度が9秒。ページサイズも大きい。これでは、明らかにどうしょうようもなく遅い。当然のことながら、GoogleでのWeb最適化診断しても、大きく「赤信号」となる。


いろいろと対処法を調べて見ると、

「サーバー側での設定を変えると改善する」

という方法が多い。しかし、このブログがあるのは、Googleの運営しているbloggerのサーバーなので、サーバー側の設定はいじれない。

手もとでできることを対応する。

そして、かなり大きく改善できた方法がこちら。


対処方法


  1. にほんブログ村のバナーツールをはずす
    約20リクエスト削減。他のにほんブログ村ユーザーも、このブログパーツの読み込み速度の遅さに不満を持つ人が多いみたい。現状、「にほんブログ村」からのサイトアクセスは、ごくわずかなので、外してしまっても問題ないと思う。

  2. テンプレートにある一覧表示のウイジェットをSTOP
    「slidar」と呼ばれる、画像スクロールが特に重いようなので、外してみる。そうすると、約40リクエスト削減。

  3. よく読まれる記事の抜粋テキスト文の表示をSTOP

  4. Google Adsenseのスクリプトが2つ動いているが、そのうちの1つをFooter付近に移動

  5. ソース内の記述を改善
     (例:  <script src=‘https://~” → <script src=‘//~” https, httpをとる)


最終的に、以下のようになる。


当初対応後
Load Time:9.26s
Page Size:22.6M
Requests:424

→→→→→
 2.33s
 3.6M
 98


当初と比べれば、だいぶ改善。
しかし、ページサイズが大きすぎるような気がする。

とりあえずは、暫定的に使えるように対応できたので、おいおい対応しようと思う。


No Comments