こんにちは。シーナと申します。
ブログのカスタマイズ、第9弾になります。
今回は、はてなブログのページ読み込みが遅い件についてです。
実は前々から気にはなっていました。
ですが、無料版ですし、こんなものだろうと考えて放置していました。
しかし、先日自宅のネット回線が一時使えなくなり、スマホの回線からブログの更新と更新結果の確認のために何度もアクセスすることになりました。
そこでやはり遅いと感じたため、何とか読み込み速度を改善できないかと調べることにしました。
その結果、本当に簡単な設定で無事体感できるレベルで改善することが出来ました。
以下が調べた結果になります。
あなたのブログの参考にもなれば幸いです。
- 【はてなブログ】ページ読み込みが遅い！【改善のためのたった一つの方法】
- はてなブログの読み込み速度を客観的に確認する方法
- 当ブログのページ読み込み速度の測定結果
- デフォルトのシェアボタン（ソーシャルパーツ）の無効化
- 代わりのシェアボタンの設置
- Minimalismテーマでシェアボタンを設置するために必要な1ステップ
- シェアボタンの配置場所について
- 「はてなスター」ボタン無効化（非表示化）の効果について
- はてなブログの読み込み速度が遅い、その他の改善項目とは
- 終わりに
- おすすめ記事です。
【はてなブログ】ページ読み込みが遅い！【改善のためのたった一つの方法】
当ブログにおいて、ページ読み込み速度改善に有効だった設定は、以下の1点のみです。
はてなブログのデフォルトのシェアボタンの無効化。
これだけです。
体感できるレベルで明らかに速くなりました。
はてなブログの読み込み速度を客観的に確認する方法
「GTmetrix」というサイトで自分のブログ（他のサイトでもOK）のURLを入力するだけで、
「読み込み時間」、「通信データ量」、「リクエスト数」等を確認できます。
改善ポイントも提示してくれます。
英語のサイトですが、直感的に分かりやすい。
ブログのトップページだけでなく、特定の記事（URL）も指定できます。
当ブログのページ読み込み速度の測定結果
対象ページは、トップページ（https://inside-shiina.hatenablog.jp/）にしました。
※当ブログは2018年10月5日に「https://www.inside-shiina.com/」に変更しました。
その時に列挙されている記事に依存しますが、一番分かりやすいため、このページにしています。
設定前（デフォルトのシェアボタン設定有）
読み込み時間=19.1s、通信データ量=3.77MB、リクエスト数=665
設定後（デフォルトのシェアボタン設定無）
読み込み時間=13.4s、通信データ量=3.27MB、リクエスト数=569
※後述するMinimalismテーマのデフォルトのシェアボタンは設置済みの状態です。
いかがでしょうか。
いずれの数値も改善が見られます。
ポイントは「読み込み時間」ではなく、「通信データ量」と「リクエスト数」です。
この２つの数値が少ないほど、ブログ利用者の回線（速度）に依存する部分が少なくなります。
各数値（特に「読み込み時間」）は計測する時間帯によって結構異なります。
以下、具体的な設定方法を説明します。
本当に簡単です。
デフォルトのシェアボタン（ソーシャルパーツ）の無効化
ステップ1 デザイン => カスタマイズ => 記事 => ソーシャルパーツ
デザイン => カスタマイズ => 記事 => ソーシャルパーツ
で全てのチェックをオフにして、［変更を保存する］をクリックして確定します。
代わりのシェアボタンの設置
はてなブログのデフォルトのシェアボタンを無効化しましたから、私は代わりのシェアボタンを設置しました。
この設定は必須ではありません。
幸い当ブログが利用しているテーマ「Minimalism」には標準でハイセンスなシェアボタンが用意されています。
ありがたく、そちらを利用します。
現在、記事の上に表示されているものです。
いま思えば、さっさと設置すればよかったのです。
ただ、自分がシェアボタンを使わない派閥の人間であったため、デフォルトのままでよいかと後回しにしてしまいました。
※2018年9月9日に「Minimalism」テーマの微調整が実施されました。
2018年9月10日以降、シェアボタンの表示が異なっています。
以前の表示に戻す手順については以下を参照のこと。
Minimalismテーマでシェアボタンを設置するために必要な1ステップ
紹介するコードをコピペする前にすでに追加しているコードのバックアップ（どこかにコピペ）を取っておくことをお勧めします。
ステップ1 デザイン => カスタマイズ => 記事 => 記事上にコピペ
デザイン => カスタマイズ => 記事 => 記事上
の最後に以下のコードをコピペし、［変更を保存する］をクリックして確定します。
<div class="shrbtn">
<!-- HatenaBookmark -->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="share_btn">
<span class="htvcenter" style="line-height: 1.6;">
<i class="blogicon-bookmark" style="font-size:22px"></i>
</span>
</a>
<!-- twitter -->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share_btn">
<i class="fa fa-twitter"></i>
</a>
<!-- facebook -->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share_btn">
<i class="fa fa-facebook"></i>
</a>
<!-- pocket -->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share_btn">
<i class="fa fa-get-pocket"></i>
</a>
<!-- feedly -->
<a href="http://feedly.com/i/subscription/feed/https://inside-shiina.hatenablog.jp/feed" target="_blank" class="share_btn">
<i class="fa fa-rss"></i>
</a>
</div>
※「https://inside-shiina.hatenablog.jp」部分を自分のブログのURLに変更してください。
feedly 以外はそのままです。変更する必要はありません。
※不要なボタンがあれば削除してください。<!-- コメント -->から</a>までが1セットです。
以上で設定は完了です。
あなたのはてなブログの読み込み速度は改善しましたでしょうか。
なお、独自ドメインに移行してブログのURLを変更した際は忘れずに更新してください。
以下の記事にはてなブログを独自ドメインに移行する際に必要になる手順を纏めています。
非常に重要な事前準備編です。
実践編です。
以下は補足になります。
シェアボタンの配置場所について
カラフルなデザインのシェアボタンを配置したいと考えている方も多いと思います。
ただ、デザインを考える前に配置場所も重要です。
結論を先に書くと
「記事のタイトル下、本文の上（アイキャッチ画像の上）」
が最適です。
ブログ（サイト）利用者の大部分が記事を見るとき「F字型」と言われる目線の動かし方をするそうです。
画面左上から右の水平方向へ移動し、少し下がってまた右へ水平方向に先ほどよりは短い距離を移動するという研究結果が出ています。
記事タイトルを見た後、その下にあるシェアボタンを認識して貰うということですね。
大多数のブログ（サイト）で「記事のタイトル下、本文の上」に配置されているのには、しっかり意味があったのですね。
「Minimalism」テーマでもデフォルトで最適な場所に配置されるようになっています。
「はてなスター」ボタン無効化（非表示化）の効果について
多くのサイトで「はてなスター」ボタンの無効化（非表示化）が読み込み速度の改善に有効であるとの情報がありました。
大変ありがたいことに当ブログに「はてなスター」を付けてくださる方がいらっしゃいます。
そのため、無効化するつもりはなかったのですが、念のため試してみました。
一応は確認はしたいですよね。
設定箇所は、シェアボタンを設定したすぐ下にあります。
設定前後で測定した結果は、以下になります。
設定前
読み込み時間=13.4s、通信データ量=3.27MB、リクエスト数=569
設定後
読み込み時間=13.6s、通信データ量=3.20MB、リクエスト数=556
ほぼ誤差です。
「はてなスター」は有っても無くても変わらないようです。
当初の予定通り、有効のままにしたいと思います。
今後ともどうぞよろしくお願いいたします。
なお、一度無効化しても、すでに頂いたスターは消えません。
再度有効化すれば、再表示されます。
少し心配でしたが、大丈夫でした。
はてなブログの読み込み速度が遅い、その他の改善項目とは
正直、10秒未満になった方が見栄えがよいのですが、これ以上は難しそうです。
一番有効であると言われている画像の圧縮も当ブログではあまり効果が見込めないようです。
その他、優先度が高いものは大部分が「はてなブログ」側でないと触れない部分でした。
なお、無料版ではどうにもならない部分である以下が一番効果が大きそうです。
ブログのヘッダ・フッタ（最上下部の黒い部分）を非表示
Pro版に移行しないと正式には設定できないため、Pro版移行時に設定したいと考えています。
＝＝＝後日追記ここから＝＝＝
Pro版に移行したため、設定変更してみました。
結果は、以下の記事で紹介しています。
Pro版移行後のブログの状況です。
あなたがブログを続けようと考えているのなら、早めにPro版に移行してしまった方がよいですよ。
遅くなればなるほど大変です。
＝＝＝後日追記ここまで＝＝＝
終わりに
体感できるぐらい（これでも）速くなりましたので、ひとまずよかったです。
しかし、ブログ初心者であるとはいえ利用者の方の事を考えればもっと早く対応しておくべきでした。
今後のブログ運営に活かせればと考えています。
それでは、また。
おすすめ記事です。
ブログ更新のお供に体重に優しい飲み物があります。
ローソンにはおやつもあります。特にラスクはおすすめです。
ローソンにはおいしい低糖質パンもあります。
無印良品から低投資パンが販売されました。
普段の商品選択の参考になれば幸いです。
おいしく食べた後はお口のお手入れも忘れずに行いたいです。
格安スマホに移行してから困ったことはありません。
格安スマホならBIGLOBEモバイルがおすすめです。エンタメフリーオプションで生活スタイルが変わります。
通信費削減のために自宅のネット回線を楽天モバイル（モバイルルーター代わり）にするという選択肢はありですよ。
