PageSpeed Insights スコア改善日誌１

2020.08.20

運営しているサイトのPSIスコア改善のためにやったことメモ。
今回やったことは効果があったように見える。
CSSでヘッダー画像の横幅と高さを明示化しただけ。

実施した結果、モバイル版スコアが31pt ⇒ 47pt 【+16pt(+51%)】となり、大きな効果が見られた。

概要

環境

  • エックスサーバー
  • WordPress 5.4
  • Cocoon

なんのため

PageSpeedInsightsのスコア改善のため

いつ

2020年8月19日(水)

なにに

運営しているサイトのひとつ[K]

なにして

外観カスタマイズ「追加CSS」にCSSを（ヘッダーロゴ画像の横幅[width]と高さ[height]）を追記した

@media (max-width: 320px) {
   /* 横幅が320px以下の場合に適用するスタイル */
   .header-site-logo-image {
      width:300px;
      height:131px;
   }
}
@media (min-width: 800px) {
   /* 横幅が800px以上の場合に適用するスタイル */
   .header-site-logo-image {
      width:700px;
      height:306px;
   }
}

@media (min-width: 3000px) {
   /* 横幅が800px以上の場合に適用するスタイル */
   .header-site-logo-image {
      width:1200px;
      height:525px;
   }
}

※ なぜこの施策なのか。テーマはCocoonを利用している。Chrome開発ツールでヘッダー画像のCSSを確認したところ「width: 100%」となっていた。これは画面のサイズに応じて伸び縮みするので便利である…しかしこれでは事前に画像が利用する横幅と高さが確定できず、後述する問題に該当しそうに思えた。そのため「追加CSS」で横幅と高さを厳密に指定することとした。

※ 誤算：元々今回の処置は「累積レイアウト変更」の改善になると予想して処置したのだが、そこにはあまり関係せず別の項目の改善になった。計画通り・・・ではないのだが総合スコア含めて全体的に効果があったので結果オーライということで。

※ 320,800,3000ピクセルで区切っているが、これらの数値に厳密な根拠は無い。スマホ、タブレット、高解像度デスクトップそれぞれこんなくらいかな〜という感覚値で決めたもの。

※ ヘッダー画像は、1200ピクセル × 525ピクセル 165KB

どうなった

PageSpeedInsights のスコア改善が見られた。
大きく変化した項目は
・総合スコア
・合計ブロック時間
・インタラクティブになるまでの時間
の３点。

具体的な実施前と実施後の値は以下の通り。

　

モバイル

項目実施前実施後備考
総合スコア3147+16pt (+51%)
フィールドデータ
　FCP2.1s2.1s
　LCP2.7s2.7s
　FID36ms36ms
　CLS0.390.41
ラボデータ
　FCP2.8秒2.7秒
　速度インデックス6.3秒5.1秒
　最大コンテンツの描画5.2秒5.5秒
　インタラクティブに
　なるまでの時間		14.1秒7.5秒-6.6秒 (-47%)
　合計ブロック時間2,010ミリ秒740ミリ秒-1,270ミリ秒 (-64%)
　累積レイアウト変更00

パソコン

項目実施前実施後備考
総合スコア9095+5pt (+5%)
フィールドデータ
　FCP1.7s1.7s
　LCP2.1s2.1s
　FID2ms2ms
　CLS0.320.32
ラボデータ
　FCP0.7秒0.7秒
　速度インデックス1.6秒1.3秒
　最大コンテンツの描画1.2秒1.3秒
　インタラクティブに
　なるまでの時間		2.4秒0.7秒-1.7秒 (-71%)
　合計ブロック時間90ミリ秒0ミリ秒-90ミリ秒 (n/a)
　累積レイアウト変更0.2250

どれくらいのコスト（時間・費用）で

時間：10分
費用：0円

背景

運営しているサイトのどれもこれもみんな、PageSpeedInsightsのスコアが低くてどうにか対策しないとなぁと思っている。

