Cara Memperbaiki Skor INP (Interaction to Next Paint) di Website

Bagaimana cara memperbaiki skor INP di website? Jawaban singkatnya: Anda perlu mengurangi beban thread utama yang menunda proses render berikutnya di layar setelah pengguna melakukan klik, sentuhan, atau interaksi keyboard. Caranya, Anda harus memecah tugas JavaScript yang panjang, menghapus script yang tidak diperlukan, meringankan event listener, mengoptimalkan sumber daya yang memblokir render, mengontrol kode pihak ketiga, dan melakukan pengukuran dengan data pengguna nyata. Skor INP yang baik adalah 200 ms atau kurang; rentang 200-500 ms memerlukan perbaikan, sedangkan di atas 500 ms dianggap buruk.

INP, atau Interaction to Next Paint, adalah salah satu metrik Core Web Vitals yang krusial dalam strategi SEO dan pengalaman pengguna di tahun 2026. Google kini tidak hanya melihat seberapa cepat halaman dimuat, tetapi juga seberapa mulus interaksi pengguna dengan situs setelah halaman terbuka. Menu yang lambat muncul saat tombol filter produk diklik, tombol tambah ke keranjang yang membeku, menu mobile yang lambat merespons, atau kolom formulir yang lag saat diketik merupakan ciri khas masalah INP.

Dalam panduan ini, Anda akan mempelajari cara mengukur nilai INP, menemukan hambatan teknis yang menyebabkan skor buruk, serta langkah-langkah optimasi konkret yang bisa diterapkan baik sebagai developer, pemilik situs, maupun administrator WordPress. Selain itu, kami juga akan membahas pengaruh tidak langsung dari infrastruktur hosting, penggunaan CDN, dan koneksi aman terhadap performa melalui contoh-contoh praktis. Jika Anda ingin memilih infrastruktur yang berorientasi pada performa, Anda bisa mempertimbangkan Paket Hosting Web dan untuk proyek berbasis WordPress, lihat opsi Hosting WordPress.

Apa Itu INP dan Mengapa Penting?

INP mengukur kecepatan respons keseluruhan dari interaksi pengguna pada sebuah halaman. Pengguna mengklik tombol, mengganti tab, membuka menu, mengetik di kolom formulir, atau menyentuh elemen di perangkat seluler. Browser memproses interaksi ini, menjalankan JavaScript, melakukan kalkulasi gaya dan tata letak, lalu menciptakan status visual baru di layar. Durasi waktu dari interaksi hingga pembaruan visual inilah yang dinilai oleh INP.

Di tahun-tahun sebelumnya, First Input Delay atau FID sangat penting; namun FID hanya berfokus pada penundaan interaksi pertama. Sementara itu, INP mengevaluasi interaksi secara lebih komprehensif di seluruh siklus hidup halaman. Oleh karena itu, INP lebih merepresentasikan pengalaman pengguna nyata di situs e-commerce, blog, panel SaaS, situs korporat, dan sistem keanggotaan.

Ambang batas yang direkomendasikan Google adalah sebagai berikut:

INP penting tidak hanya untuk SEO, tetapi juga untuk tingkat konversi. Misalnya, di halaman kategori yang tombol filternya di perangkat seluler baru terbuka setelah 700 ms, pengguna mungkin mengira prosesnya gagal dan menekan tombol itu lagi atau meninggalkan halaman. Sebaliknya, antarmuka yang merespons di level 150-180 ms terasa lebih andal, cepat, dan profesional.

Bagaimana Cara Mengukur Skor INP?

Sebelum memulai optimasi INP, pengukuran yang tepat wajib dilakukan. Sebab, alat lab hanya menunjukkan perkiraan masalah, sementara data pengguna nyata mencerminkan kondisi perangkat, koneksi, dan browser di lapangan. Pendekatan paling sehat adalah menggabungkan kedua tipe data ini.

1. Lakukan pengecekan cepat dengan PageSpeed Insights

