PageSpeed Insights で「ウェブに関する主な指標の評価: 不合格」対応（顛末記)

GoogleのPageSpeed Insights で当ブログのTop Pageを確認したら携帯電話（モバイル）が「■ウェブに関する主な指標の評価: 不合格」と出るようになっていました。　一方デスクトップ（PC）では合格でした。

何時から「不合格」になったかを調べるにはSearch Consoleの「ウェブに関する主な指標」グラフから推定することが出来ます。　調べてみると2月22日から「良好URL」緑ラインから「改善が必要なURL」橙ラインに切り替わっていたので、１ヶ月前の2月22日頃からPageSpeed Insightsが「不合格」になったものと推定できます。

PageSpeed Insightsの「ウェブに関する主な指標」が「不合格」ですとSEO的に不利になりますし、「不合格」と言う表現がどうにも気になるので本腰を入れて対策してみることにしました。　

ウェブに関する主な指標とは

ウェブに関する主な指標は、語尾に■マークの付いている「First Input Delay (FID)■」「Largest Contentful Paint (LCP)■」「Cumulative Layout Shift (CLS)■」の３つが、Core Web Vitals を構成する指標となります。

以下は、PageSpeed InsightsサイトによるCore Web Vitalsについての説明になります。

つまり、当サイトのTopPageで不合格になった要因は、LCPが2.8秒で、28日間の収集期間において、評価基準の2.5秒以内を超えていることが問題だと判りました。　　

他サイトのPageSpeed Insights 合格割合は？

失礼ながら、ブログを公開しているサイトを適当に無作為でトップページがどの程度の割合で合格になっているものか？参考までにPageSpeed Insights で調べてみました。

オペレータ

（表−１）の通り、無作為で調べた結果、PCの不合格率が高く、モバイルも含めた全体の合格割合は40％で意外と不合格になる率が高いことが分かりました。　更にパフォーマンスが１００点でも不合格になっているサイトページがあり、逆にパフォーマンスが20台でも合格になっているサイトページもありました。

当サイトのWordpress環境について

対策経過とパフォーマンスの変遷

以下は、当ブログのトップページでの対策経過と評価になります。　なお、顕著に改善できた対策のみを示します。

• Step-0 対策前

  「不合格」に気づいた時点のPageSpeed Insights

  ＜ パフォーマンス ＞
  モバイル：30点台　PC：80点台




• Step-1 「reCAPTCHA」対策

  PageSpeed Insightsの「改善できる項目」の中で「使用していない JavaScript の削減」に  recaptcha__en.js ファイルが含まれており、このファイルに照準を当てて対策してみました。

  Googleから提供されている「reCAPTCHA」は、Webフォームなどに登録する際、botなどによる悪質なアクセスからWebサイトを守るための機能です。　このため「reCAPTCHA」を使わない訳には行かないので、フォーム入力ページのみ「reCAPTCHA」を機能させる様に対策するため、子テーマのfunctions.php に下記のように記載しました。

   functions.php
  // お問い合わせページを除き、「reCAPTCHA」を読み込ませない
  // is_pageは固定ページのスラッグで指定する
  function load_recaptcha_js() {
  if ( ! is_page( 'contact' ) ) {
  wp_deregister_script( 'google-recaptcha' );
  }
  }
  add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );
  

  PageSpeed Insightsで指摘されていた「使用していない JavaScript の削減」に recaptcha__en.js ファイルが含まれなくなり、パフォーマンスの改善も見られました。

  ＜パフォーマンス ＞　
  モバイル：30台→70台　PC：80台→90台




• Step-2 P3プラグインの導入

  「どのプラグインが表示速度を遅らせているのか」を調べるために、P3 （Plugin Performance Profiler）プラグインをインストールしてみました。　その結果 Jetpacプラグインが31%を占めて0.211s遅らしていることが分かりました。　JetpackはTwitterへの自動投稿機能を利用していましたが他に特段重要なプラグインで無いと感じていましたのでこの際、Jetpackプラグインを停止させました。　調べ終わったら、P3プラグインを停止させておきます。

  モバイルのLCPが最大2.3sで2.5s以下になり、パフォーマンスも80台に改善




• Step-3 現時点の状況

  その他の改善策として、トップページ以外でページ速度の重いページに対して、ページ分割を行いました。　

対策後の「ウェブに関する主な指標」

トップページのPageSpeed Insightsの「ウェブに関する主な指標」が「合格」に変わりました。　

＜パフォーマンス ＞
モバイル：80台　PC：90台

※ Search Consoleの「ウェブに関する主な指標」グラフも「良好URL」緑ラインに変わっていました。

注意ポイント

以上の対策で、携帯電話（モバイル）が「■ウェブに関する主な指標の評価: 合格」になったものの、LCPの余裕が少なく、再び不合格になる可能性を秘めていると思われます。　多少ともマージンを増やせないか？と期待を込めてロリポップのハイスピードプランへの移行を考えました。

ロリポップの「ハイスピードプラン」への変更

次のページに続く。

次ページへ

この顛末記事が、「ウェブに関する主な指標」が不合格でお困りの方への一助となればと思います。