Struktur Pagespeed Google, yang sudah biasa kami gunakan selama bertahun-tahun, dibangun untuk memastikan bahwa situs web dimuat dan ditayangkan dengan cepat. Dengan menghasilkan parameter terukur dan memanfaatkan data anonim yang dikumpulkan dari pangsa pasar Chrome, Google menggunakan metrik ini sebagai indikator SEO. Dengan diperkenalkannya Interaction to Next Paint (INP) pada tahun 2022, fokusnya telah bergeser dari sekadar kecepatan memuat halaman ke perspektif kinerja web yang lebih luas. INP tidak hanya mengukur seberapa cepat suatu halaman dimuat tetapi juga seberapa cepat interaksi pengguna pada halaman tersebut diproses. Pada dasarnya, ini mengubah pengalaman navigasi situs menjadi metrik Kecepatan Halaman.
Di blog Kerem, istilah "Penundaan Interaksi Umum" disarankan sebagai istilah yang cocok untuk konsep ini, yang juga dijelaskan dengan baik oleh Google dalam videonya sendiri. Namun, untuk memahami sepenuhnya metrik ini, kita akan mempelajari subjek ini lebih dalam di bagian berikut.
Apa Penjelasan Durasi Polri?
Durasi INP meliputi:
- Waktu antara interaksi pengguna dengan halaman dan eksekusi event handler.
- Waktu eksekusi skrip.
- Waktu dari eksekusi kode hingga tampilan output kepada pengguna.
Proses ini biasanya terjadi dalam milidetik, namun pada perangkat seluler, terutama ponsel Android lama dengan daya CPU rendah, penundaan (latensi) seperti itu sering kali terlihat. Perlu dicatat bahwa data INP, seperti data Lighthouse lainnya, dikumpulkan secara anonim dan dievaluasi berdasarkan Persentil ke-75. Oleh karena itu, tujuannya adalah untuk menciptakan aplikasi yang berkinerja baik pada perangkat rata-rata, bukan hanya pada perangkat kelas atas.
Contoh Durasi INP di Kehidupan Nyata
Berikut beberapa contoh kehidupan nyata dari halaman internet yang kami kunjungi setiap hari untuk menjelaskan konsep ini:
Memasukkan Alamat di Situs E-commerce
Saat Anda berbelanja di situs e-commerce dan memasukkan alamat pengiriman, Anda terlebih dahulu memilih provinsi. Kemudian, ketika Anda mengklik kotak pilih untuk memilih distrik, Anda menunggu beberapa saat hingga hasil Ajax dimuat, dan setelah waktu tertentu, informasi distrik dimuat. Ini adalah contoh bagus dari Polri. Meningkatkan pengalaman pengguna dalam contoh ini dapat melibatkan penambahan "indikator pemuatan" untuk memberi tahu pengguna tentang proses Ajax.
Seleksi Penyortiran
Saat menggunakan filter pada halaman listing produk, jika produk yang difilter tidak dikelola dengan baik setelah mengklik kotak centang, maka INP akan meningkat. Menggunakan JS yang tidak terlalu rumit dan mempertimbangkan pengalaman pengguna selama operasi filter dapat membantu menjaga nilai INP setinggi mungkin.
Galeri Foto Produk
Waktu pengguna menunggu galeri foto dimuat setelah mengklik foto produk di halaman detail produk berpotensi memengaruhi INP.
Tombol Reservasi
Keterlambatan interaksi antara klik tombol “Lakukan Reservasi” dengan halaman berikutnya adalah contoh INP.
Tambahkan ke Keranjang Tombol
Keterlambatan milidetik saat mengklik tombol "Tambahkan ke Keranjang" dan bertanya-tanya apakah barang telah ditambahkan ke keranjang atau tidak secara sempurna mendefinisikan INP.
Seperti yang terlihat dalam contoh ini, jebakan INP hadir dalam skenario yang memengaruhi SEO dan tingkat konversi langsung.
Bagaimana Cara Meningkatkan INP?
- Gunakan Perpustakaan Frontend JS Terkini: Meningkatkan kinerja dengan menggunakan perpustakaan frontend JS modern seperti Vue, React, dan Angular bermanfaat karena menawarkan keunggulan kinerja dan penggunaan kembali.
- Minimalkan Kompleksitas Perpustakaan JS: Dianjurkan untuk menggunakan perpustakaan JS yang tidak terlalu rumit. Secara pribadi, saya menyarankan untuk menghindari jQuery sebisa mungkin.
Tingkat Metrik INP yang Dapat Diterima
Nilai ambang batas untuk kadar INP yang baik, sedang, dan buruk adalah 200 milidetik dan 500 milidetik. Menjaga INP di bawah ambang batas ini sangat penting untuk menjaga pengalaman pengguna yang baik dan kinerja web secara keseluruhan.