PageSpeed Insights akan menampilkan nilai INP pengguna nyata jika data Chrome User Experience Report tersedia. Periksa hasil seluler dan desktop secara terpisah. Prioritaskan data seluler, karena thread utama lebih mudah tersumbat di ponsel dengan prosesor rendah. Jika nilai INP halaman di atas 200 ms, catat bagian peluang dan diagnostik yang muncul.

2. Pantau laporan Core Web Vitals di Search Console

Laporan Core Web Vitals di Google Search Console mendaftarkan masalah berdasarkan grup URL. Di sini Anda bisa melihat apakah template serupa bermasalah, bukan hanya satu halaman. Misalnya, jika semua halaman detail produk memiliki INP buruk, kemungkinan besar masalahnya ada di tema, script keranjang, plugin komentar, atau kode variasi produk.

3. Gunakan panel Performance di Chrome DevTools

Panel Performance di Chrome DevTools menunjukkan fungsi JavaScript mana yang berjalan saat klik terjadi dan tugas mana yang membentuk long task di atas 50 ms. Rekam klik menu dan periksa blok ungu, kuning, dan hijau di thread utama. Eksekusi script yang panjang, kalkulasi ulang gaya yang berulang, dan tugas tata letak yang intensif adalah sinyal kritis untuk INP.

4. Pasang pemantauan pengguna nyata

Pada proyek dengan traffic tinggi, menggunakan RUM atau Real User Monitoring sangatlah berharga. Anda bisa mengumpulkan data INP dengan pustaka Web Vitals dan menganalisisnya berdasarkan URL, tipe perangkat, browser, negara, serta target interaksi. Contohnya, data mungkin menunjukkan bahwa klik menu mobile hanya di perangkat Android tertentu memiliki INP 620 ms. Informasi ini memungkinkan Anda melakukan perbaikan tepat sasaran alih-alih optimasi umum.

Penyebab Paling Umum Skor INP Buruk

Sebagian besar masalah INP bukan berasal dari respons server, melainkan karena browser melakukan terlalu banyak pekerjaan saat momen interaksi pengguna. Meski begitu, infrastruktur, pengiriman file, cache, dan dependensi pihak ketiga secara tidak langsung dapat menambah beban ini.

File JavaScript yang berat

Di situs web modern, tema, slider, live chat, iklan, analitik, A/B testing, peta, dan komponen media sosial memuat banyak file JavaScript. File-file ini tidak hanya diunduh; mereka diurai, dikompilasi, dan dijalankan oleh browser. Jika proses ini menyibukkan thread utama, respons terhadap klik pengguna menjadi terlambat.

Long task (Tugas Panjang)

Pekerjaan thread utama yang berlangsung lebih dari 50 ms dianggap sebagai long task. Satu tugas yang berjalan 300 ms bisa menunda klik pengguna. Contohnya, script yang menghitung ulang seluruh 1000 produk di sisi klien saat tombol filter ditekan bisa dengan mudah mendorong nilai INP di atas 500 ms.

DOM yang kompleks dan operasi layout yang mahal

Terlalu banyak node HTML, komponen bersarang, perubahan gaya yang sering, dan kesalahan layout thrashing (membaca lalu menulis berulang kali) merusak INP. Mega menu, halaman daftar produk, dan aplikasi satu halaman yang panjang sangat rentan terhadap risiko ini.

Script pihak ketiga

Jaringan iklan, piksel pelacakan, alat peta panas, kode live chat, dan embed media sosial menjalankan kode di luar kendali situs Anda. Jika kode ini menggunakan thread utama saat interaksi terjadi, antarmuka yang Anda bangun dengan rapi pun bisa ikut lambat merespons.

Pembengkakan plugin dan tema WordPress

Di situs WordPress, setiap plugin bisa menambahkan file CSS dan JS-nya sendiri. Jika script plugin formulir kontak hanya dibutuhkan di halaman kontak tetapi dimuat di seluruh situs, itu menciptakan beban yang tidak perlu. Demikian pula, editor visual, slider, dan plugin pop-up dapat berdampak negatif pada skor INP seluler.

Bagaimana Cara Memperbaiki Skor INP? Rencana Penerapan Langkah demi Langkah

