27
実際のユーザーがどのように Web サイトを体験しているか
を知るためには、フィールド データを収集することが重要
です。web-vitals.js は、ターゲット要素、イベントタイ
プ、開始時間などのアトリビューションを収集し、インタ
ラクションの遅延を発見するのに役立ちます。
INP を最適化する方法の１つが、イベント コールバックを
最適化し、表示遅延を最小化することです。Ameba では、
イベント コールバックのフローを改善することで、next
paint time の 50％ を短縮できました。
セクション 04
INP の最適化
-50%
Interaction to Next Paint
Slide 28
Slide 28 text
// NOTE: this is a sample, not a
production code
// Before
photo.addEventListener('click', async
() => {
const images = await fetch(...);
modal.innerHTML = '';
modal.classList.add('show');
});
Slide 29
Slide 29 text
// NOTE: this is a sample, not a
production code
// After
photo.addEventListener('click', async
() => {
// Display modal ASAP
modal.classList.add('show');
const images = await fetch(...);
modal.innerHTML = '';
});