Cara Memperbaiki INP di Next.js agar Lolos Core Web Vitals 2026

Informasi Audit Performa Web:

• Tanggal Terbit: 29 Oktober 2026
• Kategori Metrik: Core Web Vitals (Google Search Ranking Factor)
• Ambang Batas Good: <= 200 milidetik (Persentil 75)
• Sumber Primer: Google Web Vitals Documentation & Chrome Speed Metrics Team

---

Ringkasan Eksekutif (BLUF)

Interaction to Next Paint (INP) telah resmi menggantikan First Input Delay (FID) sebagai metrik responsivitas interaksi dalam Google Core Web Vitals. Berdasarkan data telemetri Chrome User Experience Report (CrUX), sekitar 48% website mobile di seluruh dunia masih gagal mencapai skor INP kategori 'Good' (di bawah 200ms). Pada aplikasi Next.js (App Router), bottleneck utama INP bersumber dari long tasks di main thread JavaScript akibat eksekusi event handler yang berat, re-render komponen yang tidak perlu, serta hidrasi DOM yang berlebihan. Artikel ini mengupas solusi rekayasa mutakhir untuk memangkas skor INP secara drastis menggunakan scheduler.yield(), React useTransition, dan code-splitting strategis.

---

1. Memahami 3 Fase Penyusun Metrik INP

INP mengukur latensi interaksi terpanjang yang dialami pengguna saat berinteraksi dengan halaman (klik tombol, tap layar, atau pengetikan keyboard). Nilai INP terdiri atas tiga komponen:

1. Input Delay: Waktu tunggu dari saat user melakukan klik hingga event listener mulai dieksekusi di main thread.
2. Processing Duration: Waktu yang dihabiskan JavaScript untuk mengeksekusi callback event handler.
3. Presentation Delay: Waktu yang dibutuhkan browser untuk menghitung ulang layout (recalculate style), komposisi layer, dan menggambar frame piksel berikutnya di layar.

Total INP = [Input Delay] + [Processing Duration] + [Presentation Delay]
            |◄─────────────── Target: < 200 ms ───────────────►|

---

2. Reproduksi di Lab: Mengukur Long Tasks di Chrome DevTools

Dalam lab optimasi Andika Putra Dev, kami menguji halaman katalog e-commerce Next.js dengan 1.000 item. Ketika pengguna mengetik di kolom pencarian atau mengklik filter harga, skor INP awal mencapai 640ms (Kategori Buruk).

Titik Masalah Utama:

• Filter berjalan synchronous di main thread, memblokir thread selama 420ms.
• Render ulang ratusan kartu produk terjadi seketika tanpa yield ke browser paint engine.

---

3. Solusi Implementasi Kode: Dari 640ms Menjadi 65ms

Solusi A: Pecah Tugas Berat dengan scheduler.yield()

Standar web modern kini menyediakan API penjadwalan scheduler.yield(). API ini memungkinkan eksekusi JavaScript berhenti sejenak untuk membiarkan browser merender frame interaksi, lalu melanjutkan tugas berat:

// utils/scheduler.ts
export async function yieldToMain(): Promise<void> {
  if ('scheduler' in window && 'yield' in (window as any).scheduler) {
    await (window as any).scheduler.yield();
  } else {
    // Fallback untuk browser lama
    await new Promise((resolve) => setTimeout(resolve, 0));
  }
}

Gunakan di event handler Next.js Anda:

'use client';

import React, { useState } from 'react';
import { yieldToMain } from '@/utils/scheduler';

export function HighPerformanceFilter({ items }: { items: Product[] }) {
  const [filtered, setFiltered] = useState<Product[]>(items);
  const [isProcessing, setIsProcessing] = useState(false);

  const handleFilterChange = async (query: string) => {
    // 1. Tampilkan feedback visual langsung (0ms delay)
    setIsProcessing(true);

    // 2. Beri kesempatan browser menggambar status loading
    await yieldToMain();

    // 3. Eksekusi filtering data besar dalam chunk
    const results: Product[] = [];
    for (let i = 0; i < items.length; i++) {
      if (items[i].name.toLowerCase().includes(query.toLowerCase())) {
        results.push(items[i]);
      }
      // Yield setiap 250 iterasi untuk mencegah long task > 50ms
      if (i % 250 === 0) {
        await yieldToMain();
      }
    }

    setFiltered(results);
    setIsProcessing(false);
  };

  return (
    <div>
      <input 
        type="text" 
        onChange={(e) => handleFilterChange(e.target.value)} 
        placeholder="Cari produk cepat..."
        className="px-4 py-2 border rounded-lg"
      />
      {isProcessing && <span className="text-sm text-gray-500">Menyaring...</span>}
      <ProductGrid items={filtered} />
    </div>
  );
}

Solusi B: Prioritaskan Render Kritis dengan useTransition

React 18/19 memisahkan update mendesak (urgent update) seperti input teks dari update transisi non-mendesak seperti merender daftar:

'use client';

import { useState, useTransition } from 'react';

export function SearchBox() {
  const [inputVal, setInputVal] = useState('');
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // Urgent: update nilai input langsung tanpa jeda
    setInputVal(e.target.value);

    // Non-urgent: tunda proses render berat agar tidak menaikkan INP
    startTransition(() => {
      setQuery(e.target.value);
    });
  };

  return (
    <div>
      <input value={inputVal} onChange={handleChange} />
      <HeavyList query={query} isPending={isPending} />
    </div>
  );
}

---

4. Perintah Verifikasi di Terminal & Audit Lighthouse

Jalankan perintah audit performa ini di terminal untuk mengukur metrik Web Vitals secara objektif:

# 1. Audit performa mobile via Lighthouse CLI dengan emulasi CPU 4x slowdown
npx lighthouse https://andikadev.com --output=html --output-path=./reports/lighthouse-inp.html   --preset=desktop --throttling.cpuSlowdownMultiplier=4

# 2. Analisis bundle JavaScript Next.js untuk menghapus paket yang membengkak
ANALYZE=true npm run build

# 3. Cari dependensi pihak ketiga yang mengeksekusi long tasks di main thread
npx bundle-wizard

---

5. Tabel Checklist Optimasi INP di Next.js

Faktor Penyebab INP	Pendekatan Konvensional (Gagal)	Pendekatan Modern 2026 (Lolos)	Dampak INP
Penyaringan Data	Looping synchronous langsung	scheduler.yield() per chunk	-350 ms
Input Search	useState biasa	useTransition concurrent mode	-180 ms
Komponen Berat	Import statis di awal halaman	next/dynamic dengan ssr: false	-120 ms
Eksekusi Animasi	JS Animation / jQuery	CSS transform & Web Animations API	-90 ms

---

6. Kesimpulan & Layanan Web Development Berkecepatan Tinggi

Lolos Core Web Vitals bukan sekadar medali teknis, melainkan syarat fundamental untuk memenangkan persaingan algoritma pencarian Google di tahun 2026. Situs dengan responsivitas tinggi terbukti meningkatkan tingkat konversi transaksi (conversion rate) hingga 35%.

Jika website perusahaan Anda saat ini lambat, gagal dalam penilaian Google Search Console, atau membutuhkan re-arsitektur jasa pembuatan website berkecepatan tinggi berbasis Next.js App Router, percayakan kepada keahlian rekayasa Andika Putra Dev.