Jawaban praktis untuk pertanyaan bagaimana cara memperbaiki skor INP adalah pendekatan: ukur, isolasi, kurangi, pecah, dan ukur lagi. Langkah-langkah berikut disusun berdasarkan urutan prioritas yang diterapkan tim teknis di proyek nyata.

1. Temukan interaksi yang paling bermasalah

Pertama, tentukan interaksi mana yang menghasilkan INP buruk. Apakah menu mobile, tombol tambah ke keranjang, panel filter, kotak pencarian, atau pengiriman formulir? Saat merekam dengan Performance DevTools, ulangi aksi terkait beberapa kali. Di dalam rekaman, periksa target klik dan durasinya di bagian Event Timing atau Interaction.

Contoh nyata: Di sebuah situs e-commerce, tombol filter kategori menghasilkan INP 740 ms. Setelah ditelusuri, ternyata saat tombol ditekan, seluruh kartu produk di-render ulang dan 1800 node DOM diperbarui secara bersamaan. Setelah panel filter dipindahkan ke komponen terpisah dan pembaruan daftar ditunda, INP turun ke level 190 ms.

2. Kurangi ukuran paket JavaScript

Menghapus kode yang tidak terpakai adalah salah satu langkah paling efektif untuk INP. Gunakan bundle analyzer untuk melihat pustaka mana yang memperbesar file. Alih-alih mengimpor seluruh pustaka, impor hanya modul yang diperlukan. Misalnya, daripada menggunakan pustaka tanggal yang besar, gunakan alternatif yang lebih ringan atau API Intl bawaan.

• Matikan fitur tema yang tidak digunakan.
• Jangan memuat script slider, galeri, dan animasi yang tidak diperlukan di halaman tertentu.
• Gunakan alat build modern yang mendukung tree shaking.
• Jangan kirimkan kode panel admin ke sisi pengunjung.
• Layani file polyfill lama hanya untuk browser yang benar-benar membutuhkannya.

3. Pecah tugas panjang menjadi bagian-bagian kecil

Agar browser dapat merespons interaksi pengguna, thread utama harus longgar secara berkala. Alih-alih melakukan kalkulasi besar sekaligus, pecahlah menjadi beberapa bagian. Gunakan setTimeout, scheduler.postTask, requestIdleCallback, atau fitur penjadwalan dari framework untuk tujuan ini. Tujuannya adalah menciptakan pekerjaan kecil 20-40 ms alih-alih satu pekerjaan besar 300 ms.

Misalnya, jika Anda perlu memfilter dan menggambar ulang tabel dengan 5000 baris, perbarui dulu 50 baris pertama yang terlihat oleh pengguna, lalu proses sisanya dengan virtualisasi atau tugas latar belakang. Dengan begitu, hasil klik pengguna muncul dengan cepat, dan sisa proses tidak memblokir pengalaman.

4. Sederhanakan event listener

Menjalankan fungsi berat pada setiap event klik, input, scroll, dan keydown akan merusak INP. Sangat keliru jika mengirim permintaan API atau menghitung ulang seluruh daftar di setiap ketukan tombol pada kolom input. Gunakan teknik debounce dan throttle untuk mengurangi frekuensi eksekusi.

• Terapkan debounce 300 ms pada kotak pencarian.
• Pilih passive listener untuk event scroll.
• Gunakan event delegation alih-alih menambahkan listener ke ratusan elemen satu per satu.
• Berikan umpan balik visual terlebih dahulu setelah klik, lalu mulai pekerjaan beratnya.

5. Berikan umpan balik visual instan kepada pengguna

Karena INP terkait dengan render berikutnya, sangat penting untuk menciptakan perubahan visual sekecil apa pun segera setelah interaksi pengguna. Tombol yang berubah menjadi status aktif, indikator loading, area skeleton, atau frame pertama panel yang terbuka memberi kesan kepada pengguna bahwa sistem sedang bekerja. Daripada menunggu respons API yang berat lalu mengubah seluruh antarmuka sekaligus, rancanglah umpan balik cepat dan pembaruan bertahap.

