Apa Itu INP? Kunci Core Web Vitals agar WordPress Responsif

Website WordPress sudah selesai dimuat, tetapi tombol menu lambat terbuka atau tombol “Tambah ke Keranjang” tidak langsung merespons? Masalahnya bisa berkaitan dengan INP (Interaction to Next Paint). Memahami apa itu INP di Core Web Vitals membantumu mengevaluasi responsivitas website, mengecek skornya, dan menentukan langkah optimasi yang tepat untuk memperbaiki INP di WordPress.

Apa Itu INP di Core Web Vitals?

INP atau Interaction to Next Paint adalah metrik Core Web Vitals yang mengukur seberapa cepat website menampilkan respons visual setelah pengguna berinteraksi dengan halaman.

Interaksi yang diukur mencakup klik mouse, ketukan layar sentuh, dan penekanan tombol keyboard yang memenuhi syarat. Sebaliknya, scroll, hover, dan zoom tidak termasuk dalam pengukuran INP.

Mengapa metrik ini penting? Website yang cepat dimuat belum tentu nyaman digunakan. Menurut web.dev, sekitar 90% waktu pengguna di sebuah halaman dihabiskan setelah halaman selesai dimuat. Artinya, responsivitas website perlu dijaga selama pengunjung berinteraksi, bukan hanya ketika halaman pertama kali dibuka.

Baca Juga: Ini Dia! Cara Mengetahui Versi PHP WordPress

INP mengamati interaksi yang memenuhi syarat sepanjang kunjungan. Nilainya umumnya mencerminkan interaksi dengan latensi tinggi, dengan penyesuaian untuk halaman yang memiliki banyak interaksi. Google kemudian menggunakan persentil ke-75 dari data kunjungan nyata untuk menilai pengalaman pengguna.

INP vs FID: Apa Bedanya?

INP menggantikan First Input Delay (FID) sebagai metrik Core Web Vitals pada Maret 2024. FID hanya mengukur input delay pada interaksi pertama, sedangkan INP mengevaluasi responsivitas interaksi sepanjang kunjungan.

Bagi pengelola WordPress, perbedaan ini cukup penting. Website bisa terlihat cepat saat dibuka, tetapi tetap terasa lambat ketika pengunjung membuka menu, memfilter produk, atau mengisi formulir.

Baca Juga: Node.js Baru Rilis Patch Keamanan, Apa Dampaknya ke Website?

Fungsi INP dalam Core Web Vitals

INP merupakan satu dari tiga metrik utama Core Web Vitals yang mengukur aspek berbeda dari pengalaman pengguna.

• LCP (Largest Contentful Paint): mengukur kecepatan tampilnya konten utama.
• INP (Interaction to Next Paint): mengukur responsivitas terhadap interaksi.
• CLS (Cumulative Layout Shift): mengukur kestabilan tata letak visual.

INP membantu mengidentifikasi apakah halaman terasa macet ketika digunakan. Misalnya, pengunjung toko online berbasis WooCommerce menekan tombol “Tambah ke Keranjang”, tetapi tidak melihat perubahan apa pun selama beberapa saat. 

Pengunjung bisa mengira tombolnya rusak, mengekliknya berulang kali, atau bahkan meninggalkan halaman.

Pengalaman seperti ini berpotensi menghambat konversi dan meningkatkan kemungkinan pengunjung pergi sebelum menyelesaikan transaksi.

Core Web Vitals juga menjadi bagian dari sinyal pengalaman halaman dalam sistem Google Search. Namun, skor INP bagus tidak otomatis menjamin peringkat tinggi karena Google mempertimbangkan banyak faktor SEO lainnya.

3 Komponen yang Membentuk Skor INP

Untuk memahami cara memperbaiki INP, kamu perlu mengetahui bagian mana yang membuat interaksi terasa lambat.

#1. Input Delay

Input delay adalah waktu tunggu sejak pengguna berinteraksi hingga browser mulai menjalankan kode yang menangani interaksi tersebut.

Contohnya, pengunjung mengeklik menu saat browser sedang sibuk menjalankan JavaScript dari plugin, popup, atau script analitik. Klik sudah dilakukan, tetapi menu belum merespons karena browser masih mengerjakan tugas lain.

#2. Processing Time

Processing time adalah waktu yang dibutuhkan untuk menjalankan event handler, yaitu kode JavaScript yang merespons interaksi pengguna.

Jika satu klik memicu banyak proses sekaligus, browser membutuhkan waktu lebih lama untuk menyelesaikannya. Akibatnya, respons terasa tertunda.

#3. Presentation Delay

Presentation delay merupakan waktu dari selesainya pemrosesan hingga browser menampilkan perubahan visual berikutnya. Struktur halaman yang rumit dan DOM yang terlalu besar bisa menambah waktu rendering.

Alurnya sederhana: pengguna mengeklik tombol → input delay → processing time → presentation delay → tampilan diperbarui.

INP mengukur waktu hingga browser menampilkan respons visual berikutnya, bukan seluruh durasi proses di balik layar. Jadi, permintaan jaringan yang masih berjalan tidak otomatis memperburuk INP jika browser sudah memberikan respons visual dengan cepat.

Berapa Skor INP yang Dianggap Bagus?

Google menetapkan ambang skor INP berdasarkan persentil ke-75 data kunjungan nyata, dengan hasil mobile dan desktop dinilai secara terpisah.

Targetnya adalah skor INP maksimal 200 milidetik. Pengukuran dipisahkan berdasarkan perangkat karena kemampuan HP dan komputer berbeda, begitu pula kondisi penggunaan website di lapangan.

