greenの日記

ブログ運営/投資/株主優待/REIT・インフラファンド/アドセンス の話し

【ブログ運営】ウェブに関する主な指標(LCP)が気になるので改善中です!

こんにちはgreenです。昨日に引き続き、ウェブに関する指標(LCP)が気になるので、ページを速く表示できるように改善をしています。

まっガンバレよ、このヘタレ野郎😡

頑張るよ!くーるBabyさん😊

それでは、今日もウェブに関する主な指標(ページの表示速度)を改善しています。

この記事は、昨日考えた改善を行い、Page Speed Insightsで改善結果を確認することを繰り返し実施します。

この記事を読んで欲しい人は、ウェブに関する指標(LCP)が気になる人になります。

記事の内容は、改善内容を確認改善を実践、最後にまとめを書きます。

改善内容の確認

昨日、下の記事で改善内容を確認し、2つ改善を行いました。

残りの改善内容

残りの改善内容は、次になります。

  1. グーグルアドセンスのリンクユニットをやめる2020/06/27/GSC-Web_Sihyo-LCP_Kaizen
  2. 記事にも貼っているアイキャッチ画像をやめる
  3. はてなブログの読者登録ボタンをやめる
  4. ツイッターのフォロワーボタンをやめる
  5. ブログのヘッダーとフッターを表示しない
  6. はてなスターをやめる
  7. 吹き出しで利用している画像サイズを小さくする
  8. パンくずリストの階層化をやめる
  9. 画像のサイズを小さくする
  10. CSSの内容を見直す
  11. レスポンシブデザインをやめる(スマートフォン)

スコアとLCP

昨日、改善した時のスコアとLCPの履歴です。

  • スコア
    モバイル版:19→21→39
    パソコン版:53→56→57
  • LCP
    モバイル版:2.3s→2.3s→2.3s
    パソコン版:2.1s→2.1s→2.1s

気になる点としては、Page Speed Insightsのスコア結果が安定しないことです。
特にモバイルのスコア結果の差が大きく、1回目実行時のスコアが悪いように思います。

改善の実施

では、引き続き、改善を行いスコア確認を行います。

はてなブログの読者登録ボタンをやめる

画面右のサイドメニューにあったはてなブログの読者登録ボタンを削除すると、スコアとLCPは次のようになりました。
※赤文字が今回の確認結果で、()内が前回との比較の評価です。

  • スコア
    モバイル版:19→21→39→20(✖)
    パソコン版:53→56→57→55(✖)
  • LCP
    モバイル版:2.3s→2.3s→2.3s→2.4s(✖)
    パソコン版:2.1s→2.1s→2.1s→2.1s(-)

f:id:greenupf:20200627204352p:plain

改善される筈なのに、結果が悪くなっています💦。

ツイッターのフォロワーボタンをやめる

画面右のサイドメニューにあったツイッターのフォロワーボタンを削除すると、スコアとLCPは次のようになりました。

このあとから、Page Speed Insightsのスコア結果が安定しないので、5回計測して平均値をとることにします。👇5回の計測結果と平均値です。

f:id:greenupf:20200628080434p:plain

  • スコア
    モバイル版:19→21→39→20→28.8(○)
    パソコン版:53→56→57→55→53.2(✖)
  • LCP
    モバイル版:2.3s→2.3s→2.3s→2.4s→2.4s(-)
    パソコン版:2.1s→2.1s→2.1s→2.1s→2.1s(-)

モバイルは良くなったけど、パソコンが悪くなった💦。どんどん理解できなくなってきた。

ブログのヘッダーとフッターを表示しない

ブログのヘッダーフッターは表示しない設定になっていました。
※この設定は、はてなブログのProのみ対応可能です。

はてなスターをやめる

記事下に表示されるはてなスターを非表示にすると、スコアとLCPは次のようになりました。

  • スコア
    モバイル版:19→21→39→20→28.8→24.25(✖)
    パソコン版:53→56→57→55→53.2→57.25(○)
  • LCP
    モバイル版:2.3s→2.3s→2.3s→2.4s→2.4s(-)
    パソコン版:2.1s→2.1s→2.1s→2.1s→2.1s(-)

はてなスターの表示設定は、表示に戻していますので、がんがんスターつけてください。

吹き出しで利用している画像サイズを小さくする

吹き出しで利用している画像サイズを小さくすると、スコアとLCPは次のようになりました。

  • スコア
    モバイル版:19→21→39→20→28.8→27.8(✖)
    パソコン版:53→56→57→55→53.2→67.6(○)
  • LCP
    モバイル版:2.3s→2.3s→2.3s→2.4s→2.4s(-)
    パソコン版:2.1s→2.1s→2.1s→2.1s→2.1s(-)

画像サイズ変更は、greenとcoolBabyの2つで、40KB小さくなりました。
スコアは上がったのかなあ🤔。

 まとめ

 昨日に引き続き、ウェブに関する指標(LCP)が気になったので、ページを速く表示できるように改善を行いました。改善の結果が分からないので、グラフにしました。

f:id:greenupf:20200628091045p:plain

グラフを見ると、気持ち改善されたように感じますが、改善されていないような気もします。
 残りの改善内容は、8以降になりますが、改善の効果が低いので、一旦、終了します。

  1. グーグルアドセンスのリンクユニットをやめる2020/06/27/GSC-Web_Sihyo-LCP_Kaizen
  2. 記事にも貼っているアイキャッチ画像をやめる
  3. はてなブログの読者登録ボタンをやめる
  4. ツイッターのフォロワーボタンをやめる
  5. ブログのヘッダーとフッターを表示しない
  6. はてなスターをやめる ※設定変更なし
  7. 吹き出しで利用している画像サイズを小さくする
  8. パンくずリストの階層化をやめる
  9. 画像のサイズを小さくする
  10. CSSの内容を見直す
  11. レスポンシブデザインをやめる(スマートフォン)

はてなブログさんがサーバーのスペックや、ページ表示の仕組みを変えれば、改善されないのかなあ🤔

出た、他力本願😡

 ウェブに関する主な指標って何と思った人は👇の記事で確認ください。

 ページのスコアを確認する方法は、👇の記事で確認ください。 最後まで読んでいただきありがとうございます。 このエントリーをはてなブックマークに追加