はてなブログ無料版が重いので軽量化に勤しむ

このブログははてなブログを使っていて、かつ無料版なのですが、最近PCでブログを表示した際になんだか重いように感じていました。

今回はブログの軽量化を行った話をメモしておきます。

 

 

 

 

 

ブログがどれくらい重いか数値化する

GooglePageSpeed Insightsで、サイトの表示速度を数値化して確認することができます。

 

実際にブログの表示速度を数値化した結果がこちら。

 

 

f:id:kulupopo:20180215131342p:plain

 

 

f:id:kulupopo:20180215131422p:plain

 

 

  • モバイル : 88/100
  • パソコン : 21/100

 

うわっ…私のブログ、重すぎ…?、と言わんばかりの数値。

そりゃPCでブログ見るときになんか重いように思いもするわな。

 

実際に数値で重さを測ったところで、はてなブログの軽量化スタートです。

 

 

 

 

トップページを記事一覧表示にする

トップページに記事がすべて表示されていると、各記事の読み込みに時間がかかる上に見た目がすっきりしないので、記事一覧表示に変更しました。

「続きを読む」ボタンはあっても、なんだか見づらいですよね。

 

トップページを記事一覧表示に変更する方法は、こちらのブログを参考にしました。

 

dokuwohaku.hateblo.jp

 

 

 

また、スマホ版は表示する記事件数を5件に変更しました。

表示記事件数を変更する方法は、こちらのブログを参考にしました。

 

 

blog.wackwack.net

 

 

 

 

 

 

フォローボタンとシェアボタンを変更 

はてなブログが提供しているTwitterのフォローボタンやTwitterのタイムライン埋め込みをやめて、Twitterのボタンをプロフィールに表示しました。

どうやらはてなブログが提供しているSNS関係のボタンは重いみたいですね。

 

ボタンのカスタマイズは、SNSフォローボタンはこちらのブログを参考にしました。

 

www.gamehuntblog.com

 

 

f:id:kulupopo:20180215182829p:plain

 

フォローボタンはこんな感じになりました。シンプルでとてもよい。

 

 

 

 

SNSシェアボタンはこちらのブログを参考にしました。

 レスポンシブデザインのSNSシェアボタンについて記載されているブログが少なくてかなしい。

 

www.ituore.com

 

上記ブログに記載されているソースコードを編集して、すこし変更しています。

 

f:id:kulupopo:20180215182926p:plain

 

シェアボタンはこんな感じになりました。フォローボタンと似ていてよいですね。

 

 

 

 

 

おまけ  プロフィール画像を大きくする 

はてなブログのデフォルトだとプロフィール画像が小さかったので、今回のカスタマイズついでに大きくしてみました。

プロフィール画像を大きくする方法は、こちらのブログを参考にしました。

 

somegoro.hatenablog.com

 

 

 

 

 

 

色々試した結果

PageSpeed Insightsで再度速度を測ってみます。

 

f:id:kulupopo:20180215183720p:plain

 

f:id:kulupopo:20180215183736p:plain

 

 

  • モバイル : 88/100  →  80/100
  • パソコン : 21/100  →  77/100

 

 

モバイルの数値は8下がりましたが、パソコンの数値は56も上がりました。

 

数値だけがすべてではないので、PCやスマホで再度ブログを表示しましたところ、PCは以前より軽くなり、スマホも体感では以前と変わらなかったので、軽量化成功。

 

HTML・CSSJavaScriptの知識がなくても、これだけ手軽に改善できるならよいですね。

今後も不定期にブログの重さを確認し、改善できることがあればしていこうと思います。

 

 

 

追記

他にもカスタマイズしました。

 

kulupopo.hatenablog.jp