指摘が多すぎてどこから手を付けていいものか悩ましいのだが、時間は書けずに効果は最大！な最適解を素人が見つけ出すのは難しいし、そんなリサーチをしているくらいなら、その時間でひとつの項目くらい改善できそうな気がするので、できそうなところからひとつずつ片付けていくことにした。

　

【ブックマーク集】ウェブに関する主な指標で不良と指摘されたときの対応方法（CLS、LCP、FCP、FID）　 - うさログ
グーグルサーチコンソールの「ウェブに関する主な指標」でステータスが不良となってしまった項目たちの対応をするにあたって、参考になりそうな記事たちを集めておくページ。 目次 PageSpeedInsightsの使い方と分析結
usalog.usakichi.me

　

上記記事でリンクしていている参考になりそうな外部記事に、ヘッダー画像の横幅と高さをCSSで明示化することがスコア改善に効果があったと紹介されていた。

まずはここから試してみようかと思った。

　

施策を横展開したサイトたちの結果記録

サイトC

効果メモ

  • サイトKほどの劇的な変化はなかった
  • 総合スコアはほぼ変わらず
  • 良くなった点は以下2箇所
    • モバイル版　合計ブロック時間　-2800ミリ秒(-77%)
    • パソコン版　累積レイアウト変更　-0.581(-53%)

環境　

  • エックスサーバー
  • WordPress 5.4
  • Cocoon

計測日　

  • 2020年8月20日 13時頃

ヘッダー画像

  • 横幅　1200ピクセル
  • 高さ　400ピクセル
  • ファイルサイズ　81KB

　

モバイル

項目実施前実施後備考
総合スコア3337
フィールドデータ
　FCP2.4s2.4s
　LCP3.2s3.2s
　FID34ms34ms
　CLS0.390.4
ラボデータ
　FCP2.9秒2.8秒
　速度インデックス6.5秒7.2秒
　最大コンテンツの描画4.5秒4.9秒
　インタラクティブに
　なるまでの時間		14.8秒14.0秒
　合計ブロック時間3,660ミリ秒860ミリ秒-2800ミリ秒(-77%)
　累積レイアウト変更00

パソコン

項目実施前実施後備考
総合スコア7978
フィールドデータ
　FCP2.1s2.1s
　LCP2.6s2.6s
　FID3ms3ms
　CLS0.330.33
ラボデータ
　FCP0.7秒0.7秒
　速度インデックス2.0秒2.2秒
　最大コンテンツの描画1.1秒1.0秒
　インタラクティブに
　なるまでの時間		3.5秒3.1秒
　合計ブロック時間190ミリ秒320秒
　累積レイアウト変更0.610.029-0.581(-53%)

サイトF

効果メモ

  • モバイル版の総合スコアがアップ　+16pt (+30%)

環境　

  • エックスサーバー
  • WordPress 5.4
  • Cocoon

計測日　

  • 2020年8月20日 14時頃

ヘッダー画像

  • 横幅　1200ピクセル
  • 高さ　364ピクセル
  • ファイルサイズ　188KB

　

モバイル

項目実施前実施後備考
総合スコア3955+16pt (+30%)
フィールドデータ
　FCP2.1s2.1s
　LCP2.8s2.8s
　FID27ms27ms
　CLS0.320.32
ラボデータ
　FCP2.5秒2.6秒
　速度インデックス5.9秒3.9秒
　最大コンテンツの描画5.4秒6.0秒
　インタラクティブに
　なるまでの時間		11.1秒7.3秒
　合計ブロック時間960ミリ秒560ミリ秒
　累積レイアウト変更00

パソコン

項目実施前実施後備考
総合スコア8696
フィールドデータ
　FCP2.1s2.1s
　LCP2.6s2.6s
　FID3ms3ms
　CLS0.330.33
ラボデータ
　FCP0.7秒0.6秒
　速度インデックス2.1秒1.0秒
　最大コンテンツの描画1.4秒1.3秒
　インタラクティブに
　なるまでの時間		2.2秒0.6秒
　合計ブロック時間80ミリ秒0ミリ秒
　累積レイアウト変更0.220

サイトH

