INPスコアを改善する実践的なやり方

INPスコアを改善する実践的なやり方

はじめに この記事では、React を使用したページの INP（Interaction to Next Paint） を改善するための...概要を表示 はじめに この記事では、React を使用したページの INP（Interaction to Next Paint） を改善するための具体的な方法を紹介します。 INP とは？ INP は、ウェブサイトの応答性を測定する重要な指標です。以下のような操作時に、画面がどれだけ速く反応するかを数値化します： ボタンをクリックして商品を追加する メニューを開く フォームに入力する 目安：Google は「200ms 以下」を理想としています。 要するに、この数値が小さいほどユーザー体験が良好ということです。詳しくはこちらの記事を参考にしてください。 弊社が提供するサービスバス比較なびでは、かつて8 万件の INP 警告がありましたが、1 万件まで削減しました。本記事では、その際に行った手順や改善方法を共有します。 1. INP を計測する 改善の第一歩は、問題箇所を特定するための計測です。 本記事