最近「INPの問題」についての相談をよく受けるようになりました。

“ページの応答性”とか、“インタラクション”がどうとか、調べても本当に分かりにくい指標だと思います。

INPとは簡単に行ってしまえば「サイトがラグいよ！」ってことじゃないかな。

クリック（タップや）スクロール、スワイプ、マウス移動など、とくにかくユーザー操作に対して反応が遅いとINPの問題が指摘されると。

とは言え、実際にそんなラグさを感じない！

っていうのもその通りで、ガチで本当に分かり辛い問題だと思います。

INPとは何かっていうのは検索すると解説している記事が結構出てくるので、この記事ではINPを改善する方法にスポットを当てます。

結論から言えば、INPの問題解決に向けて2つのアプローチ方法があります

目次へ戻る

INのP問題は以下をすれば改善できます。

  • Javascriptの処理を減らす
  • ページ当たりのデータ量を減らす

ソースはweb.devで、以下のようにあります。

One challenging aspect of optimizing Interaction to Next Paint (INP) is figuring out what’s causing poor INP. There’s a large variety of potential causes: third-party scripts that schedule many tasks on the main thread, large DOM sizes, expensive event callbacks, and so on.

https://web.dev/diagnose-slow-interactions-in-the-lab/

訳すと以下のようになります。

Interaction to Next Paint (INP) の最適化における課題の 1 つは、INP の低下の原因を突き止めることです。メインスレッドで多くのタスクをスケジュールするサードパーティのスクリプト、大きなDOMサイズ、高価なイベント コールバックなど、さまざまな原因が考えられます。

とのことで、

  • サードパーティのスクリプト
  • 大きなDOMサイズ
  • 高価なイベント コールバック

が原因のようで、これを私の言葉で言い換えたのが「Javascriptの処理を減らす」「ページ当たりのデータ量を減らす」ということになります。

とても大雑把ですが、この２つからアプローチしていくことで、改善へと繋がります。

Javascriptを減らすとINPが改善される理由

目次へ戻る

Javascriptって言っても分からない人も多いと思います。

Javascriptとは、ブラウザ上で動作するプログラムのことで、<script>タグを使って読み込まれたり記述されたりします。

もしかするとアドセンスの広告タグやGoogleアナリティクスの解析タグをサイトに貼り付ける際に見ているかも知れませんが、それです。

「ブラウザ上で動作する」というのは、普段私達がタップやスクロールをしてサイトを閲覧している裏で、Javascript君達が何かをしている、ということです。

複数のことを同時にしようとしている状態になり、デバイスやブラウザも懸命に処理をしようとしてはくれますが、どうしても遅くなってしまうのがINPの問題になっちゃうんだと思います。

優先すべきはタップやスクロールなどのユーザー操作であるべきなので、そうなるとJavascript君達には少し大人しくしてもらうか、いなくなってもらえばOKということです。

javascript君はアドセンスやGoogleアナリティクス以外にもたくさんいます。

  • YouTube埋めこみ
  • Twitter埋め込み
  • インスタグラム埋め込み
  • ドロワメニュー、アコーディンメニューなどのURLが変わらずに動くもの
  • reCAPTCHA
  • スライドショー
  • 画像拡大表示などのポップアップ

などなど。

複雑であればあるほどラグくなるのですが、特に気を付けるべきはサードパーティーのJavascript君です。

サードパーティーとはドメインが異なる第三者のことで、先述したYouTube埋め込みやSNSの埋め込み、広告や解析が該当します。

彼らの中にはさらに別のJavascriptを読み込み増殖するものもあり、それらが増えることでINP値の上昇に繋がります。

INPは改善したいがJavascriptを減らすことができない・・・

目次へ戻る

そういったケースもあると思います。

アドセンスだってアナリティクスだってGoogleのサービスだよね？

やっちゃいけないの？

っと言われたら、そんなことはないです、と答えます。

「Javascriptを減らす」ことがINPの改善に繋がりますが、Javascript君を根絶やしにまではしなくても大丈夫です。

あくまで減らすことができればいいんです。