効果メモ

  • 総合スコアにお起きは変化はなし
  • モバイル版　合計ブロック時間　-700ミリ秒(-23%)
  • パソコン版　累積レイアウト変更　-0.46 (-90%)

環境　

  • エックスサーバー
  • WordPress 5.4
  • Cocoon

計測日　

  • 2020年8月20日 14時頃

ヘッダー画像

  • 横幅　1200ピクセル
  • 高さ　525ピクセル
  • ファイルサイズ　177KB

　

モバイル

項目実施前実施後備考
総合スコア2834
フィールドデータ
　FCP2.2s2.2s
　LCP2.7s2.7s
　FID45ms45ms
　CLS0.550.59
ラボデータ
　FCP2.7秒2.7秒
　速度インデックス8.1秒7.2秒
　最大コンテンツの描画5.0秒4.2秒
　インタラクティブに
　なるまでの時間		16.2秒17.3秒
　合計ブロック時間3140ミリ秒2440ミリ秒-700ミリ秒(-23%)
　累積レイアウト変更00

パソコン

項目実施前実施後備考
総合スコア7777
フィールドデータ
　FCP1.7s1.7s
　LCP1.9s1.9s
　FID3ms3ms
　CLS0.40.4
ラボデータ
　FCP0.7秒0.7秒
　速度インデックス2.2秒2.4秒
　最大コンテンツの描画1.1秒1.0秒
　インタラクティブに
　なるまでの時間		3.7秒3.5秒
　合計ブロック時間200ミリ秒270ミリ秒
　累積レイアウト変更0.5120.052-0.46 (-90%)

サイトO

効果メモ

  • 総合スコアには大きな変化は見られなかった

環境　

  • エックスサーバー
  • WordPress 5.4
  • Cocoon

計測日　

  • 2020年8月20日 14時頃

ヘッダー画像

  • 横幅　600 ピクセル
  • 高さ　150 ピクセル
  • ファイルサイズ　15 KB

　

モバイル

項目実施前実施後備考
総合スコア3336
フィールドデータ
　FCPn/an/a
　LCPn/an/a
　FIDn/an/a
　CLSn/an/a
ラボデータ
　FCP8.4秒8.4秒
　速度インデックス12.5秒8.7秒
　最大コンテンツの描画10.7秒10.3秒
　インタラクティブに
　なるまでの時間		11.0秒11.1秒
　合計ブロック時間220ミリ秒160ミリ秒
　累積レイアウト変更00

パソコン

項目実施前実施後備考
総合スコア5759
フィールドデータ
　FCPn/an/a
　LCPn/an/a
　FIDn/an/a
　CLSn/an/a
ラボデータ
　FCP2.6秒2.6秒
　速度インデックス2.8秒2.6秒
　最大コンテンツの描画3.0秒3.0秒
　インタラクティブに
　なるまでの時間		3.1秒2.7秒
　合計ブロック時間30ミリ秒0ミリ秒
　累積レイアウト変更0.0780.001

サイトX(雛形)

効果メモ

  • xxxx

環境　

  • エックスサーバー
  • WordPress 5.4
  • Cocoon

計測日　

  • xxx年xx月xx日 xx時頃

ヘッダー画像

  • 横幅　xxxピクセル
  • 高さ　xxxピクセル
  • ファイルサイズ　xxxKB

　

モバイル

項目実施前実施後備考
総合スコア
フィールドデータ
　FCP
　LCP
　FID
　CLS
ラボデータ
　FCP
　速度インデックス
　最大コンテンツの描画
　インタラクティブに
　なるまでの時間
　合計ブロック時間
　累積レイアウト変更

パソコン

項目実施前実施後備考
総合スコア
フィールドデータ
　FCP
　LCP
　FID
　CLS
ラボデータ
　FCP
　速度インデックス
　最大コンテンツの描画
　インタラクティブに
　なるまでの時間
　合計ブロック時間
　累積レイアウト変更

うさ吉

群馬出身埼玉在住。
趣味（写真や小旅行）についてつらつらと書き綴ってます。

うさ吉をフォローする
仮置場
シェアする
うさ吉をフォローする
うさログ
うさログ

コメント