インサイド シーナ

日々の備忘録(40代男性の場合)

【はてなブログ】ページ読み込み速度が遅いことに気づいて改善した平成最後の夏

はてなブログが遅い

こんにちは。シーナと申します。

ブログのカスタマイズ、第9弾になります。

はてなブログのページ読み込み速度についてです。

前々から気にはなっていましたが、無料版ですし、こんなものだろうと考えていました。

しかし、先日ネット回線が一時使えなくなり、スマホの回線からブログの更新と確認のために何度もアクセスすることになりました。

そこでやはり遅いと感じたため、何とか読み込み速度を改善できないかと調べました。

その結果、本当に簡単な設定で無事体感できるレベルで改善することが出来ました。

以下が調べた結果になります。

あなたのブログの参考になれば幸いです。

結論

はてなブログ読み込み速度改善

当ブログにおいて、ページ読み込み速度改善に有効だった設定は、以下の1点のみです。

はてなブログのデフォルトのシェアボタンの無効化

体感できるレベルで明らかに速くなりました。

客観的に確認する方法

「GTmetrix」というサイトで自分のブログ(他のサイトでもOK)のURLを入力するだけで、

「読み込み時間」、「通信データ量」、「リクエスト数」等を確認できます。

改善ポイントも提示してくれます。

英語のサイトですが、直感的に分かりやすいです。

ブログのトップページだけでなく、特定の記事(URL)も指定できます。

gtmetrix.com

当ブログの測定結果

対象ページは、トップページ(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つの数値が少ないほど、ブログ利用者の回線(速度)に依存する部分

少なくなります。

各数値(特に「読み込み時間」)は計測する時間帯によって結構異なります。

以下、具体的な設定方法を説明します。

本当に簡単です。

デフォルトのシェアボタン(ソーシャルパーツ)の無効化

ステップ1 デザイン => カスタマイズ => 記事 => ソーシャルパーツ

デザイン => カスタマイズ => 記事 => ソーシャルパーツ

で全てのチェックをオフにして、[変更を保存する]をクリックして確定します。

はてなブログソーシャルパーツ

代わりのシェアボタンの設置

必須ではありませんが、はてなブログのデフォルトのシェアボタンを消しましたので、

代わりのシェアボタンを設置します。

幸い当ブログが利用しているテーマ「Minimalism」には標準でハイセンスなシェアボタンが用意されていますので、そちらを利用します。

現在、記事の上に表示されているものです。

hitsuzi.hatenablog.com

いま思えば、さっさと設置すればよかったのですが、自分がこれらのボタンを使わないため、デフォルトのままでよいかと後回しにしてしまいました。

※2018年9月9日に「Minimalism」テーマの微調整が実施されました。

 2018年9月10日以降、シェアボタンの表示が異なっています。

 以前の表示に戻す手順については以下を参照のこと。

www.inside-shiina.com

Minimalismテーマでシェアボタンを設置するために必要な1ステップ

Point

紹介するコードをコピペする前にすでに追加しているコードのバックアップ(どこかにコピペ)を取っておくことをお勧めします。

ステップ1 デザイン => カスタマイズ => 記事 => 記事上にコピペ

Minimalismシェアボタン

デザイン => カスタマイズ => 記事 => 記事上

の最後に以下のコードをコピペし、[変更を保存する]をクリックして確定します。

 

<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を変更した際は忘れずに更新してください。

以下の記事にはてなブログを独自ドメインに移行する際に必要になる手順を纏めています。

非常に重要な事前準備編です。

www.inside-shiina.com

実践編です。

www.inside-shiina.com

以下は補足になります。

シェアボタンの配置場所について

F字型理論

カラフルなデザインのシェアボタンを配置したいと考えている方も多いと思います。

ただ、デザインを考える前に配置場所も重要です。

結論を先に書くと

「記事のタイトル下、本文の上(アイキャッチ画像の上)」

が最適です。

ブログ(サイト)利用者の大部分が記事を見るとき「F字型」と言われる目線の動かし方をするそうです。

画面左上から右の水平方向へ移動し、少し下がってまた右へ水平方向に先ほどよりは短い距離を移動するという研究結果が出ています。

記事タイトルを見た後、その下にあるシェアボタンを認識して貰うということですね。

大多数のブログ(サイト)で「記事のタイトル下、本文の上」に配置されているのには、

しっかり意味があるのです。

「Minimalism」テーマでもデフォルトで最適な場所に配置されるようになっています。

「はてなスター」ボタン無効化(非表示化)の効果について

はてなスター無効化

多くのサイトで「はてなスター」ボタンの無効化(非表示化)が読み込み速度の改善に

有効であるとの情報がありました。

大変ありがたいことに当ブログに「はてなスター」を付けてくださる方がいらっしゃいますので、無効化するつもりはなかったのですが、念のため試してみました。

一応は確認はしたいですよね。

設定箇所は、シェアボタンを設定したすぐ下にあります。

設定前後で測定した結果は、以下になります。

設定前

読み込み時間=13.4s、通信データ量=3.27MB、リクエスト数=569

はてなブログシェアボタン無

設定後

読み込み時間=13.6s、通信データ量=3.20MB、リクエスト数=556

はてなブログはてなスター無し

ほぼ誤差です。

「はてなスター」は有っても無くても変わらないようです。

当初の予定通り、有効のままにしたいと思います。

今後ともどうぞよろしくお願いいたします。

なお、一度無効化しても、すでに頂いたスターは消えません。

再度有効化すれば、再表示されます。

少し心配でしたが、大丈夫でした。 

その他の改善項目

はてなブログ読み込み改善ポイント

正直、10秒未満になった方が見栄えがよいのですが、これ以上は難しそうです。

一番有効であると言われている画像の圧縮も当ブログではあまり効果が見込めないようです。

その他、優先度が高いものは大部分が「はてなブログ」側でないと触れない部分でした。

なお、無料版ではどうにもならない部分である以下が一番効果が大きそうです。

ブログのヘッダ・フッタ(最上下部の黒い部分)を非表示

Pro版に移行しないと正式には設定できないため、Pro版移行時に設定したいと考えています。

Pro版に移行したため、設定変更してみました。

結果は、以下の記事で紹介しています。

www.inside-shiina.com

終わりに

体感できるぐらい(これでも)速くなりましたので、ひとまずよかったです。

しかし、ブログ初心者であるとはいえ利用者の方の事を考えればもっと早く対応しておくべきでした。

今後のブログ運営に活かせればと考えています。

 

それでは、また。

おすすめ記事です。

ブログ更新のお供に体重に優しい飲み物はいかがでしょうか。

www.inside-shiina.com

おやつもあります。特にラスクはおすすめです。

www.inside-shiina.com

ローソンにはおいしい低糖質パンもあります。

www.inside-shiina.com

普段の商品選択の参考になれば幸いです。

www.inside-shiina.com

おいしく食べた後はお口のお手入れも忘れずに行いたいです。

www.inside-shiina.com

メインのネット回線を変えることで通信費を下げることに成功しました。

www.inside-shiina.com

ブログ更新のお供にYouTubeはいかがでしょうか。

作業用に雑談がおすすめです。

www.inside-shiina.com

素晴らしい音楽もあります。

www.inside-shiina.com

食事ネタ多めの森羅万象日常系ギャグ漫画です。

www.inside-shiina.com

日常系ギャグ漫画の古典にして名作です。約30年ぶりの新刊も今年発売しています。

www.inside-shiina.com

大号泣間違いなしの名作テニス漫画です。劇場版アニメもおすすめです。

www.inside-shiina.com