もう「対策」じゃない、MFIは「前提」の話
モバイルファーストインデックス（MFI）、最近よく聞くけど、正直もう「新しい対策」って感じじゃない。 2020年頃にはもう全サイト移行済みで、今はこれが当たり前。 GoogleがPCサイトじゃなくて、スマホサイトを基準に評価するってこと。これ、基本のキ。
昔はPC版の情報をクロールしてたけど、スマホで検索する人が圧倒的に多くなったから、Googleも「じゃあスマホで見やすいサイトを評価するね」ってなっただけの話。 シンプル。だから、「MFI対応」ってのは、移行作業のことじゃなくて、この「スマホが主役」の世界でどうやってパフォーマンスを出すかっていう継続的な話なんだよね。
で、Core Web Vitalsとどう繋がるの？
ここが本題。MFIが「前提」なら、その上でどう評価されるか。そこで出てくるのがページエクスペリエンス、特にCore Web Vitals（CWV）。 LCP, CLS, そしてINP。 これらはユーザー体験の指標。
考えてみれば当然で、
- MFI：「スマホで見やすいか？」という"ガワ"の話。コンテンツがPCと同じだけあるか、とか。
- CWV：「スマホで"快適か"？」という"中身"の話。表示速度とか、操作への反応とか。
この二つはセット。スマホ向けにコンテンツをちゃんと載せても（MFI）、それがめちゃくちゃ重くて表示に5秒かかったら（CWVが悪い）、意味ないよねってこと。モバイルユーザーの53%は読み込みに3秒以上かかると離脱するっていうデータもあるくらいだし。 だからGoogleは両方見てる。
特に大事なのがINP - モバイルの「体感」そのもの
CWVの中でも、2024年3月からFIDに代わって導入されたINP（Interaction to Next Paint）が、モバイルでは特に重要。 なんでか？
FIDは最初の入力への反応速度だけだった。 でもINPは、ページ滞在中の「すべての操作」に対する反応を評価して、一番遅かったやつをスコアにする。 ハンバーガーメニューを開く、画像をスワイプする、アコーディオンを開く…全部。これって、まさにスマホの操作そのものじゃない？
PCと違って、モバイルはタップやスワイプが中心。JavaScriptを多用した動的なインターフェースも多い。 これらの反応がちょっとでも遅いと、「あれ、固まった？」ってなる。この「体感の悪さ」を直接測るのがINP。 だから、MFIの文脈でパフォーマンスを考えるなら、INPの改善は避けられない。
じゃあ、具体的に何をやる？PC版との違い
基本はPC版と同じことを、モバイルでもちゃんとやる、ってことなんだけど、特に意識したい点がいくつか。
- コンテンツの完全な一致: PC版にある重要なテキスト、画像、動画は、モバイル版でも絶対省略しない。 タブやアコーディオンの中に隠すのはOKだけど、DOM（HTML）上には存在させること。
- 構造化データの一致: これもよくあるミス。PC版にしか構造化データを入れてないと、リッチリザルトのチャンスを失う。モバイル版にも同じものを。
- 画像の最適化: PCより画面が小さいからって油断しがちだけど、高解像度ディスプレイも多い。ファイルサイズはちゃんと圧縮しつつ、Lazy Loading（遅延読み込み）を実装する。
- JavaScriptの見直し: INP低下の主な原因は、重いJavaScript。 特にモバイルはCPUパワーがPCより劣る。使ってないJSは削除、重い処理は分割するなど、徹底的に軽くする。 Googleの公式ブログでも、PageSpeed Insightsで操作性の問題をチェックするよう推奨してる。
- サーバーの応答速度: 意外と見落としがちなのがサーバー。CDNを使ってユーザーの近くから配信したり、応答の速いサーバーを選ぶだけでLCPとかが改善することもある。
要するに、「モバイル版はサブ」っていう考え方を捨てることから始まる。デザインもコンテンツも技術も、全部モバイルが主役。これがMFIの世界での戦い方。
比較表：MFIとCWV、どこで衝突して、どう解決する？
MFI（コンテンツを全部載せろ）とCWV（速く軽くしろ）は、時々ケンカする。その典型例と、どう考えるかのヒントをまとめてみた。
| よくある衝突 | MFIの要求 (コンテンツ) | CWVの要求 (パフォーマンス) | どう考える？ (解決のヒント) |
|---|---|---|---|
| ファーストビューの商品一覧 | たくさんの商品を見せたい | LCPを速くしたいから、初期表示の画像は減らしたい | 本当に重要な数点だけ最初に見せて、残りは遅延読み込み（Lazy Load）させる。見せかけの速さも大事。 |
| 高機能なインタラクティブマップ | PC版と同じ機能を提供したい | INPが悪化するから、重いJSライブラリは読み込みたくない | 最初はただの画像として表示して、ユーザーがタップしたら初めて地図ライブラリを読み込む。「Interaction to Load」の考え方。 |
| 大量の画像・動画コンテンツ | PC版と同じリッチなコンテンツを全部載せる必要がある | LCP/CLSが悪化する。読み込みが遅いし、ガタつく。 | 画像のWebP化、AVIF化は必須。動画はそのまま埋め込まず、サムネイル＋クリックで再生。CLS対策で画像のwidth/height指定は絶対。 |
| サードパーティのスクリプト (広告/解析) | ビジネス上、広告や解析ツールは必須 | こいつらがINPとLCPをブロックする主犯格だったりする… | 本当に全部必要か見直す。必要なら、メインコンテンツの読み込みが終わってから遅延させて実行（`defer` / `async`）。 |
結局、トレードオフなんだよね。どっちも100点は難しい。ユーザーにとって何が一番大事かを考えて、優先順位をつけるしかない。正直、このバランス取りが一番難しいところかも。
あなたのサイト、PCとモバイルでスコアの差、どれくらいありますか？特にINPで苦戦してる点があれば、ぜひ教えてください。