6. Kurangi biaya render dan layout

CSS dan layout sama berpengaruhnya dengan JavaScript terhadap INP. Mengubah ukuran, posisi, dan gaya banyak elemen setelah klik adalah operasi yang mahal. Untuk animasi CSS, gunakan transform dan opacity daripada width, height, top, dan left karena biasanya lebih performan. Gunakan virtualisasi pada daftar besar; jangan simpan ratusan kartu yang tidak terlihat di DOM.

Hindari kesalahan layout thrashing. Artinya, jangan membaca lebar elemen, lalu menulis gaya, lalu membaca lagi dalam satu loop. Kelompokkan operasi baca dan tulis. Bahkan penataan sederhana ini bisa menghemat puluhan milidetik di halaman yang kompleks.

7. Audit kode pihak ketiga

Untuk setiap script eksternal, tanyakan ini: Apakah kode ini berkontribusi langsung pada konversi? Jika kontribusinya rendah, hapus, tunda, atau muat hanya di halaman yang diperlukan. Memasang kode live chat di halaman pembayaran mungkin masuk akal; tetapi mungkin tidak perlu berjalan saat pertama kali dimuat di semua postingan blog. Muat script iklan dan analitik dengan defer atau async jika memungkinkan, untuk mencegahnya menghalangi interaksi penting.

8. Pindahkan kalkulasi berat menggunakan Web Worker

Jika pekerjaan seperti pemfilteran produk, pemrosesan JSON besar, enkripsi, transformasi data, atau kalkulasi rumit mengunci thread utama, gunakan Web Worker. Worker melakukan pekerjaan ini di latar belakang; sementara thread utama tetap merespons interaksi pengguna. Tidak semua pekerjaan harus dipindahkan ke Worker, tetapi ini bisa sangat bermanfaat untuk proses yang mengonsumsi CPU di atas 100 ms.

9. Optimalkan biaya framework dan hydration

Pada framework seperti React, Vue, Angular, Next.js, atau Nuxt, biaya hydration setelah muat awal dapat memengaruhi INP. Alih-alih membuat seluruh halaman interaktif, pertimbangkan pendekatan seperti arsitektur pulau (island architecture), partial hydration, atau komponen server. Biarkan konten yang tidak memerlukan interaksi tetap statis. Memuat komponen seperti modal, area komentar, atau rekomendasi hanya saat pengguna membutuhkannya memberikan hasil yang lebih baik.

10. Kurangi beban plugin di situs WordPress

Jika Anda menggunakan WordPress, buatlah inventarisasi plugin untuk optimasi INP. Hapus plugin ganda yang melakukan pekerjaan serupa. Periksa apakah plugin formulir, galeri, slider, dan pop-up memuat file di semua halaman. Anda dapat menonaktifkan file CSS dan JS yang tidak perlu per halaman menggunakan plugin performa yang memiliki fitur asset unload.

Contoh penerapan: Sebuah situs korporat WordPress memiliki nilai INP seluler di halaman utama 560 ms. Plugin slider dihapus dan area hero dibangun ulang dengan HTML/CSS ringan, script pop-up ditunda 5 detik, dan file JS formulir kontak hanya dimuat di halaman kontak. Hasilnya, INP seluler turun menjadi 210 ms, lalu menjadi 175 ms setelah penyesuaian kecil berikutnya.

Bagaimana Hosting dan Infrastruktur Memengaruhi Skor INP?

INP pada dasarnya adalah metrik responsivitas sisi klien; artinya, beban thread utama di browser adalah penentunya. Namun, infrastruktur hosting bukan berarti tidak relevan sama sekali. Respons server yang cepat, caching yang tepat, versi PHP modern, dukungan HTTP/2 atau HTTP/3, CDN, dan kompresi memastikan file dikirimkan lebih cepat dan teratur. Hal ini membantu thread utama bekerja lebih terkontrol, terutama saat pemuatan awal.