Cara Cek Skor INP di Website WordPress

Sebelum melakukan optimasi, cari tahu dulu halaman mana yang bermasalah. Kamu bisa menggunakan beberapa alat berikut.

1. PageSpeed Insights

Buka PageSpeed Insights, masukkan URL website, lalu periksa bagian field data jika tersedia. Data ini berasal dari Chrome User Experience Report (CrUX) dan mencerminkan pengalaman pengguna nyata.

2. Google Search Console

Buka Google Search Console dan periksa laporan Core Web Vitals. Laporan ini membantu menemukan kelompok URL yang memiliki masalah pada perangkat mobile maupun desktop.

3. Lighthouse dan Chrome DevTools

Gunakan Lighthouse atau panel Performance di Chrome DevTools untuk menguji interaksi dan menyelidiki penyebab keterlambatan. Total Blocking Time (TBT) juga bisa menjadi petunjuk adanya tugas yang memblokir browser, tetapi bukan pengganti INP.

Jika skor INP tidak muncul, halaman mungkin belum memiliki cukup data kunjungan CrUX. Pengukuran INP juga membutuhkan interaksi yang memenuhi syarat, sehingga aktivitas scroll atau hover saja tidak cukup.

Alur yang bisa kamu ikuti: cek data lapangan, temukan halaman bermasalah, uji interaksinya di laboratorium, perbaiki penyebabnya, lalu pantau hasilnya kembali.

Penyebab INP Jelek di WordPress

Beberapa hal yang sering memengaruhi optimasi INP WordPress meliputi:

• Terlalu banyak plugin: setiap plugin yang memuat JavaScript tambahan bisa menambah beban browser.
• Tema atau page builder berat: widget, animasi, dan elemen interaktif yang berlebihan membuat halaman lebih kompleks.
• Script pihak ketiga: live chat, pixel iklan, analitik, dan popup dapat bersaing menggunakan main thread.
• Ukuran DOM terlalu besar: terlalu banyak elemen HTML menambah beban perhitungan tata letak dan rendering.
• Server atau hosting lambat: respons server yang buruk bisa memperlambat proses yang menunggu data, meskipun INP tidak mengukur waktu jaringan secara langsung.

Karena penyebabnya berbeda-beda, memasang plugin optimasi saja belum tentu menyelesaikan masalah. Kamu perlu mengetahui sumber keterlambatan terlebih dahulu.

Cara Memperbaiki INP di WordPress

Berikut beberapa langkah yang bisa kamu lakukan untuk meningkatkan responsivitas website.

Kurangi JavaScript yang Tidak Diperlukan

Audit plugin yang digunakan. Hapus plugin yang tidak lagi dibutuhkan setelah memastikan tidak ada fungsi penting yang bergantung padanya. 

Script nonkritis bisa ditunda menggunakan defer atau fitur delay JavaScript, tetapi pastikan menu, formulir, dan keranjang tetap berfungsi normal.

Hindari Tugas JavaScript yang Terlalu Panjang

Tugas yang berjalan terlalu lama bisa memblokir main thread dan meningkatkan input delay. Developer dapat memecah tugas menjadi bagian lebih kecil, menerapkan code splitting, atau menunda pekerjaan yang tidak perlu dilakukan saat itu juga.

Jika kamu tidak terbiasa mengedit kode, mulailah dengan mengidentifikasi plugin atau fitur yang bermasalah sebelum meminta bantuan developer.

Sederhanakan Struktur Halaman

Batasi widget, animasi, dan elemen yang tidak diperlukan. Untuk halaman panjang, pemuatan konten secara bertahap dapat membantu mengurangi pekerjaan browser, selama penerapannya sesuai dengan kebutuhan halaman.

Berikan Umpan Balik Visual

Jangan biarkan pengunjung menebak apakah tombolnya berfungsi. Saat tombol “Tambah ke Keranjang” ditekan, misalnya, tampilkan status “Menambahkan…” sebelum memberikan konfirmasi berhasil.

Umpan balik ini membantu pengguna memahami bahwa tindakannya sudah diterima, meskipun proses selanjutnya masih berjalan.

Optimalkan Database, Caching, dan Hosting

Caching dan optimasi database dapat mengurangi beban server. Hosting yang responsif juga membantu website menangani permintaan secara konsisten, terutama untuk WooCommerce yang memiliki banyak proses dinamis.

Namun, ingat bahwa hosting bukan satu-satunya penentu INP. Jika penyebabnya adalah JavaScript yang memblokir browser, kode tersebut tetap perlu dioptimasi.

Setelah melakukan perubahan, uji kembali halaman penting seperti beranda, halaman produk, keranjang, dan checkout. Pastikan interaksinya berfungsi baik, bukan sekadar mengejar angka skor.

Kesimpulan

INP membantu kamu menilai apakah WordPress benar-benar responsif ketika digunakan. Untuk mencapai skor maksimal 200 milidetik, prioritaskan pemeriksaan JavaScript, plugin, struktur halaman, dan proses rendering sebelum menentukan langkah perbaikan.

Jika website masih terasa lambat, evaluasi juga kualitas server yang digunakan. Hosting untuk WordPress dari IDwebhost bisa menjadi pilihan untuk mendukung pengelolaan WordPress dengan infrastruktur yang sesuai kebutuhan website. Pertimbangkan trafik, kebutuhan sumber daya, dan karakter situs sebelum memilih paket.

Kombinasi kode yang efisien, hosting yang responsif, dan pengalaman pengguna yang baik akan membantu pengunjung berinteraksi dengan website secara lebih nyaman.