Cara Teknis Memperbaiki Masalah INP pada Website Next.js

Cara Teknis Memperbaiki Masalah INP pada Website Next.js

Metrik Interaction to Next Paint (INP) adalah tolok ukur daya tanggap antarmuka pengguna secara keseluruhan. Pada aplikasi berbasis React dan Next.js, angka INP sering kali membengkak akibat eksekusi tugas JavaScript berdurasi panjang (long tasks > 50ms) yang mengunci main thread browser.

Sebagai Tactical Guide, panduan praktis ini memberikan solusinya secara teknis untuk melengkapi analisa skor Core Web Vitals 100/100 (Tier 2) dan menginduk pada panduan arsitektur website Next.js 2026 (Tier 1).

1. Pemisahan Kode Interaktif dengan next/dynamic

Hindari memuat library berat pada saat initial render. Gunakan pemisahan kode (code splitting) agar komponen modal atau widget pihak ketiga hanya diunduh saat dibutuhkan:

import dynamic from 'next/dynamic';

const DynamicSpeedModal = dynamic(() => import('@/components/SpeedTestModal'), {

loading: () => <p className="text-xs text-[#c9a96e]">Memuat Modal...</p>,

ssr: false,

});

2. Memecah Eksekusi JavaScript Menggunakan startTransition

Gunakan React useTransition untuk menandai pembaruan state yang non-urgent agar input pengguna (seperti mengetik di bar pencarian) tetap terasa halus dan responsif seketika:

import { useState, useTransition } from 'react';

export function InstantSearchFilter() {

const [isPending, startTransition] = useTransition();

const [searchTerm, setSearchTerm] = useState('');

const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {

const value = e.target.value;

setSearchTerm(value);

startTransition(() => {

performHeavyFilter(value);

});

};

return <input type="text" onChange={handleSearch} placeholder="Cari artikel..." />;

}

Gambar 3.1: Skema Pemisahan Tugas Eksekusi JavaScript di Main-Thread Browser.

3. Pengaliran Tautan Silo (Internal Link Juice ke Tier 2 & Tier 1)

Sesuai dengan hierarki arsitektur Silo: