【はてなブログ】ページ読み込み速度が遅いことに気づいて改善した平成最後の夏2018-09-07【はてなブログ】ページ読み込み速度が遅いことに気づいて改善した平成最後の夏ブログデザインこんにちは。ブログのカスタマイズ、第9弾になります。はてなブログのページ読み込み速度についてです。前々から気にはなっていましたが、無料版ですし、こんなものだろうと考えていました。先日ネット回線が一時使えなくなり、スマホの回線からブログの更新と確認のために何度もアクセスすることになりました。そこでやはり遅いと感じたため、何とか読み込み速度を改善できないかと調べました。その結果、本当に簡単な設定で無事体感できるレベルで改善することが出来ました。以下が調べた結果になります。あなたのブログの参考になれば幸いです。終わりにおすすめ記事です。当ブログにおいて、ページ読み込み速度改善に有効だった設定は、以下の1点のみです。体感できるレベルで明らかに速くなりました。「読み込み時間」、「通信データ量」、「リクエスト数」等を確認できます。改善ポイントも提示してくれます。英語のサイトですが、直感的に分かりやすいです。ブログのトップページだけでなく、特定の記事(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テーマのデフォルトのシェアボタンは設置済みの状態です。いずれの数値も改善が見られます。「通信データ量」と「リクエスト数」です。この2つの数値が少ないほど、ブログ利用者の回線(速度)に依存する部分が少なくなります。各数値(特に「読み込み時間」)は計測する時間帯によって結構異なります。以下、具体的な設定方法を説明します。ソーシャルパーツで全てのチェックをオフにして、[変更を保存する]をクリックして確定します。代わりのシェアボタンを設置します。幸い当ブログが利用しているテーマ「Minimalism」には標準でハイセンスなシェアボタンが用意されていますので、そちらを利用します。現在、記事の上に表示されているものです。hitsuzi.hatenablog.comいま思えば、さっさと設置すればよかったのですが、自分がこれらのボタンを使わないため、デフォルトのままでよいかと後回しにしてしまいました。※2018年9月9日に「Minimalism」テーマの微調整が実施されました。2018年9月10日以降、シェアボタンの表示が異なっています。以前の表示に戻す手順については以下を参照のこと。www.inside-shiina.comMinimalismテーマでシェアボタンを設置するために必要な1ステップPoint紹介するコードをコピペする前にすでに追加しているコードのバックアップ(どこかにコピペ)を取っておくことをお勧めします。記事上の最後に以下のコードをコピペし、[変更を保存する]をクリックして確定します。fa-rss"></i></a></div>※「https://inside-shiina.hatenablog.jp」部分を自分のブログのURLに変更してください。変更する必要はありません。※不要なボタンがあれば削除してください。-->から</a>までが1セットです。以上で設定は完了です。あなたのはてなブログの読み込み速度は改善しましたでしょうか。独自ドメインに移行してブログのURLを変更した際は忘れずに更新してください。以下の記事にはてなブログを独自ドメインに移行する際に必要になる手順を纏めています。非常に重要な事前準備編です。www.inside-shiina.com実践編です。www.inside-shiina.com以下は補足になります。シェアボタンの配置場所についてカラフルなデザインのシェアボタンを配置したいと考えている方も多いと思います。デザインを考える前に配置場所も重要です。結論を先に書くと「記事のタイトル下、本文の上(アイキャッチ画像の上)」が最適です。ブログ(サイト)利用者の大部分が記事を見るとき「F字型」と言われる目線の動かし方をするそうです。画面左上から右の水平方向へ移動し、少し下がってまた右へ水平方向に先ほどよりは短い距離を移動するという研究結果が出ています。記事タイトルを見た後、その下にあるシェアボタンを認識して貰うということですね。大多数のブログ(サイト)で「記事のタイトル下、本文の上」に配置されているのには、しっかり意味があるのです。「Minimalism」テーマでもデフォルトで最適な場所に配置されるようになっています。「はてなスター」ボタン無効化(非表示化)の効果について多くのサイトで「はてなスター」ボタンの無効化(非表示化)が読み込み速度の改善に有効であるとの情報がありました。ありがたいことに当ブログに「はてなスター」を付けてくださる方がいらっしゃいますので、無効化するつもりはなかったのですが、念のため試してみました。一応は確認はしたいですよね。設定箇所は、シェアボタンを設定したすぐ下にあります。設定前後で測定した結果は、以下になります。読み込み時間=13.6s、通信データ量=3.20MB、リクエスト数=556ほぼ誤差です。「はてなスター」は有っても無くても変わらないようです。当初の予定通り、有効のままにしたいと思います。今後ともどうぞよろしくお願いいたします。一度無効化しても、すでに頂いたスターは消えません。再度有効化すれば、再表示されます。心配でしたが、大丈夫でした。10秒未満になった方が見栄えがよいのですが、これ以上は難しそうです。有効であると言われている画像の圧縮も当ブログではあまり効果が見込めないようです。その他、優先度が高いものは大部分が「はてなブログ」側でないと触れない部分でした。無料版ではどうにもならない部分である以下が一番効果が大きそうです。ブログのヘッダ・フッタ(最上下部の黒い部分)を非表示Pro版に移行しないと正式には設定できないため、Pro版移行時に設定したいと考えています。===後日追記ここから===Pro版に移行したため、設定変更してみました。結果は、以下の記事で紹介しています。www.inside-shiina.comPro版移行後のブログの状況です。www.inside-shiina.com===後日追記ここまで===終わりに体感できるぐらい(これでも)速くなりましたので、ひとまずよかったです。ブログ初心者であるとはいえ利用者の方の事を考えればもっと早く対応しておくべきでした。今後のブログ運営に活かせればと考えています。