Pada infrastruktur berkualitas rendah, TTFB yang tinggi, sumber daya yang datang terlambat, perilaku cache yang tidak konsisten, dan beban server yang padat merusak pengalaman pengguna. Jika situs WordPress tanpa cache melakukan operasi PHP dan database yang berat di setiap permintaan, halaman menjadi lebih lambat siap berinteraksi. Oleh karena itu, pekerjaan INP tidak boleh dipisahkan sepenuhnya dari optimasi LCP dan TTFB.

• Gunakan caching sisi server.
• Pilih PHP 8.x dan versi database terbaru.
• Layani file statis melalui CDN.
• Aktifkan kompresi Brotli atau Gzip.
• Jaga konfigurasi SSL/TLS tetap mutakhir; untuk koneksi aman, lihat halaman sertifikat SSL.
• Jika Anda membangun proyek atau situs merek baru, gunakan alat Pemeriksaan Domain untuk pemilihan nama domain yang tepat.

Tabel Prioritas Optimasi INP

Tabel berikut merangkum perbaikan apa yang harus dilakukan dan kapan di situs web pada umumnya. Hasilnya bisa berbeda di setiap proyek; oleh karena itu, lakukan pengukuran ulang dengan PageSpeed Insights, Search Console, dan data pengguna nyata setelah setiap perubahan.

Daftar Periksa Teknis untuk Developer

Perbaikan INP harus diubah menjadi daftar periksa yang dapat dilacak di dalam tim. Jika tidak, pekerjaan kecepatan satu kali bisa rusak dalam beberapa bulan karena plugin baru, kode kampanye, dan perubahan desain.

• Target INP seluler di bawah 200 ms harus ditetapkan untuk setiap template penting.
• Peningkatan ukuran bundle harus diperiksa dalam proses pull request.
• Dampak performa harus diuji sebelum menambahkan script pihak ketiga baru.
• Minimal interaksi menu seluler, pencarian, formulir, dan pembelian harus diukur dengan rekaman Performance DevTools.
• Long task harus diupayakan turun di bawah 50 ms; jika tidak memungkinkan, pecahlah.
• Animasi harus menggunakan transform dan opacity.
• Pagination, infinite scroll, atau virtualisasi harus digunakan untuk daftar besar.
• Data RUM harus dilaporkan bulanan dan peringatan Search Console harus diikuti.

Kesalahan Umum dalam Optimasi INP

Hanya memasang plugin cache

Cache itu penting, tetapi bukan satu-satunya solusi untuk INP yang buruk. Cache bisa membuat halaman lebih cepat terkirim; namun tidak otomatis memperbaiki kode JavaScript berat yang berjalan saat pengguna mengeklik. Oleh karena itu, cache harus dipadukan dengan optimasi kode.

Melihat skor lab lalu melupakan pengguna nyata

Tes Lighthouse memang berguna, tetapi tidak cukup jika hanya mengandalkannya. Pengguna nyata datang dengan perangkat, jaringan, dan browser yang berbeda. Khususnya perangkat Android kelas bawah sering mengungkap masalah INP yang tidak terlihat di tes desktop.

Menunda semua script secara acak

Teknik defer dan delay harus diterapkan dengan hati-hati. Konfigurasi yang salah bisa merusak menu, keranjang, formulir, atau alur pembayaran. Script interaksi penting harus dilindungi, sementara kode yang tidak perlu dan pihak ketiga harus ditunda secara terkontrol.

Fokus pada performa visual tapi mengabaikan interaksi

Mengompresi gambar sangat berharga untuk LCP; tetapi tidak selalu menyelesaikan masalah INP. Jika masalahnya ada pada kode yang berjalan setelah klik, optimasi gambar saja tidak akan cukup. Core Web Vitals harus ditangani secara holistik.

Strategi SEO Berbasis INP untuk Tahun 2026

Dalam pendekatan SEO 2026, performa teknis, kualitas konten, dan infrastruktur yang andal dinilai secara bersamaan. AI Overviews Google dan pengalaman pencarian yang canggih cenderung mengedepankan halaman yang memberikan jawaban tercepat dan paling memuaskan bagi pengguna. Karena itu, optimasi INP bukan hanya tugas developer, melainkan tanggung jawab bersama tim SEO, UX, konten, dan infrastruktur.

