はじめに
Adsense の以下の攻略本を読んでいたところ、SEO対策の１つにページ速度を上げるという項目がありました。
- 作者:オフィスペンぎん
- 発売日: 2020/08/01
- メディア: Kindle版
はてなブログは有償プランもあるくらいだから、まあ Google PageSpeed Insightでもいいスコアが出るだろうと思って、当ブログのトップページ(https://www.aruse.net/)を試してみたところ、なんとまあ悲惨な結果になりました。
なんと、モバイルで２１ポイント、パソコンで５１ポイントという有様です。
パソコンもひどいけど、モバイルはひどすぎで笑ってしまいました。
お金を取っていて、さすがにそれはないだろうと思いました。💦
ネットを検索してみると、はてなブログは激重で有名っぽい？
とは言え、既にたくさんの記事をはてなブログで書いているので移行も難しく、なんとか速度向上できないか試してみたのでその方法をご紹介します。
パソコンサイトの速度向上策
パソコンの速度向上策として、以下の対応を行いました。
ヘッダー画像のサイズを小さくする
ヘッダー画像って無頓着にフリー素材をアップロードして、画像切り抜きで表示していたりすることが多いと思うのですが、それはダメです。
画像は１１４０ｘ２００のサイズにトリミングして、画像圧縮サービスで画像サイズも圧縮します。
今回は、以下の画像圧縮サービスを利用させていただきました。
結局、これが一番効果が高かったですね。
SNSシェアボタンといいねボタンの削除
はてなブログでは、はてなブックマークやTwitterなどのSNSでシェアするボタンを表示する機能や、いいねボタンがありますが、これを非表示にして、代替のSNSシェアボタンを表示すると結構速度が改善しました。
今回は以下の記事で紹介されている方法で、SNSのシェアボタンを設置したのですが、効果は高かったですね。
トップページの記事表示件数を減らす
トップページの記事の表示件数を１５件にしていたのですが、１０件に減らしたところ、少しポイントが上がりました。
ブログのヘッダとフッタを非表示にする
Pro版でしかできませんが、ブログのヘッダとフッタを非表示にすることで速度が改善した気がします。
画像遅延読み込み
lazysizesによる画像遅延読み込みを行います。
Lazyload による画像遅延読み込み方法もありますが、画像のタグをいじる必要がないので、個人的には lazysizes がよいのではないかと思います。
設定方法は下記記事を参照してください。なお、バージョンは最新の5.2.2の https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js(https://cdnjs.com/libraries/lazysizes/5.2.2)を使用しました。
パソコンサイトの対策結果
上記の対策の結果、パソコンサイトのスコアを５１ポイントから８５ポイントまで向上させることができました。
まあ、実行するたびにスコアが変わるので、ネットワークの速度が関係していると思いますが、それなりのものになりましたね。
モバイルサイトの速度向上策
モバイルサイトでは、レスポンシブデザインが速度に大きく影響します。
レスポンシブデザインをやめる
モバイルサイトではレスポンシブデザインはびっくりするくらい遅いのでやめましょう。
その代わりに、はてなブログ標準のスマートフォン機能を利用します。
ヘッダー画像のサイズを小さくする
パソコンと同じ対策ですが、ヘッダー画像をきっちり３６０ｘ２００にトリミングして、画像圧縮をかけます。
これはやはり効果が高いようです。
デザインの設定でHTMLはスマートフォンのものを使用するようにする
細かいですが、デザインの設定で、パソコン用のHTMLを使用することができるのですが、それではなくスマートフォン用のHTMLを使用します。
ちなみに、はてなブログ標準のSNSシェアボタンはパソコンでしか使えませんが、スマートフォン用HTMLをうまいことやることで、パソコンで設置したSNSシェアボタンをモバイルサイトでも設置することができます。
画像遅延読み込み
モバイルサイト用に、スマートフォンの設定でも同様に画像遅延読み込み設定を行います。
モバイルサイトの方は、３ポイントぐらい上がったので効果が高そうです。
モバイルサイトの対策結果
上記対策を行うことで、モバイルサイトのスコアを２１ポイントから５３ポイントまで向上させることができました。
パソコンサイトと同じく、ネットワーク速度の影響か実行ごとにポイントはブレるようです。
正直、まだ速度に不満はありますが、はてなブログではこれくらいが限界のようです。
おわりに
パソコンサイトとモバイルサイトで、はてなブログを Google PageSpeed Insight で高スコアを出す方法をご紹介しました。
本当は、こういうのは何もしなくてもある程度のスコアが出ることが望ましいのですが、はてなブログの今後に期待したいと思います。
