趣味を楽しむDIYな暮らし

日々の想いや気付きをPRも含めてお伝えしています

モバイルINP問題の解決には専門知識がないと無理な事が判った!

本ページはプロモーションが含まれています

 

こんにちは ご訪問ありがとうございます。

 

今回の記事は昨年末からGoogleサーチコンソールウェブに関する主な指標に表示されているモバイルINPに関する問題について、不具合状況の確認と解決策をヒントにやって来た事をまとめてみました。

 

始めに結論を書いてしまいますが、この問題は難し過ぎて専門知識のない素人が太刀打ち出来る事ではないように思います。

 

目次

 

INP指標とは?

 

ユーザーによるページアクセス期間中に操作した事に対する応答に要した時間(応答性)を評価する指標。色々な環境下で使われているモバイル機器での応答性が評価されます。

 

問題発生の背景は?

 

昨年の11月中旬頃まで何の問題も無かったウェブに関する主な指標のグラフに突然モバイルINP問題が赤いライン表示され始めました。

 

PCでの評価には全く問題がありません。モバイルのみ発生している問題です。

 

この問題発生前後の変化点は何か?を考えてみましたが、カテゴリーの見直しを行ったり、タグ品質問題でGTM(Googleタグマネージャー)の導入、GA4の内部トラフィック除外申請対策としてGooglechromeの拡張機能(オプトアウトアドオン)を追加した事等です。

 

問題点の確認

 

ウェブに関する主な指標で(モバイルINPの問題 500㍉越え)を検索して問題の対象になっているページのURLをクリック。

 

スクロールして下側のデペロッパー向けリソースをクリックします。

 

page speed insightによる計測が始まり結果が表示されます。

 

INPが問題になっている主な改善箇所が表示されます。

 

①Javascriptの実行にかかる時間の低減4.7秒

②メインスレッド処理の最小化8.0秒

 

尚、計測データーはリアルタイムのものではなく、仮に何らかの対策をしても直ぐには反映されなません。

 

INPが長い原因

 

INPが長くなるのは何故かを調べてみるとユーザー操作に対応する処理を他のJavascriptがブロックしてしまうことが原因らしいです。

 

改善のヒントに出ているJavascriptやメインスレッドの処理に関する内容を更に読んで行くとやるべき事が書いてありました。

 

やるべき事

ヒントを参考に記事内容からやるべき事が絞られてきました。

 

Javascriptの実行時間を短縮する

コードを最小化して圧縮する

未使用のコードを削除する

 

更に深掘りして行くと

 

ソレゾレの対策で行き着く所は下の2つになりました。

 

①不要なJavascript削除

②CSSの最適化

 

Javascriptとは?

 

ウェブブラウザでページが表示された際に実行されるプログラム。

サードパーティーのJavascript。例えばアナリティクスとかタグマネージャーです。

 

デペロッパーツールで確認

 

ヒントを参考にchromeのデペロッパーツールで確認してみました。

 

①カバレッジのレポートから使われていないJavascriptを見付けて削除する

②同じくカバレッジレポートから使われていないCSSを削除する。

 

削除して良いコードやURLが判らない

 

ここまで調べてきましたが、ついに壁にぶち当たりました。

 

※INP問題をpage speed insightで検証しデペロッパーツール内のカバレッジレポートやlighthouseによる確認。

 

やるべき事は、前記した通りで未使用のJavascriptの最適化・削除などになります。

 

カバレッジレポートで赤いライン部分が使われていないコードになることまでは判ったんですが、具体的にこの先の操作方法が判りません。

 

何度ヒントの記事を読み返しても理解出来ない分野で解読出来ません。

 

この作業が出来るのはJavascriptのコードを理解出来る専門知識を持ったデペロッパーの領域である事が判りました。

 

自分でやってみたこと

 

①GTMのアンインストールで検証

②chromeの拡張機能元戻しで検証

③対象になっているページの画像サイズ見直し

④デペロッパーツールで使われていないJavascriptやCSSを調べた

⑤デペロッパーツールのlighthouseでパフォーマンス等の検証

 

素人の私に出来た事はこれくらいです。

 

色々と調べてやってみましたが、今のところ効果は出ていません。もう暫く様子を見て何か変化が有るか見極める必要がありそうです。

 

結論とまとめ

 

モバイルINP問題でJavascriptやCSSを下手に削除すると取り返しのつかない自体になる恐れがあるので、元戻し出来なくなりそうな事には手を出すべきではないと言う結論に至りました。

 

ただ諦めてはいないので、今後も情報収集と調査は続けて行くつもりです。

 

何か変化点がありましたら更新したいと思っています。