うたたねモード

セミリタイア?っぽく生きてみる。

ブログの読み込みが遅すぎるので改善を試みた

ずっと気になっていたこと。

はてなブログの読み込み速度が遅すぎる!!

いつも反映、反応が遅くてイライラ!!

これでは、読みに来てくださる方もストレスに違いない!!

なんとかならないものかと思い、いくつか改善を試みた。

 

読み込み時間をテスト

まず、グーグルのモバイルサイト速度テストを用いてテストしてみた。


testmysite.withgoogle.com

 

サイトアドレスを入力し診断してみると、

15秒

読み込み時間:要改善

と出た。

15秒もかかっていたとは?!・・・・・(愕然)

推定離脱率も半数以上・・・・・(ガックリ)

これはなんとかしなければ。

 

トップページの表示記事数を減らす

まずはトップページでの対策。

Proではないので、トップページの記事がタイトル一覧表示にできないため、記事本体を7つも表示すると結構な負荷になることに気づいた。

その原因のひとつは、記事の間に表示されるはてな側の広告バナーであるようだ。

これが重そう。

よって、トップページの表示記事数を2記事に減らしてみた。

バナー広告も2つになり、許容範囲とする。

 

ソーシャルパーツを消す

次に読み込みに時間がかかっていそうだったソーシャルパーツの見直し。

少なくともトップページには必要ないと判断し、チェックを外して非表示とした。

右上のアカウント>デザイン>カスタマイズ>記事>ソーシャルパーツと進み、はてなブックマークボタン、Facebook「シェア」ボタン、ツイートボタン(その他)をオフにする。

これで、トップページでのソーシャルパーツ読み込み時間が削減される。

記事本文ページ中でもデフォルトのソーシャルパーツは非表示となるが、代わりにテーマの仕様でソーシャルパーツボタンが用意されていることから、記事の上下に独自ボタンを表示することとした(前述の、記事>ソーシャルパーツ設定画面で「記事の上下に表示する」ボタンをチェック)。

はてなスターボタンはそのままとした。(はてなスターを付けてくださるみなさん、ありがとうございます、とてもうれしく励みになっております)

 

画像を軽くする

各記事にはアイキャッチ画像を貼り付けている。

記事編集画面で、右サイドバーの右上「+写真を投稿」ボタンを押して投稿してもよいのだが(今までそうしていた)、リサーチの結果、はてなフォトライフから画像をアップロードすることにした。

はてなフォトライフの上部バー右側の「設定」から、

・画像サイズ:640ピクセル(長辺) ※任意

・画質:80% ※任意

(サイズ、画質指定は画像の様子を見ながら任意で指定可)

と指定すると、元画像のサイズにかかわらず、640ピクセル、画質80%で自動的にリサイズされる

なお、「+写真を投稿」ボタンからアップロードするより、ファイルサイズが半分程度になる

画像はなるべく軽い方がよいので、過去記事のアイキャッチ画像すべてをはてなフォトライフからアップロードしたものと置換した。

 

 

再テスト 

前述したグーグルのモバイルサイト速度テストで再テストした結果・・・

2017年8月30日(木)、18:55現在

8秒

読み込み時間:普通

28%

訪問者の推定離脱率

15秒 → 8秒と、7秒の短縮である。

複数回のテストでは上記より少し遅くなることもあるが、最初に比べればそれでも短縮結果が得られている。

 

まとめ

このブログに限らず、はてなブログ自体が重い仕様となっているようだが、いくつか改善できる手立てはあるようだ。

今回は、

・トップページの記事数(バナー広告数)を減らす

・ソーシャルパーツを消す

・画像を軽くする

という対策を講じた結果、読み込み時間の短縮につながった。

 

少しは読み込みが軽くなったでしょうか? 

みなさんのはてなブログはいかがですか?

 

読み込み時間が気になる方、何かの参考になれば幸いです。