こんにちは、あとかです♪
このブログに足を運んでいただき、ありがとうございます。
特に、スマホ等モバイルから開いている皆様には、ご迷惑をかけし、申し訳ございません。
以前から、薄々感じていましたが、このブログの表示は非常に遅い様です。
ブログの表示速度に関しては、SEOにも関連があると言われています。
今回は、私自身の取り組んだ簡単にすぐできる、ブログの表示速度の対策5選について、ご紹介します。
- ブログの表示速度はSEOに関係がある？
- ブログ表示速度を確認する 「PageSpeed Insights」
- 簡単にすぐできるブログの表示速度対策5選
- 5 「はてブコメント」「はてなスター」の表示を消す【はてなブログ】
- まとめ
ブログの表示速度はSEOに関係がある？
実は、「ブログの表示速度はSEOに影響する」ということは、Googleから正式にアナウンスされています。
Googleサーチコンソールにも、昨年「速度（試験運用版）」の項目が新設されました。
特にモバイル環境での表示速度については、検索者がスピーディに結果を得るということが重視されています。
つまり同じ内容のサイトなら、表示速度が速い方が検索の上位に来るということになるのです。
ブログ表示速度を確認する 「PageSpeed Insights」
ご存知と思いますが、ご自身のブログ（サイト）のURLを入力するだけで、ページの読み込みの評価を確認できます。
トップページだけでなく、各記事（ページ）についても、表示速度が速いのか、遅いのか100点満点で評価が表示されます
また、モバイルとパソコン、それぞれで見ることができます。
ちなみにこのブログは、この様な結果でした。
パソコンは、まあまあの結果でした。
ところが、モバイルの方は。。。
かなり遅いという結果になりました。
実は、以前よりももっと遅くなっています。。。
詳細（「ラボデータ」）の確認
「▲」マークは、早急な対策の必要な項目です。
「■」マークは、できるだけ対策した方が良い項目です。
「●✔︎」マークは、対策不要の項目です。
改善できる項目
画面を下にスクロールしてみると、「改善できる項目」欄があります。
いろいろな項目で、短縮できる時間を提案されています。
「次世代フォーマットでの画像の配慮」に注目しましょう。
気づいていらっしゃると思いますが、サイトの表示速度を遅らせる原因は、データ量の「重さ」です。
「重さ」と言えば、やはり画像が一番の原因になっています。
「オフスクリーン画像の遅延読み込み」という項目も気になると思いますが、とりあえず無視しましょう。
これは、モバイルで表示される部分は限られるので、まず見えるところだけ優先的にさっと表示してしまうという対策です。
後からしか見ない部分はゆっくり表示すると言う便利な話なのですが、すぐにできる対策はありません。
例の「CSS」のようなものを使いこなせる上級の方々にしかできないと思います。
簡単にすぐできるブログの表示速度対策5選
1 不要な画像を削除する
すぐにできる対策です。
私は、何となく賑やかしのために貼っている画像が、かなりありました。
何も画像がないのは寂しすぎますし、参考画像が無さすぎるのもSEOにも逆効果です。
どうしても削れない画像も多いと思います。
また、私は海外ドラマの話題の記事を書く際に、公式ホームページなどの引用画像を貼り付けることが多いです。
それも、アフェリエイトのDVDのパッケージを貼ることで、かなり軽くなります。
2 こまめにトリミングする。
ご自身で撮影した写真は、かなり画像サイズが大きいと思います。
最初から画質を落としてアップロードし、さらにトリミングの加工もしておきましょう。
チリも積もればと言いますので、無駄な部分は切り取っておきましょう。
3 画像を縮小して、軽くする。
はてなブログの場合、写真を簡単に貼り付けることができます。
さらに画像サイズも、表示する際に勝手に最適化してくれています。
大変便利なのですが、そのせいかめちゃめちゃ重たい画像のまま貼り付けてしまうことがあります。
そういった画像をまず調整してみるのが、表示速度改善の早道です。
はてなブログの写真縮小の手順
ステップ①：「写真を投稿」→「HatenaBlog(private)」↗️
はてなブログの「写真を投稿」の上の、斜め矢印から「はてなフォトライフ」に入ります。
ステップ②：「はてなフォトライフ」→「HatenaBlog」「編集」
「はてなフォトライフ」の「HatenaBlog」に入ってください。
はてなブログで使った画像で、縮小したい画像を選びます。
選ぶのはもちろん、先ほどの「次世代フォーマットでの画像の配慮」の中で、上位の画像です。
ステップ③：「編集」「この画像を編集する」→ピクセル変更→ブログ貼り付け
選んだ画像を直接「編集」か、「画像を編集」をクリックします。
そうすると、画像サイズを入力できる画面になります。
長辺が1200ピクセルというのは、はてなブログで自動で設定されるサイズです。
元々が、大きな画像も1200ピクセルに編集されていると思います。
私は、一応600ピクセルに設定しています。
まだ模索中ですが、100KBを目安に、出来るだけ下げるように調整しているところです。
ご自身でお試しいただいて、調整いただくのが良いと思います。
あまり小さくしすぎると、画像がぼやけてしまうので、プレビューを見ながら最終調整してください。
特にスマホのプレビューでも見えるか、パソコンの大きな画面でぼやけていないかをご確認いただくとうまくいきます。
元々のサイズが小さい画像を、さらに縮小するとボケボケになってしまうと思います。
文章で読むと難しそうに見えるかもしれませんが、やってみると案外簡単です。
しかもすぐに結果が出ます。
なお、フォトライフには、①縮小した画像と、②元々の画像の両方が残っていますので、不要な方を削除してください。
4 デザイン見直し【はてなブログ】
①全体の画像見直し
ブログのヘッダー、タイトル画像の削除、サイズ調整。
私は使用していませんが、ご自身でブログ名やそのヘッダー部分に、綺麗なタイトル画像を貼っている方も多いと思います。
その画像が重いと、毎回開くまでが遅くなります。
意外なところでは、プロフィールの自画像などが、重たいことあります
②コピペして使いすぎているCSSの整理、削除
上級者様がお作りになる「CSS」も重たくなる原因だそうです。
様々なサイトで提供いただいている「コピペだけで使えるCSS」をお使いの方は、不要なものが残っていないか、一度ご確認ください。
私もそうですが、理解していないままにやたらと使ってしまうので、不要になってもそのまま貼りっぱなしになっています。
特にテーマを変えた方は、それ以前に使用していた「デザインCSS」部分などは不要な可能性が高いです。
※削除する前に、必ずバックパップを取ってから作業をしてください。
③シェアボタン
凝ったものでなければ、それほど問題はないみたいです。
設置しないと言うのも手ですが、はてなブログのベーシックなシェアボタンは最も軽いものだそうです。
④ヘッダー、フッター非表示（はてなブログProの方）
これは、はてなブログProの方だけです。
ご存知と思いますが、はてなブログ専用のヘッダーとフッターが、非表示にできます。
ただ、これはパソコン版だけの設定ですので、モバイルには影響ありません。
「設定」→「詳細設定」→「ヘッダとフッタ」
⑤「過去記事」転送の整理
丁寧にブログを書かれている方は、「関連記事」を貼り付けることも多いと思います。
一つ一つはそれほどではありませんが、貼り付けすぎると、意外と重くなります。
不要なリンクを削除しただけで、表示速度がかなり改善します。
5 「はてブコメント」「はてなスター」の表示を消す【はてなブログ】
はてなスターは、ブログで他者と繋がっていることを実感でき、読んでもらっている励みにもなります。
「はてなブログ」の売りであり、とても良いギミックだと思います。
ただ、表示速度にはどうしても悪影響があります。
実際に非表示にすると、ブログの表示速度はかなり改善します。
そのため、私も今回から「はてなスター」を非表示にすることにしました。
しばらく様子を見て、寂しくなって、また表示するかもしれませんが、一旦は非表示にしてみます。
これまでスターをつけていただいた皆様、本当にありがとうございました！
私からのスターは、当然これまで同様（それ以上に？）つけさせていただきます。
今後ともよろしくお願いします。
まとめ
今回は、簡単にすぐできるブログの表示速度対策5選をまとめてみました。
以前、似た記事を書いたのですが、リライトも兼ねて改めて書きました。
今回の対策を打った後、「PageSpeed Insights」でモバイルは22→33まで上昇しました。
そうは言ってもまだまだ赤の圏内ですが、今後は記事を一つ一つ見直していくしか無いと思います。
少なくとも、この記事の表示速度が上がっていれば幸いです。
最後までお読みいただき、ありがとうございました。
それでは、また次回。
