Interaction to Next Paint (INP)
Mengenali interaksi lambat dari respons yang dirasakan user, bukan hanya dari handler click yang terlihat panjang.
Tujuan belajar
- Menjelaskan pengalaman user yang direpresentasikan INP
- Menghubungkan interaction lambat dengan kerja di main thread
- Membedakan observasi interaction dari asumsi implementasi
- Memilih langkah awal diagnosis di browser tools
Isi lesson
6 blok- 1.Click yang diterima belum tentu terasa cepatBelum selesaiWajib
- 2.Satu action dapat memicu lebih dari satu jenis kerjaBelum selesaiWajib
- 3.Writing practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Jangan menyelesaikan interaction lambat dengan timeout atau debounce acakBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Click yang diterima belum tentu terasa cepat
WajibInteraction to Next Paint atau INP mengukur seberapa cepat halaman memberi umpan balik visual setelah user berinteraksi. Pada aplikasi belajar, user dapat menekan Simpan kode, membuka outline, mengetik di filter lesson, atau mengirim form. Bila browser sibuk menjalankan kerja JavaScript besar, layout, atau paint, user dapat merasa tombolnya tidak merespons walaupun event handler akhirnya selesai. INP menilai pengalaman interaksi nyata; target panduan untuk pengalaman baik adalah 200 milidetik atau kurang. Fokus diagnosisnya adalah interaction yang paling mahal dan pekerjaan yang menunda paint berikutnya, bukan sekadar mencari function terpanjang di codebase.
Bagian ini memengaruhi progres lesson.
Satu action dapat memicu lebih dari satu jenis kerja
WajibsaveButton.addEventListener("click", () => {
setSaving(true);
sortEveryLessonInMemory();
buildLargeSearchIndex();
persistDraftsSynchronously();
setSaving(false);
});Contoh ini bukan bukti bahwa seluruh baris pasti menjadi masalah. Ia menunjukkan hipotesis yang layak diuji: kerja sinkron besar dapat menahan main thread sebelum UI sempat menggambar state menyimpan. Rekam interaction yang terasa lambat di Performance panel, lalu lihat task, JavaScript, style, layout, dan paint yang benar-benar terjadi.
Bagian ini memengaruhi progres lesson.
Writing practice
WajibLatihan menulis
Bayangkan learner menekan Simpan kode dan tombol baru berubah beberapa saat kemudian. Tulis catatan diagnosis awal: jelaskan dampaknya bagi user, observasi yang ingin kamu rekam, dua kemungkinan kategori kerja yang akan diperiksa, dan satu perubahan kecil yang ingin kamu ukur setelahnya. Jangan menyatakan penyebab pasti sebelum ada rekaman.
Tulis draft dulu sebelum menandai writing practice selesai.
0/260 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Mengapa Lighthouse tidak dapat memberi nilai INP langsung seperti data interaksi user?
Progres lesson naik setelah jawaban benar.
Peringatan
WajibJangan menyelesaikan interaction lambat dengan timeout atau debounce acak
Menunda kerja tanpa memahami urutannya dapat membuat feedback lebih membingungkan atau hanya memindahkan biaya ke waktu lain. Mulai dari interaction yang bisa dirasakan, rekam bukti, lalu pilih perubahan yang menjaga feedback penting tetap cepat dan behavior tetap benar.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- INP menghubungkan action user dengan paint umpan balik berikutnya.
- Main thread yang sibuk dapat membuat click, input, atau submit terasa terlambat.
- Rekaman performance membantu membedakan JavaScript, layout, dan paint yang benar-benar mahal.
- Lighthouse memberi proxy lab; data interaction nyata tetap penting untuk memahami INP.
- Berikutnya, CLS memeriksa apakah halaman tetap stabil saat konten dan resource datang.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Click yang diterima belum tentu terasa cepat.