SNSの埋め込みを減らしてみたり、色んな解析サイトのタグを設置ししているのであれば数を絞ったり、複数社のアドネットワーク広告を設置しているのであれば数を絞ったり。

でも・・・

どれも必要なものだから減らせない！

っていう場合はどうすればいいか。

私が知る限りでは「妥協」するしかないのかなと思います(>_<)

特にサードパーティーの場合、こちら側で処理自体をどうにかできるものではありません。

色々な解析サービスを利用した方が効率の良いサイト運営ができるでしょうし、色々な広告を貼った方が収益性は良くなると思います。

ですので、サーチコンソールの言いなりになるだけが正解ではないのではないでしょうか。

ユーザーにとって有益な情報を提供しているのであれば、多少ラグくてもサイトにはアクセスされます。

Googleの検索結果で上位に表示されていなくても、有益な情報であればSNSや口コミで紹介されたりしてサイトにはアクセスされます。

そりゃぁもちろんラグくないに越したことはありませんが、収益だって大事ですよね？

INP改善にJavascript以外でできることはないか！？

目次へ戻る

脇道にそれてしまいましたが、Javascriptを減らすこと以外にできることはないのかというと、そうではありません。

一応もう1つのアプローチ方法として、「ページ当たりのデータ量を減らす」というものがあります。

何言ってんねんって感じですが、データ量もINPの問題に関係しているんです。

ページ当たりのデータ量とは、

  • htmlソース
  • 外部ファイルとして読み込んでいるもの

の総量で俗にいうDOMってやつです。

外部ファイルとして読み込んでいるものとは、CSS・Javascript・画像・フォントなどです。

データ量が多ければ多いほど解析に時間もかかり、比例してユーザーがサイトを操作できるようになるまでの時間も遅くなります。

何でもかんでも読み込むのではなく、INPの問題が指摘されているのであれば、

  • Googleフォントは諦める
  • 画像の量を減らしたりサイズを軽くしたり
  • 使っていないプラグインは無効化
  • CSS、Javascriptを見直して必要なページのみに
  • ページ分割してみたり

など、ページ読み込み時のデータ量を減らすことも検討をするのが良さそうです。

INPの可視化

目次へ戻る

INPの問題が難しい問題である理由として、「目に見えない」というのがあります。

応答性が悪いっていったって、普通に何の問題もなくブラウジングできてるけど？

っていうのは、Lighthouseの監査環境が低く設定されているためだと思います。

今の時代、そんな劣悪な環境でサイトを閲覧することなんてあるのか？

何て言わないで、国や地域によってはそういったこともあるでしょうし、これがGoogleのスタンダードになっている以上は従うしかなさそうです。

web.devにはINPを可視化する方法についても記述がありました。

参考にしたのは以下のページです。

https://web.dev/diagnose-slow-interactions-in-the-lab/

それに沿ってこのブログをチェックする様子を撮影してみましたので載せておきます。

※特に圧縮していないのでスマホで再生する場合はギガ消費に注意してください。

感想は、、、これ見てもよく分からないorz

どれくらいのJavascriptならINPの問題はクリアできるのか

目次へ戻る

御託は良いんだ。

結局のところどうすればいいんだ？

その答えとしてわたしが導き出したものは、「アドセンスとGoogleアナリティクスくらいならOK」です。

実際にこのブログではアドセンスの自動広告とGoogleアナリティクスタグ、更にGA4タグを設置していますが、INPの問題は指摘されていません。

※アドセンス・Google解析タグともに遅延読み込みはしています。

テーマやプラグインが出力するものもあるとは思いますので、もう少し大丈夫だと思います。

“シンプルイズベスト”ってやつです。

あとがき

目次へ戻る

暑くなってきましたね(;´Д｀)

エアコンの温度は何度に設定をしていますか？

わたしはすばり23℃にしています。

昔は電気代を気にして25～27℃にしていたのですが、PCがクラッシュしてしまったので24℃にするようにしていました。

でもこの24℃というのがまた心地良く・・・。

昼間っから眠気を催してしまいますorz

ウトウトしながら仕事なんてできませんので、ちょっと寒いくらいの23℃になったというわけです(*´ω｀*)