あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、SEとしての経験から取り上げたり解説したりしています。

激重はてなブログで速度向上させ、Google PageSpeed Insightの高スコアを出す方法

はじめに

Adsense の以下の攻略本を読んでいたところ、SEO対策の1つにページ速度を上げるという項目がありました。

コツコツやる人のためのAdSense攻略本

コツコツやる人のためのAdSense攻略本

はてなブログは有償プランもあるくらいだから、まあ Google PageSpeed Insightでもいいスコアが出るだろうと思って、当ブログのトップページ(https://www.aruse.net/)を試してみたところ、なんとまあ悲惨な結果になりました。

なんと、モバイルで21ポイント、パソコンで51ポイントという有様です。

パソコンもひどいけど、モバイルはひどすぎで笑ってしまいました。

お金を取っていて、さすがにそれはないだろうと思いました。💦

ネットを検索してみると、はてなブログは激重で有名っぽい?

とは言え、既にたくさんの記事をはてなブログで書いているので移行も難しく、なんとか速度向上できないか試してみたのでその方法をご紹介します。

パソコンサイトの速度向上策

パソコンの速度向上策として、以下の対応を行いました。

ヘッダー画像のサイズを小さくする

ヘッダー画像って無頓着にフリー素材をアップロードして、画像切り抜きで表示していたりすることが多いと思うのですが、それはダメです。

画像は1140x200のサイズにトリミングして、画像圧縮サービスで画像サイズも圧縮します。

今回は、以下の画像圧縮サービスを利用させていただきました。

www.iloveimg.com

結局、これが一番効果が高かったですね。

SNSシェアボタンといいねボタンの削除

はてなブログでは、はてなブックマークやTwitterなどのSNSでシェアするボタンを表示する機能や、いいねボタンがありますが、これを非表示にして、代替のSNSシェアボタンを表示すると結構速度が改善しました。

今回は以下の記事で紹介されている方法で、SNSのシェアボタンを設置したのですが、効果は高かったですね。

www.okdkdk.com

トップページの記事表示件数を減らす

トップページの記事の表示件数を15件にしていたのですが、10件に減らしたところ、少しポイントが上がりました。

ブログのヘッダとフッタを非表示にする

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)を使用しました。

naruhesogoma.net

パソコンサイトの対策結果

上記の対策の結果、パソコンサイトのスコアを51ポイントから85ポイントまで向上させることができました。

まあ、実行するたびにスコアが変わるので、ネットワークの速度が関係していると思いますが、それなりのものになりましたね。

パソコンサイトの速度

モバイルサイトの速度向上策

モバイルサイトでは、レスポンシブデザインが速度に大きく影響します。

レスポンシブデザインをやめる

モバイルサイトではレスポンシブデザインはびっくりするくらい遅いのでやめましょう。

その代わりに、はてなブログ標準のスマートフォン機能を利用します。

ヘッダー画像のサイズを小さくする

パソコンと同じ対策ですが、ヘッダー画像をきっちり360x200にトリミングして、画像圧縮をかけます。

これはやはり効果が高いようです。

デザインの設定でHTMLはスマートフォンのものを使用するようにする

細かいですが、デザインの設定で、パソコン用のHTMLを使用することができるのですが、それではなくスマートフォン用のHTMLを使用します。

ちなみに、はてなブログ標準のSNSシェアボタンはパソコンでしか使えませんが、スマートフォン用HTMLをうまいことやることで、パソコンで設置したSNSシェアボタンをモバイルサイトでも設置することができます。

画像遅延読み込み

モバイルサイト用に、スマートフォンの設定でも同様に画像遅延読み込み設定を行います。

モバイルサイトの方は、3ポイントぐらい上がったので効果が高そうです。

モバイルサイトの対策結果

上記対策を行うことで、モバイルサイトのスコアを21ポイントから53ポイントまで向上させることができました。

モバイルサイトの速度

パソコンサイトと同じく、ネットワーク速度の影響か実行ごとにポイントはブレるようです。

正直、まだ速度に不満はありますが、はてなブログではこれくらいが限界のようです。

おわりに

パソコンサイトとモバイルサイトで、はてなブログを Google PageSpeed Insight で高スコアを出す方法をご紹介しました。

本当は、こういうのは何もしなくてもある程度のスコアが出ることが望ましいのですが、はてなブログの今後に期待したいと思います。