Interaction to Next Paint (INP) adalah salah satu elemen penting dalam Core Web Vitals (CWV) yang digunakan untuk mengukur responsivitas website.
Skor INP yang buruk dapat menandakan respons laman web terhadap interaksi pengguna kurang bagus, sehingga memengaruhi user experience sekaligus performa SEO secara keseluruhan.
Oleh karena itu, memahami faktor penyebab skor INP yang buruk dan cara mengatasinya menjadi langkah penting untuk menjaga site health tetap optimal.
Sebelum membahas lebih lanjut bagaimana caranya, mari kenali dulu apa itu INP dan bagaimana pengaruhnya terhadap SEO situs Anda.
Daftar Isi
- Apa Itu INP (Interaction to Next Paint)?
- Berapa Skor yang Bagus untuk INP?
- Apakah INP Memengaruhi Ranking Website di Google?
- Apa Alasan Umum yang Menyebabkan Skor INP Tinggi?
- Cara Mengidentifikasi Masalah INP
- Cara Meningkatkan INP untuk Site Health yang Lebih Baik
- Optimasi INP untuk Meningkatkan User Experience
Apa Itu INP (Interaction to Next Paint)?
Interaction to Next Paint (INP) adalah metrik yang mengukur responsivitas sebuah website berdasarkan waktu yang dibutuhkannya untuk memproses interaksi user.
Interaksi yang dimaksud bisa berupa mouse click pada tombol, tap pada device dengan touchscreen, atau lainnya.
Contohnya, ketika teman-teman mengeklik tombol “Masukkan Keranjang” pada Shopee, maka tombol tersebut akan mengalami perubahan warna begitu Anda klik.
INP menggantikan FID (First Input Delay), metrik sebelumnya dalam CWV.
Berbeda dengan FID yang hanya mengukur delay input pada interaksi pertama, INP mencakup semua interaksi pada halaman web dan menghitung berapa lama waktu yang dibutuhkan browser untuk memproses interaksi user.
Berapa Skor yang Bagus untuk INP?
Google telah menetapkan batasan skor INP berdasarkan waktu untuk menunjukkan tingkat performa website:
- Baik (Good): ≤ 200 milidetik
- Perlu Perbaikan (Needs Improvement): 201–500 milidetik
- Buruk (Poor): > 500 milidetik
Pengukuran INP dilakukan Google melalui browser Chrome secara anonim. Search engine ini mengambil sampel dari interaksi dengan waktu terlama yang terjadi pada website ketika user mengaksesnya.
Semakin cepat browser melakukan update elemen konten pada laman web di layar device ketika memproses interaksi user (misal mengubah warna tombol ketika diklik), berarti semakin baik INP website. Begitu pun sebaliknya.
Apakah INP Memengaruhi Ranking Website di Google?
Jawabannya adalah iya. Sebab, Google secara eksplisit menyatakan bahwa core web vitals, termasuk metrik INP, merupakan bagian dari ranking factor dalam algoritmanya.
Namun, Interaction to Next Paint tidak hanya berpengaruh pada ranking saja, tetapi juga user experience.
Website dengan INP yang buruk bisa membuat user merasa tidak nyaman berlama-lama melakukan interaksi di dalamnya. Hal ini dapat berakibat pada meningkatnya bounce rate dan mengurangi konversi.
Apa Alasan Umum yang Menyebabkan Skor INP Tinggi?
Skor INP yang tinggi menandakan responsivitas website yang buruk. Oleh karena itu, penting untuk memahami apa saja yang membuat mengapa skornya bisa tinggi pada situs web.
Mengutip dari Search Engine Journal, berikut adalah beberapa penyebab umumnya:
- Long tasks yang bisa memblokir main thread, sehingga interaksi pengguna menjadi delay
- Event listener yang synchronous pada click events (interaksi klik dari mouse atau tap jari)
- Perubahan pada DOM (Document Object Model) yang memicu reflows dan repaints secara berulang. Biasanya terjadi jika ukuran DOM terlalu besar (lebih dari 1.500 elemen HTML)
Cara Mengidentifikasi Masalah INP
Jika website Anda memiliki skor INP yang tinggi, langkah pertama yang perlu dilakukan adalah mengecek akar masalahnya.
Berikut adalah beberapa cara untuk mengatasinya:
- Buka halaman web yang ingin Anda analisis
- Buka DevTools pada browser Anda (lebih baik lewat Canary Chrome) dengan menekan tombol F12 atau Ctrl+Shift+I
- Setelah muncul DevTools, pergi ke tab Network dan nonaktifkan cache
- Klik tab Performance
- Pilih throttle CPU “4x slowdown” untuk mengecek performa website pada device mobile dan pilih jaringan 4G
- Klik tombol record, lalu lakukan interaksi dengan elemen-elemen pada website yang dianalisis.
- Stop recording jika Anda selesai menemukan elemen interaksi yang dianggap menjadi masalahnya.
Pada tab Performance, teman-teman bisa scroll ke bawah untuk melihat skor INP website yang dianalisis. Jika di-scroll lagi, Anda akan menemukan section Interactions.
Dari data-data yang sudah ditemukan, Anda bisa mulai mengidentifikasi elemen atau interaksi mana yang membutuhkan waktu respons paling lama, lalu mulai melakukan perbaikan.
Cara Meningkatkan INP untuk Site Health yang Lebih Baik
Untuk meningkatkan skor INP (Interaction to Next Paint) pada website Anda, penting untuk memahami proses CPU yang terjadi selama interaksi user.
Pada section Interactions di Chrome DevTools, Anda bisa melihat durasi interaksi dalam laman web serta komponen yang terlibat dalam prosesnya.
Sesuai dengan yang terlihat pada gambar tersebut, INP terdiri dari tiga komponen utama:
- Input delay: Background tasks yang mencegah browser menangani interaksi hingga tasks tersebut selesai
- Processing time: Proses menjalankan kode yang menangani interaksi pengguna dan mengatur update pada user interface (UI)
- Presentation delay: Setelah update UI ditetapkan, browser akan memperbarui page layout dan menampilkan konten baru
Teman-teman bisa bekerja sama dengan tim developer untuk mengatasi masalah terkait hal ini. Mungkin Anda menemukan penyebabnya berupa:
- Kode third-party yang aktif di processing background dan memperlambat interaksi
- Kode JavaScript yang dijalankan website sebagai respons terhadap interaksi kurang dioptimalkan
- Tasks CPU yang tidak efisien, sehingga perlu mengatur schedule-nya
Cobalah memprioritaskan elemen atau interaksi yang sering digunakan user, seperti button CTA atau yang berkaitan dengan konversi.
Optimasi INP untuk Meningkatkan User Experience
Skor INP yang bagus tidak hanya meningkatkan site-health, tetapi juga membantu situs web Anda meraih ranking yang lebih tinggi di Google.
Dengan memahami INP dan mengimplementasikan langkah-langkah perbaikan yang tepat, Anda bisa memastikan website Anda memiliki INP yang baik dan memberikan experience yang responsif dan memuaskan bagi user.
Jangan lupa untuk memantau performa website secara berkala dan terus melakukan optimasi berdasarkan update terbaru.
Apabila Anda perlu insight lebih luas seputar INP dan optimasi website, jangan sungkan untuk mendiskusikannya bersama para pegiat SEO di grup Telegram DailySEO ID. Yuk, gabung dengan klik di sini.
Sedikit informasi, DailySEO ID masih membuka kelas SEO Fundamental Course yang bisa teman-teman pemula ikuti. Daftar waiting list-nya sekarang dengan mengunjungi halaman ini.
References:
Interaction To Next Paint (INP): Everything You Need To Know
