Pada bulan Maret 2024, Google secara resmi menggantikan metrik kegunaan web lama First Input Delay (FID) dengan metrik performa baru yang jauh lebih ketat dan akurat: Interaction to Next Paint (INP). Perubahan ini membawa dampak besar bagi industri pengoptimalan mesin pencari (SEO) dan pengembangan web secara global. Banyak pemilik website yang sebelumnya memiliki skor FID berkategori hijau (baik), tiba-tiba mendapati status kesehatan performa web mereka di Google Search Console berubah menjadi kuning (membutuhkan perbaikan) atau merah (buruk) akibat penilaian INP yang buruk.

Jika FID hanya mengukur waktu tunggu dari interaksi pertama kali pengguna hingga browser mulai memproses kueri tersebut di latar belakang, maka INP mengukur seluruh waktu yang berlalu mulai dari saat pengguna melakukan interaksi fisik (seperti mengeklik tombol, mengetik di kolom pencarian, atau membuka menu navigasi) hingga browser selesai menggambar ulang bingkai visual berikutnya di layar secara nyata. Artikel ini akan membedah tuntas aspek teknis INP serta cara melakukan optimasi agar website Anda tetap berada di peringkat teratas Google.

Mengapa Google Mengganti FID dengan INP?

Untuk memahami alasan pergantian ini, mari kita perhatikan ilustrasi perbandingan cakupan pengukuran antara kedua metrik berikut:

[ AKSI PENGGUNA: KLIK TOMBOL ]
      │
      ▼
├─────────────────────────┤  ◄── FID Hanya Mengukur Tahap Ini (Waktu Tunggu Awal)
│  Input Delay (Jeda)     │
├─────────────────────────┤
│  Processing Time (Kerja)│  ◄── CPU menjalankan kode JavaScript Anda di Latar Belakang
├─────────────────────────┤
│  Presentation Delay     │  ◄── Waktu menggambar ulang visual baru di layar (Paint)
├─────────────────────────┤
      ▲
      │
      └────────────────────────────────── INP Mengukur TOTAL KETIGA TAHAP ini!

Metode pengukuran FID yang lama memiliki kelemahan besar karena mengabaikan durasi eksekusi kode JavaScript itu sendiri serta waktu yang dibutuhkan sistem browser untuk memperbarui tampilan visual di layar. Sering kali, pengguna merasa website terasa macet atau lambat karena meskipun browser merespons input dengan cepat (FID rendah), tampilan visual tombol yang tertekan atau animasi memuat halaman (loading spinner) membutuhkan waktu hingga $2\text{ detik}$ untuk muncul di layar.

INP memperbaiki celah penilaian ini dengan mengukur total akumulasi latensi keseluruhan, memastikan bahwa website benar-benar terasa responsif secara nyata di tangan pengguna.

Berapa Skor Standar INP yang Baik?

Google menetapkan tiga klasifikasi penilaian untuk metrik INP berdasarkan persentil ke-75 dari data kunjungan riil pengguna di lapangan (Chrome User Experience Report / CrUX):

• Baik (Hijau): Skor INP berada di bawah atau sama dengan $200\text{ milidetik}$. Website dinilai responsif dan memberikan pengalaman interaksi yang instan.
• Membutuhkan Perbaikan (Kuning): Skor INP berada di antara $200\text{ ms}$ hingga $500\text{ ms}$. Ada jeda latensi yang cukup terasa oleh mata manusia.
• Buruk (Merah): Skor INP berada di atas $500\text{ ms}$. Website dinilai lambat, macet, dan sangat mengganggu kenyamanan pengguna saat bernavigasi.

3 Penyebab Utama Skor INP Buruk dan Solusi Teknisnya

Berdasarkan analisis audit performa web, berikut adalah tiga faktor teknis utama yang menyebabkan tingginya nilai latensi INP beserta strategi konkret untuk memperbaikinya:

1. Blokir Thread Utama akibat Tugas JavaScript yang Panjang (Long Tasks)

Thread utama (main thread) browser bertanggung jawab untuk menangani interaksi pengguna sekaligus mengeksekusi kode JavaScript dan menggambar tampilan visual (rendering). Jika thread utama sedang sibuk mengeksekusi fungsi JavaScript yang membutuhkan waktu di atas $50\text{ ms}$ (Long Task), interaksi pengguna yang masuk terpaksa harus mengantre lama di belakang proses tersebut.

• Solusi: Teknik Pemecahan Tugas (Yielding to the Main Thread). Pecah fungsi JavaScript berukuran raksasa menjadi rangkaian tugas-tugas kecil yang berjalan secara asinkron. Manfaatkan API modern seperti scheduler.yield() atau fungsi standar setTimeout() untuk memberikan kesempatan bagi browser memproses input pengguna yang masuk di sela-sela eksekusi kode Anda:

