クマの旅行日記

留学情報とお役立ちテニス情報を発信

MENU

PageSpeedInsightではてなブログの表示速度を16→40にした2つの方法


スポンサードリンク

f:id:yasunari7373:20220103114954j:plain

はてなブログがサチコにURL登録されない問題に直面しました。

どうやらURL登録されない原因として、ブログの表示速度が関係しているようなので、今回は他のブログ主様の方法を参考にしながら表示速度対策をしました。

その結果、PageSpeedInsightではてなブログの表示速度を13→40に改善できたので方法を紹介します。

 

 

原因:「検出-インデックス未登録」

サチコの「カバレッジ→除外」を見てみると、「検出-インデックス未登録」に登録されてない記事が集まっています。

どうやらURL検査やサイトマップ申請をした時に、記事は検出されているもののインデックス登録がされてないようです。

そこまで行ったなら登録してくれや!

 

f:id:yasunari7373:20220103105049p:plain

 

根本的なところに問題があるのではないかと思い、調べたところ、

「ホームページへの過負荷が予測されクロールを辞めた」というのが一つの原因のようです。

つまりお前のブログ重すぎてクロールできんわ!!という状態ですね。

 

なので表示速度を軽くするために4つの方法を試しました。

参考にした記事はこちら。

検出-インデックス未登録の改善法|大阪のWeb制作会社セブンデザイン

 

PageSpeedInsightで現在の表示速度を確認

自分のブログが本当に重いのか確かめます。

ツールはPageSpeedInsightとういう無料のツールを使いました。

f:id:yasunari7373:20211227033941p:plain
f:id:yasunari7373:20211227034941p:plain
対策前のスコア。左がモバイルで右がデスクトップ。携帯前がかなり重い様子


結果を見てみるとモバイルの方がひどい様子

どうやらはてなブログ側のコードの問題でモバイルはもともと重いようです。

 

 

モバイル側がなぜ重いのか見てみると、「使用していないJavascriptの削減」や「次世代フォーマットでの画像の配信」などが原因のようです。

「使用していないJavascriptの削減」は記事をJavascriptで書いていない方にとっては結構どうしようもない問題ですが、はてなブログ側のコードが重い、というものです。

「次世代フォーマットでの画像の配信」は、記事に使われている画像が重い、というものです。

f:id:yasunari7373:20211227035221p:plain

 

今回はこの二つを対策していきます。

 

効果のあった対策

対策①次世代画像フォーマット

ブログに添付する画像を適切な画像形式に圧縮することで、読み込み時間を軽減ができるようです。参考にした記事はこちら。

「次世代フォーマットでの画像の配信」の改善 | 株式会社レクタス

 

今回はSquooshというサイトを用いてMozJPEGという形式に変換しました。

画像にもよりますが、50~90%くらいのデータ量を圧縮できました。

 

【結果】

効果あり!64%削減した結果、モバイルのスコアが37まで改善しました。

 

f:id:yasunari7373:20211227043914p:plain

「次世代画像フォーマットでの画像の配信」が4.8→1.8[s]まで減りました。

 

f:id:yasunari7373:20211227044322p:plain

 

ここからは別の記事を参考に高速化します。

参考にしたブログはこちら

簡単にできるはてなブログの高速化・9つの対処法 – パソコンガイド

 

対策②はてなフォトライフで画質を落とす

記事に添付した画像は一旦はてなフォトライフに保存されます。

このときに自動で画質を調整してデータ容量を圧縮することができるのでやってみます。「画質」→80%に設定。

f:id:yasunari7373:20211227045011p:plain

 

 

【結果】携帯でちょっと上がりました

 

f:id:yasunari7373:20211227045621p:plain

最終的にPCのスコアも上がっています。

f:id:yasunari7373:20211227045733p:plain

ページごとに読み込み時間を確認する方法

Google Analyticsから、各記事の読み込み時間を確認することができます。

やりかたは、Analytics上の左のタブから「行動→サイトの速度→ページ速度」とみるだけです。ページ右側が緑色なら標準的な読み込み速度で、赤いと遅いようです。

f:id:yasunari7373:20220103115849p:plain

 

自分が確認したところ、レビュー記事などの、画像を多く使っている記事で読み込み時間が長くなっていました。

これを用いて、画像を圧縮すべき記事だけを簡単に探すことができます

 

あまり効果のなかった施策

他にも以下の記事を参考に3つの施策を行いました。

しかし自分のブログにおいては効果がなかったのでさらっと乗せるだけにします。

はてなブログを高速化する方法5選!表示スピードが遅いと基本的に損です - simplelog.me

 

①デザインCSSを圧縮

CSS Minifier (スタイルシートの圧縮)というサイトを用いて、はてなブログのデザインCSSを簡略化します。非効率的なコードを自動で修正してくれて、ページの読み込み速度が上がることが期待できます。

【結果】変わりませんでした。

 

②ブログテーマをシンプルに変えてみる

はてなブログのテーマを軽いものにすることで、読み込み速度が上がるようです。

しかし自分の使っている【パレット】はもともと割と軽い部類らしいので何もしませんでした。テーマごとの軽さを検証している記事を参考にしたので乗せておきます。

【はてなブログ】軽いテーマを探せ!!公式とテーマストア(一部)、表示速度の測定結果一挙公開!! | オコジョ的じゅりいズム

 

③コメントとスター非表示

はてなブログの機能であるはてなスターとコメントが重いと出てきたので、非表示にしてみました。不要なJavascriptの削減につながるかと思っています。参考にした記事はこちら。

はてなブログの表示速度が劇的改善。トップページからコメントとスターを非表示にする方法 | LIFEPORT

 

【非表示にした様子】

デザイン→ソーシャルパーツから非表示にできます

f:id:yasunari7373:20211227045245p:plain
f:id:yasunari7373:20211227051449p:plain
ソーシャルパーツとコメントの非表示

 

【結果】

逆に悪化。自分のブログではあまり効果がなかったです。

f:id:yasunari7373:20211227034910p:plain

 

 

 

 

結論:画像の圧縮で表示速度は上がる!

今回自分が行った施策とその結果はこちらです!

最終的にモバイルで40、デスクトップで85までスコアを向上できました

効果のあった施策!
  • 次世代画像フォーマットへの変換・画像圧縮
  • はてなフォトライフで画質の自動調整
効果の無かった施策!
  • デザインCSSの簡略化
  • デザインテーマの変更
  • はてなスター・コメントの非表示