はてなブログのページ表示速度を上げる簡単な方法

今回の記事は『はてなブログのページ表示速度改善方法』についてです。

SEO対策で実は重要な部分にもなり、意外と気にしていない方が多いのではないかと思います。

その理由としてはサイドバーなどにたくさんの情報を盛り込んでいる方が多いので、CS読み込みなどに時間が掛かるからです。

筆者も知らず知らずに情報を盛りだくさんにしており、気づいた時にはページ表示測定で思いっきりのレッドラインになっていました。

そこから筆者が実際に行った簡単な改善方法をご紹介しますので、参考までにお役立て下さい。

1.ページ速度の確認方法

まずはグーグルサーチコンソールを使用していきます。

左のサイドバーに『ウェブに関する主な指標』赤線アンダーラインを引いた項目をクリックします。

するとこの画面になります。

赤線で引いた場所をクリックするとモバイルページの速度テストを行え、青線の場所をクリックするとパソコンページの速度テストを行えます。

実際にクリックしてみるとこの様に読み込みが始まります。URLは入力しなくても自動的に入力されているので、そのままで大丈夫です。

実際の速度テスト結果はこの様に表示されます。

こちらはモバイル版の速度表示結果です。

こちらはパソコン版の速度表示結果です。

このテスターはテストクリックする度に数字が若干変化しますので、正確な数値ではないと思われるので、数回クリックして平均値を取ると精度が高くなってくると思います。

ちなみに数値が高くなるほどページ速度が速くなっています。

2.ページ速度の向上方法

先ほど紹介した速度結果はページ速度改善後の数値になります。モバイルページで約20以上パソコンでも約20以上ほど速度が上がりましたので、ご紹介させていただきます。

2.1サイドバーのリンク表示を減らす。

広告と外部サイトのリンクを減らしました。

・関連記事を削除

・最新記事を画像ではなくタイトルのみ

・広告は重要なポジションの1つのみ

これだけでPC版速度が10以上上がりましたが、モバイル版には変動なしです。

2.2トップページの記事数を減らす

トップページの記事数を15記事から6記事まで減らしました。

基本的にブログは検索流入がメインになってくるので、トップページの記事数を増やしても意味がないことに気づき削減。

これによりモバイル版とパソコン版の数値が5～6程度速度上昇になりました。

3.3AMPを使用する

こちらははてなPRO登録者の人限定になりますが、『設定』→『詳細設定』からAMPチェック欄にチェックを入れるだけです。

これはグーグルも推奨しているもので、実装したところモバイル速度が15以上改善されました。

実装しても記事のページがパソコンとモバイル両方何も問題はなく表示されているので、今のところ大丈夫です。

AMPに関してのCSS記述に関しては現在調べていますので、わかり次第更新致します。

まとめ

他にも画像を変換したり、CSSコードを圧縮したりといろいろありますが、慣れていないとコードが上手く作動しなくなったりしますので、簡単に速度アップ出来る手順をご紹介しました。

だいたい1時間も掛からずに速度を上げることが出来るので、参考までにお役立てください。