// Contoh Fungsi Tradisional yang Memblokir Thread Utama (INP Tinggi)
function prosesDataBesar(data) {
  for (let item of data) {
    kalkulasiBerat(item); // Memblokir main thread jika data berjumlah ribuan
  }
}

// Contoh Optimasi dengan Yielding untuk Menjaga Kecepatan INP
async function prosesDataBesarOptimasi(data) {
  for (let item of data) {
    kalkulasiBerat(item);
    
    // Berikan kesempatan thread utama bernapas setiap 50 iterasi
    if (data.indexOf(item) % 50 === 0) {
      if (typeof scheduler !== 'undefined' && scheduler.yield) {
        await scheduler.yield(); // API Modern Yielding
      } else {
        await new Promise(resolve => setTimeout(resolve, 0)); // Alternatif Fallback
      }
    }
  }
}

2. Proses Rendering Ulang yang Berlebihan (Over-Rendering)

Mengeksekusi JavaScript sering kali memicu perubahan pada struktur tata letak web (DOM manipulation). Jika perubahan tersebut ditulis dengan tidak efisien, browser harus melakukan kalkulasi ulang posisi tata letak seluruh elemen web dari nol (Reflow & Repaint) secara berlebihan yang memakan waktu lama.

• Solusi: Hindari Pemaksaan Tata Letak Sinkron (Avoid Forced Synchronous Layouts). Pastikan Anda tidak melakukan operasi membaca ukuran elemen (seperti offsetWidth) segera setelah melakukan operasi menulis perubahan elemen (seperti style.width). Gabungkan operasi menulis dan membaca secara terpisah, atau manfaatkan fitur requestAnimationFrame untuk menjadwalkan pembaruan visual pada waktu yang tepat sebelum bingkai layar berikutnya digambar.

3. Penggunaan Library JavaScript Pihak Ketiga yang Tidak Terkendali

Widget eksternal seperti skrip pelacakan analitik iklan, kotak obrolan langsung (live chat), atau stiker media sosial yang disuntikkan langsung ke dalam website Anda sering kali mengeksekusi skrip berat pada thread utama browser tanpa memedulikan interaksi pengguna.

• Solusi: Tunda Pemuatan Skrip Non-Esensial. Gunakan atribut defer atau async saat memuat skrip pihak ketiga. Jika memungkinkan, gunakan platform Google Tag Manager untuk memicu pemuatan widget chat atau pelacak iklan hanya setelah halaman selesai dimuat sempurna (window.onload) atau saat pengguna mulai berinteraksi aktif dengan elemen web untuk pertama kalinya.

FAQ: Tanya Jawab Seputar Optimasi INP

Bagaimana cara mendeteksi dan mengukur skor INP website saya secara akurat? Anda dapat menggunakan tiga alat gratis yang disediakan oleh Google:

1. PageSpeed Insights: Memberikan laporan komprehensif mengenai data performa INP asli dari kunjungan riil pengguna di lapangan (field data) selama 28 hari terakhir.
2. Chrome DevTools (Tab Performance): Memungkinkan Anda merekam aktivitas interaksi secara lokal di laptop Anda, mendeteksi Long Tasks berwarna merah, serta melacak fungsi mana di dalam file JavaScript Anda yang menjadi penyebab utama pemblokiran thread utama.
3. Web Vitals Extension: Ekstensi browser Chrome resmi yang dapat menampilkan visualisasi status skor INP secara real-time di layar saat Anda sedang berinteraksi menguji coba navigasi website Anda.

Mengapa website saya memiliki skor INP yang baik di komputer desktop, namun buruk di ponsel pintar? Perangkat seluler (smartphone) memiliki spesifikasi prosesor CPU yang jauh lebih lemah dibandingkan komputer laptop atau desktop. Proses eksekusi kode JavaScript yang sama mungkin hanya membutuhkan waktu $10\text{ ms}$ di laptop Anda, namun bisa memakan waktu hingga $150\text{ ms}$ pada ponsel pintar kelas menengah ke bawah. Google mengutamakan penilaian performa berdasarkan perangkat seluler (Mobile-First Indexing), sehingga pengujian performa wajib dilakukan dengan mengaktifkan fitur simulasi perlambatan CPU (CPU Throttling $4\times$ atau $6\times$) di Chrome DevTools.

Apakah template tema WordPress yang berat dapat merusak skor INP? Ya, sangat sering terjadi. Tema WordPress yang sarat akan fitur visual dekoratif (seperti slider animasi, animasi transisi halaman yang kompleks, atau builder halaman visual yang menghasilkan struktur HTML yang terlampau dalam) biasanya memuat puluhan file JavaScript berat yang secara konstan memblokir thread utama browser. Untuk menjaga skor INP tetap hijau di WordPress, pilihlah tema yang minimalis dan super cepat seperti GeneratePress atau Astra, serta gunakan plugin optimasi cache kelas atas seperti WP Rocket yang memiliki fitur penundaan eksekusi JavaScript non-esensial (delay JavaScript execution).