【はてなブログ】サイトの表示速度の改善方法
こんにちは、カワルンです。
みなさんは自分のサイトスピードをチェックしていますか？
さまざまなブログでも取り上げられることの多いこの話題。
今日はブログの表示速度を改善するために行った対処方法をまとめます。
ウェブページの表示速度
まずはウェブページが表示されるまでにかかる時間をチェックしてみましょう。
サイト「Page Speed Insights（ページスピードインサイト）」で表示速度を測ることができます。
速度はスコアで表示されます。
現在、「書く、走る。」のスコアは以下のとおりです。
PC版はスコア53でギリギリ合格。
もう少し改善したいところです。
モバイル版はスコア16で不合格。
ここまで低いとは……あぜん。
スコアをさらすのもお恥ずかしい限りです。
表示速度が遅いとどうなる？
読者が離脱する
表示速度が遅いと、読者の離脱率が上がるといわれています。
表示に3秒以上かかると、半数のユーザーが離脱するそう。
参考：表示速度が1秒→7秒で直帰率は113%↑、モバイル向けサイトのUXはとにかくスピードが命 | 海外SEO情報ブログ
クリックしたサイトがなかなか表示されない、表示に時間がかかる重たいページは、
閉じられてしまう可能性が高いです。
検索順位が下がる
2018年、Googleはアルゴリズム「Speed Update」の更新を行いました。
サイトスピードが検索結果に影響を与える可能性があるといわれています。
ブログ1年目でこの遅さ。なんとかしなければなりません。
表示速度を上げるための対処方法
サイトスピードを上げるために、今回行った対処方法を紹介します。
シェアボタンをカスタマイズ
はてなブログの場合、シェアボタンはデフォルトよりもカスタマイズした方が速度が上がります。
カスタマイズのシェアボタンの設置方法は、『コピペで簡単！はてなブログのSNSシェアボタンをカスタマイズ | SHIROMAG』を参考にさせていただきました。
はてなブックマークコメントの削除
はてブコメントをチェックしやすいので表示させていたのですが、
記事下にある「はてブコメント」を非表示にしました。
不要な広告を削除
成果のない広告を削除しました。
ブログデザインもすっきりして、雰囲気が良くなります！
画像の圧縮・縮小
画像は圧縮した後に縮小してから貼り付けます。
画像を圧縮できるサイトはいろいろありますが、
私が利用しているのは『JPGイメージをオンラインで圧縮する』です。
画像の縮小は
『はてなブログでアップロードした画像サイズを簡単に縮小して軽量化する方法 - つなろっく』を参考にさせてもらいました。
これはまだ作業途中です。
今までアップしてきた画像を1枚ずつ修正していきます。
CSSとJavascriptの整理
デザインや設定をゴニョゴニョいじってきたコードですが、不要なものが多いといわれました。
必要に応じて整理したり、削除したりしました。
まだまだ修正できる箇所がありそうです。
コードの見直しも引き続きしていく予定です。
モバイル版はよりシンプルに
とくにモバイル版のスピードがなかなか改善されません。
無駄をなくしてよりシンプルに！をモットーに思い切って修正しました。
たとえば記事上の読者登録ボタンや関連記事などを非表示にしました。
はてなスターの撤去は検討中
ここ数カ月、ずっと悩んでいるのが「はてなスター」です。
スターがあると重たい……。
いろいろなサイトを訪問してみても、スターを表示させるのに時間がかかっていると思います。
しかし！はてなブロガー同士の交流にもなる「はてなスター」。
スターをつけてくれた方のブログに訪問したい気持ちもあります。
できれば撤去したくない。
ということでもうしばらく様子見です。
画像修正などの対処してみて、表示速度が改善しなければ、はてなスターの撤去を検討します。
修正後のスコア
ではでは、あれこれ試してみた結果のスコアです。
パソコン版のスコア
ずいぶん改善しました。
モバイル版のスコア
合格になりましたが、測定したときによって30ぐらいになるときもあります。
まだまだ改善が必要です。
まとめ
今日ははてなブログ表示速度を改善するための対処方法についてまとめました。
まだまだ問題ありで、しばらくはメンテナンスしていかなければなりません。
少しずつ画像を修正しながら、サイトスピードが改善するか確かめたいと思います。
■ この記事のつづき ■
