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

スポンサーリンク

 

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

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

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

 

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

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

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

Core Web Vitalsについて(機械翻訳)
  • Largest Contentful Paint (最大視覚コンテンツの表示時間、LCP): 読み込みのパフォーマンスを測定するための指標です。優れたユーザー エクスペリエンスを提供するためには、ページの読み込みが開始されてからの LCP を 2.5 秒以内にする必要があります。
  • First Input Delay (初回入力までの遅延時間、FID): インタラクティブ性を測定するための指標です。優れたユーザー エクスペリエンスを提供するためには、ページの FID を 100 ミリ秒以下にする必要があります。
  • Cumulative Layout Shift (累積レイアウト シフト数、CLS): 視覚的な安定性を測定するための指標です。優れたユーザー エクスペリエンスを提供するためには、ページの CLS を 0.1 以下に維持する必要があります。

上記の各指標について、ほぼすべてのユーザーにとって好ましい推奨目標値を確実に達成するために、モバイル デバイスとデスクトップ デバイスに分けた上で、総ページロード数の 75 パーセンタイルをしきい値として設定しています。

Core Web Vitals への準拠を評価するツールは、上記 3 つの指標すべてにおいて 75 パーセンタイルという推奨目標値を達成している場合に、そのページを合格として判定するように設定されています。

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

 

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

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

オペレータ
(表−1)の通り、無作為で調べた結果、PCの不合格率が高く、モバイルも含めた全体の合格割合は40%で意外と不合格になる率が高いことが分かりました。 更にパフォーマンスが100点でも不合格になっているサイトページがあり、逆にパフォーマンスが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」を読み込ませない
    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の余裕が少なく、再び不合格になる可能性を秘めていると思われます。 多少ともマージンを増やせないか?と期待を込めてロリポップのハイスピードプランへの移行を考えました。

 

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

次のページに続く。

次ページへ

 

 

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

 

スポンサーリンク

 

 

 

Blog オススメ記事(コンテンツ選択)
  • レコード音質とハイレゾ化

  • CD音質と圧縮音源 AAC等

  • WordpressやiPhone・PC

  • ツールと閑話ブログ

レコード音質とハイレゾ化

CD音質と圧縮音源 AAC等

WordpressやPCなど

ツールと閑話ブログ