PageSpeed満点でも順位下落?新指標INP改善とJS遅延読み込みの罠

オフィスで働く人々の風景

なぜか検索順位が上がらない……。そんな悩みをお持ちではありませんか?

「PageSpeed Insights(PSI)のスコアは90点以上、なんなら100点満点だ。それなのに、競合より順位が低い」

もしあなたがそう感じているなら、それは**「見せかけの高速化」**の罠にハマっている可能性があります。

2024年3月から、GoogleはCore Web Vitals(コアウェブバイタル)の指標をFIDから**INP(Interaction to Next Paint)**へと切り替えました。この変更により、これまで有効とされてきた「JavaScriptの遅延読み込み」といった小手先のテクニックが、逆にSEOの足かせになるケースが急増しています。

この記事では、なぜPageSpeedのスコアが良くても順位が下がるのか、その原因である新指標「INP」の正体と、プロが行う本質的な改善策をわかりやすく解説します。

PC操作が得意でない方でも理解できるよう噛み砕いてお伝えしますので、ぜひ最後までお付き合いください。

目次

PageSpeed満点でも順位が下がる「INP」の正体

まず、なぜ「スコアが良いのに評価されない」という現象が起きるのか。その鍵を握るのが新指標INPです。

「読み込み速度」と「応答速度」は違う

これまでのSEO対策では、サイトが表示されるまでの「読み込み速度(LCP)」が重視されてきました。しかし、今のGoogleが重要視しているのは、読み込んだ後の**「応答速度(INP)」**です。

  • LCP (Loading): ページが表示されるまでの速さ
  • INP (Interaction): ボタンを押した時の反応の速さ

例えば、画面は表示されているのに、メニューボタンを押しても数秒間反応しないサイトに出会ったことはありませんか? これが「INPが悪い」状態です。

Googleは「ユーザーがボタンを押してから、実際に画面が変化するまでの時間」を200ミリ秒(0.2秒)以下にすることを推奨しています。これを超えると「反応が鈍いサイト」と判断され、検索順位に悪影響を及ぼします。

多くのサイトを破壊する「JS遅延読み込み」の罠

新指標INP(Interaction to Next Paint)と旧指標FID(First Input Delay)の違いを示す図解。INPがユーザー入力から画面反映までの「入力遅延」「処理時間」「表示遅延」の合計であることを視覚化しています。

ここからが本題です。WordPressを使っている方の多くが、プラグインを使って**「JavaScriptの遅延実行(Delay JavaScript Execution)」**を設定しているはずです。

スコア稼ぎがINPを悪化させる理由

「Flying Scripts」や「WP Rocket」などのプラグインには、JavaScript(JS)の読み込みを「ユーザーがマウスを動かすまで」あるいは「数秒後まで」遅らせる機能があります。

これを使うと、初期読み込み時にはJSが存在しないことになるため、PageSpeed Insightsのスコアは劇的に向上し、簡単に90点〜100点が出ます。

しかし、これがINPにおける致命的な罠です。

  1. 見せかけの100点: ページを開いた瞬間、重いJSはまだ読み込まれていません。
  2. ユーザーが操作: 読者がメニューを開こうとクリックします。
  3. 裏側でパニック: ブラウザは「あ、JSを読み込まないと!」と慌てて巨大なファイルをダウンロード・解析し始めます。
  4. 画面がフリーズ: その処理が終わるまで、画面は固まります。

結果として、**「スコアは満点だが、ユーザーが触るとフリーズするサイト」**が出来上がり、実際のユーザーデータ(Chrome UX Report)に基づき、Googleからの評価は下がってしまうのです。

上記の図のように、メインスレッド(ブラウザの作業場)がJSの処理で埋め尽くされている間(赤色の部分)、ユーザーのクリックは無視され続けます。これが「隠れINP不良」の原因です。

今すぐできるINP改善の具体的手順

重いJavaScript処理(Long Tasks)によってブラウザのメインスレッドが占有され、ユーザーの操作(クリックやタップ)がブロックされて反応が遅れる様子を示すパフォーマンスタイムラインの図解です。

では、プラグインですべて遅延させるのをやめて、どうすれば良いのでしょうか? 3つのステップで解決策を提示します。

1. 犯人となるスクリプトを特定する

まずは、どのJavaScriptがメインスレッドを占有しているかを特定しましょう。

  • Chromeブラウザで自サイトを開く
  • 右クリック → 「検証」 → 「Performance」タブを開く
  • 録画ボタンを押し、ページを操作する
  • 「Long Task(赤い斜線)」が表示されている箇所を探す

多くの場合、重いスライダー、チャットボット、あるいは過剰な広告スクリプトが原因です。

2. 「遅延」ではなく「非同期」か「削除」を選ぶ

安易に「ユーザー操作まで遅延」させる設定はOFFにしましょう。代わりに以下の対策を行います。

  • 不要なプラグインの削除: 使っていない機能のプラグインは停止・削除します。
  • defer属性の活用: プラグインの設定で「Defer(読み込み順を後にする)」を選びます。「Delay(実行を遅らせる)」とは別物です。
  • 重い機能の代替: 例えば、重厚なスライダープラグインをやめて、静止画バナーや軽量なCSSアニメーションに切り替えます。

3. 重い処理を分割する(上級者向け)

どうしてもJSが必要な場合、開発者はpostTask APIなどを使用して、長い処理を細切れにし、ユーザー入力の割り込みを許可するようにコードを修正します。

まとめ:スコアよりも体感を信じよう

今回のポイントを振り返ります。

  1. PageSpeedスコアは絶対ではない: 特にJS遅延で作った満点はSEO効果が薄い。
  2. INPは「応答速度」: クリック後の反応が遅いと順位が下がる。
  3. 遅延読み込みを見直す: ユーザー操作の瞬間に負荷をかける設定はNG。

まずはご自身のサイトで、プラグインの「Delay JavaScript」機能を一度OFFにし、実際のスマホで操作感を確かめてみてください。「スコアは落ちたけど、メニューはサクサク開く」ようになれば、それが正解である可能性が高いです。

次のアクション: まずは「PageSpeed Insights」ではなく、**「Google Search Console」の「ウェブに関する主な指標」**を確認してください。そこで「INPの問題」が検出されていないかチェックすることから始めましょう。

こんな方にオススメ!
  • 即対応して欲しいが連絡が遅い!
  • そのまでの予算に余裕がない!
  • 制作会社に頼むほどでも無いが、一人で再現出来ない!
こんな方にオススメ!
  • 即対応して欲しいが連絡が遅い!
  • そのまでの予算に余裕がない!
  • 制作会社に頼むほどでも無いが、一人で再現出来ない!
よかったらシェアしてね!
  • URLをコピーしました!
目次