広告 Web関連

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

スポンサーリンク

 

今回、PageSpeed Insights(以降、PSIと言う)を覗いたら、上で示す様に再び、携帯電話(モバイル)が「■ウェブに関する主な指標の評価: 不合格」になっていました。 コアーウエッブバイタル中の FID項目(First Input Delay)が122msで合格基準(75 パーセンタイルで100ms以下)から悪化しているのが原因です。

1年前は、前回記事で紹介した様にLCP項目(Largest Contentful Paint)が原因で「■ウェブに関する主な指標の評価: 不合格」となり改善したものの、現在はFID項目が原因で不合格になってしまいました。

今回の記事は、 FID項目の改善への顛末紹介になります。(改善内容が反映するまでに時間が掛かるので約1ヶ月ほど必要でした。)

 

現状のWordpress環境について(2023/7/1現在)

  • Webサーバー:ロリポップ・ハイスピードプラン PHP8.2.7
  • WordPress :バージョン 6.2.2
  • Affinger6:バージョン20230607
  • EWWW Image Optimizer:バージョン7.0.1(画像のWebP化済み)
  • WP Fastest Cache Premium(有料版):バージョン 1.6.9
  • アドセンスの遅延読み込み

 

コアーウエッブバイタル中の FID項目(First Input Delay)改善策

web.dev サイトによれば、FIDを改善するには、『読み込みの応答性を測定するための重要なユーザーを中心とした指標です。〜中略〜 ラボ環境での TBT の改善による最適化は、実際のユーザーに対する FID の改善にも繋がるはずです。』とのことでした。

以上から、FDI改善の為、間接的ですが、PSIで示されたTBT(Total Blocking Time)の数値を極力下げる対策を行うことにしました。

 

FID 改善へ向けて実施した項目

FIDの合否は、サイトページを過去 28 日間の収集期間や種々の条件で測定し、統計上75 パーセンタイル-100ms以下であればFIDが合格になります。 この条件のため、TBTの改善を行っても、直ぐにFIDの数値の改善に繋がりません。 但し、24時間程度経過すると、データが更新される様です。 最終的には、28 日間の収集期間を待つ必要があります。

FIDの合格を得るために、TBTの改善に向けてトライした項目をStepで示します。

Step
1
Google Tag Manager のトリガーの変更

当サイトは、グーグルアナリティクスのGA4移行のため、従来のUAタイプとGA4タイプの2つのタグをGoogle Tag Manager で管理しています。

TBTの指摘を見ると、下のスクリーンショットで示す様に、「第3者コードの影響を抑えてください」とのPSIのTBTの指摘があり、Topにあるのが、Tag Managerに係る項目です。 

Tag Managerの影響を抑えるために、Tag Managerの設定画面から「トリガーの設定」をクリックして、「スクロール距離」を選択して、以下の設定を行いました。(通常は「ページビュー」を選択されていると思います)

  1. スクロール距離のオプション:縦スクロール1000pxで設定(スマホサイズを考慮して今は1000pxにしています)
  2. トリガーを有効化するタイミング:トリガーを有効化するタイミングを「コンテナの読み取り(gtm.js)」を選択

blank

この設定で、ページアクセス後、1000px縦スクロール移動後にトリガー(発火)します。

Chrome拡張機能のTag Assistant Legacy (by Google)で観察すると、先ずtag1が見つかり、スクロールしてみるとtag2(gtag.js)が見つかるのが分かります。 つまり、見かけ上の遅延読み込みが行われTBTが改善されると思われます。

注意:「縦スクロールトリガー」はパフォーマンス改善に効果がありますが、問題のFIDに対してはあまり効果が無い(悪化する?)様です。 現在、他の方法を模索中です。(2023/7/20)

Step
2
ページ速度が遅い記事の抽出と改善

遅いページの抽出方法

  1. 従来のUA(ユニバーサルアナリティクス)の場合、左メニュー「行動」>「サイトの速度」>「ページ速度」と順にクリックすると、Webサイト内の各ページの平均読み込み時間が確認できます。 サイト平均より遅い場合は右側に赤く、早い場合は左側に緑で表示されるので、平均より遅いページを抽出できます。
  2. Google Search Consoleコンソールで「FID の問題: 100 ミリ秒 超(モバイル)」改善指摘を受けている「このグループの URL の例」で示されたページ

以上の方法から著しく遅いページに対して軽量化を図り、場合によってはページ分割を行い見直しました。

 

Step
3
その他実施した改善項目

  1. いいねボタン設置プラグイン「WP ULike 」を停止
  2. アーカイブの削除
  3. Twitterボタンを削除

ページ速度が安定したら復活させる予定です。

 

FID 改善の前と後

PSI画面の「ビューを開く」をクリックすると下の様にFIDの良好から不良までのバラツキ分布(%)データが展開されます。 この改善により、「良好(100ms以下)」が僅かに増え、「改善が必要〜不良(100ms以上)」の割合が減って、漸く合格基準の75 パーセンタイル-100ms以下の43msになりました。

Before:FID評価 NG
  • 良好(100 ミリ秒 以下):73%
  • 改善が必要(100 ミリ秒~300 ミリ秒):15%
  • 不良(300 ミリ秒 超):12%
  • 75 パーセンタイル - 122 ミリ秒
After:FID評価 OK
  • 良好(100 ミリ秒 以下):78%
  • 改善が必要(100 ミリ秒~300 ミリ秒):13%
  • 不良(300 ミリ秒 超):9%
  • 75 パーセンタイル - 43 ミリ秒

FIDが 75 パーセンタイル - 43 msになったことで、携帯電話(モバイル)が「■ウェブに関する主な指標の評価: 合格」を得ることができました。

blank

ウェブに関する主な指標の評価が合格になったものの、FIDは、合格ラインギリギリでトラフィックの状況などでも変化するので再び不合格になることもあり得えます。 取敢えず、この改善で様子を見ることにしています。

なお、今回の改善で、当サイトのTop(HOME)ページでのPSIパフォーマンスは、「携帯で90点以上、PCで95点以上」に向上できたことも付記します。

 

以上、「FID 指標の評価: 不合格」の対応顛末でした。 この顛末記事が、「ウェブに関する主な指標」が不合格でお困りの方への一助となれば幸いです。

 

スポンサーリンク

 

スポンサーリンク

 

Hi-Reco Blog オススメ

をクリック(タップ)してご覧ください。)