今回、PageSpeed Insights（以降、PSIと言う）を覗いたら、上で示す様に再び、携帯電話（モバイル）が「■ウェブに関する主な指標の評価: 不合格」になっていました。 コアーウエッブバイタル中の FID項目（First Input Delay）が122msで合格基準(75 パーセンタイルで100ms以下）から悪化しているのが原因です。
１年前は、前回記事で紹介した様にLCP項目（Largest Contentful Paint）が原因で「■ウェブに関する主な指標の評価: 不合格」となり改善したものの、現在はFID項目が原因で不合格になってしまいました。
今回の記事は、 FID項目の改善への顛末紹介になります。（改善内容が反映するまでに時間が掛かるので約１ヶ月ほど必要でした。）
現状の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タイプの２つのタグをGoogle Tag Manager で管理しています。
TBTの指摘を見ると、下のスクリーンショットで示す様に、「第3者コードの影響を抑えてください」とのPSIのTBTの指摘があり、Topにあるのが、Tag Managerに係る項目です。
Tag Managerの影響を抑えるために、Tag Managerの設定画面から「トリガーの設定」をクリックして、「スクロール距離」を選択して、以下の設定を行いました。（通常は「ページビュー」を選択されていると思います）
- スクロール距離のオプション：縦スクロール1000pxで設定（スマホサイズを考慮して今は1000pxにしています）
- トリガーを有効化するタイミング：トリガーを有効化するタイミングを「コンテナの読み取り（gtm.js）」を選択
この設定で、ページアクセス後、1000px縦スクロール移動後にトリガー（発火）します。
Chrome拡張機能のTag Assistant Legacy (by Google)で観察すると、先ずtag1が見つかり、スクロールしてみるとtag2(gtag.js)が見つかるのが分かります。 つまり、見かけ上の遅延読み込みが行われTBTが改善されると思われます。注意：「縦スクロールトリガー」はパフォーマンス改善に効果がありますが、問題のFIDに対してはあまり効果が無い（悪化する？）様です。 現在、他の方法を模索中です。（2023/7/20）
Step
2
ページ速度が遅い記事の抽出と改善
遅いページの抽出方法
- 従来のUA（ユニバーサルアナリティクス）の場合、左メニュー「行動」>「サイトの速度」>「ページ速度」と順にクリックすると、Webサイト内の各ページの平均読み込み時間が確認できます。 サイト平均より遅い場合は右側に赤く、早い場合は左側に緑で表示されるので、平均より遅いページを抽出できます。
- Google Search Consoleコンソールで「FID の問題: 100 ミリ秒 超（モバイル）」改善指摘を受けている「このグループの URL の例」で示されたページ
以上の方法から著しく遅いページに対して軽量化を図り、場合によってはページ分割を行い見直しました。
Step
3
その他実施した改善項目
- いいねボタン設置プラグイン「WP ULike 」を停止
- アーカイブの削除
- Twitterボタンを削除
※ページ速度が安定したら復活させる予定です。
FID 改善の前と後
PSI画面の「ビューを開く」をクリックすると下の様にFIDの良好から不良までのバラツキ分布(%)データが展開されます。 この改善により、「良好（100ms以下）」が僅かに増え、「改善が必要〜不良（100ms以上）」の割合が減って、漸く合格基準の75 パーセンタイル-100ms以下の43msになりました。
- 良好（100 ミリ秒 以下）:73%
- 改善が必要（100 ミリ秒～300 ミリ秒）:15%
- 不良（300 ミリ秒 超）:12%
- 75 パーセンタイル - 122 ミリ秒
- 良好（100 ミリ秒 以下）:78%
- 改善が必要（100 ミリ秒～300 ミリ秒）:13%
- 不良（300 ミリ秒 超）:9%
- 75 パーセンタイル - 43 ミリ秒
FIDが 75 パーセンタイル - 43 msになったことで、携帯電話（モバイル）が「■ウェブに関する主な指標の評価: 合格」を得ることができました。
なお、今回の改善で、当サイトのTop（HOME）ページでのPSIパフォーマンスは、「携帯で90点以上、PCで95点以上」に向上できたことも付記します。