Pada sebuah postingan blog, menu daftar isi, filter kategori, atau formulir komentar harus bekerja dengan cepat; di situs e-commerce, pemilihan ukuran, perubahan variasi, dan tombol tambah ke keranjang harus merespons seketika. Di situs korporat, formulir penawaran, menu seluler, dan tombol kontak tidak boleh mengalami penundaan. Jika pengguna merasa situsnya cepat, mereka akan tinggal lebih lama, menjelajahi lebih banyak halaman, dan kemungkinan konversi meningkat.

Di sisi Hostragons, Anda dapat membangun fondasi yang kokoh untuk pekerjaan SEO teknis Anda dengan memilih hosting berorientasi performa, teknologi server terkini, dan infrastruktur yang aman. Mengelola domain, hosting, dan konfigurasi keamanan dari satu pusat akan mengurangi beban operasional; ini memungkinkan tim Anda untuk lebih fokus pada pengalaman pengguna dan kualitas konten. Untuk solusi terkait, Anda bisa melihat halaman Hosting Korporat, server VPS, dan sertifikat SSL.

Kesimpulan

Inti dari memperbaiki skor INP adalah mencegah browser melakukan pekerjaan yang tidak perlu saat momen interaksi pengguna. Pertama, temukan interaksi paling lambat dengan data nyata; lalu kurangi beban JavaScript, pecah long task, sederhanakan event listener, turunkan biaya render, dan kendalikan kode pihak ketiga. Hosting, cache, CDN, dan konfigurasi keamanan terkini juga menyediakan fondasi kuat yang mendukung proses ini.

Jika Anda ingin membuat situs web Anda lebih cepat, andal, dan ramah pengguna, mulailah dengan pengukuran kecil: periksa nilai INP seluler halaman paling kritis Anda dan terapkan tiga langkah pertama dalam panduan ini. Untuk memulai dengan performa tinggi di sisi infrastruktur, Anda bisa menjelajahi solusi Hostragons dan mengevaluasi paket hosting yang sesuai dengan kebutuhan Anda secara tenang dan komparatif.

Pertanyaan yang Sering Diajukan

Berapa seharusnya skor INP yang ideal?

Skor INP yang baik adalah 200 ms atau kurang. Rentang 200-500 ms menunjukkan area yang perlu ditingkatkan, sedangkan di atas 500 ms menunjukkan pengalaman pengguna yang buruk. Data pengguna seluler khususnya harus diprioritaskan.

Apa perbedaan antara INP dan FID?

FID hanya mengukur penundaan pada interaksi pertama pengguna, sementara INP mengevaluasi kualitas respons dari interaksi yang terjadi sepanjang siklus hidup halaman. Itulah mengapa INP merefleksikan pengalaman pengguna nyata secara lebih komprehensif.

Mengapa skor INP di situs WordPress sering buruk?

Umumnya karena terlalu banyak plugin, tema yang berat, CSS/JS tidak perlu yang dimuat di semua halaman, slider, script pop-up, dan kode pihak ketiga. Pembersihan plugin, penonaktifan file per halaman, dan penggunaan tema ringan memberikan peningkatan yang signifikan.

Apakah mengganti hosting bisa memperbaiki skor INP?

Hosting saja tidak memperbaiki JavaScript yang berat atau long task; namun, server yang cepat, cache yang baik, CDN, PHP terkini, dan pengiriman sumber daya yang stabil mendukung optimasi INP. Jadi, efeknya tidak langsung tetapi penting, terutama di situs WordPress.

Berapa lama optimasi INP menunjukkan hasil?

Setelah perbaikan kode dan plugin dilakukan, hasilnya bisa langsung terlihat di tes laboratorium. Namun, di Search Console dan data pengguna nyata Chrome, perubahan biasanya memerlukan beberapa minggu untuk tercermin, karena data pengguna yang cukup harus terkumpul terlebih dahulu.