Optimasi INP (Interaction to Next Paint) pada Portal Web B2B: Panduan Teknis & Arsitektur
Mulai Maret 2024, Google secara resmi menggantikan First Input Delay (FID) dengan Interaction to Next Paint (INP) sebagai salah satu pilar utama Core Web Vitals. Bagi portal enterprise dan katalog e-procurement B2B, pergeseran metrik ini membawa konsekuensi teknis yang substansial: jika FID hanya mengukur latensi interaksi pertama kali, INP mengevaluasi seluruh interaksi pengguna selama sesi aktif (klik, ketukan jari, input keyboard) dan mencatat latensi interaksi paling lambat.
Pada aplikasi B2B yang sarat komponen dinamis (tabel data multi-ribu baris, kalkulator harga berjenjang, dan form request for quotation multi-langkah), responsivitas visual yang lambat langsung menggagalkan transaksi vendor. Artikel ini mengupas anatomi latensi INP, metodologi profiling browser, serta arsitektur rekayasa front-end untuk menjaga skor INP di bawah 200 milidetik.
+-----------------------------------------------------------------------------------+
| ANATOMI TOTAL LATENSI INP (ms) |
+--------------------------+------------------------------+-------------------------+
| 1. INPUT DELAY | 2. PROCESSING TIME | 3. PRESENTATION DELAY|
| | | |
| User Action (Click/Key) | JavaScript Event Handlers | Recalculate Styles |
| -> Main thread antre | -> Mutasi State / React | -> Layout Reflow |
| -> Background tasks | -> Komputasi Logika | -> Paint & GPU Compositing
| | | |
| Target: < 50ms | Target: < 100ms | Target: < 50ms |
+--------------------------+------------------------------+-------------------------+
| TOTAL AMBANG BATAS GOOD INP: <= 200 ms |
+-----------------------------------------------------------------------------------+Tiga Komponen Utama Pembentuk Metrik INP #
Saat seorang purchasing officer menekan tombol "Filter Spesifikasi" pada katalog B2B, browser melewati tiga fase sekuensial sebelum frame visual berikutnya ditampilkan ke layar monitor:
- Input Delay: Durasi antara saat pengguna memicu aksi fisik (misal klik mouse) hingga browser mulai mengeksekusi callback event handler. Penyebab utama tingginya input delay adalah Long Tasks (> 50ms) yang sedang memblokir main thread browser, seperti parsing JSON berukuran besar atau rehidrasi hidrasi hidrolik komponen frontend.
- Processing Time: Waktu aktual yang dihabiskan untuk menjalankan callback event handler JavaScript, kalkulasi state diffing (pada framework reaktif seperti React atau Vue), dan pembaruan struktur DOM.
- Presentation Delay: Waktu yang dibutuhkan browser untuk menghitung ulang gaya (style recalculation), merestrukturisasi layout geometris (reflow), serta menggambar pixel baru dan mengirimkannya ke compositing buffer GPU (paint & composite).
[User Action] ---> (Input Delay) ---> [Event Handler JS] ---> (Presentation Delay) ---> [Next Visual Frame]
| | |
+--- Long Task Memblokir Thread +--- Komputasi Berat Synchronous +--- DOM Tree Terlalu Dalam (>1500)Diagnosis Long Tasks dengan Profiler Browser #
Untuk mendeteksi sumber kemacetan INP pada portal B2B, gunakan Chrome DevTools Performance panel yang dikombinasikan dengan library resmi web-vitals.
1. Pelacakan Telemetri Real-User Monitoring (RUM) #
Data lab sintesis (Lighthouse) tidak mencerminkan interaksi nyata karena bot Lighthouse tidak menjelajahi katalog interaktif. Implementasikan pelacak interaksi lapangan secara terisolasi:
import { onINP } from 'web-vitals/attribution';
onINP((metric) => {
const { attribution, value, rating } = metric;
if (rating !== 'good') {
const payload = {
metric: 'INP',
valueMs: Math.round(value),
rating: rating,
interactionTarget: attribution.interactionTarget,
interactionType: attribution.interactionType,
inputDelay: Math.round(attribution.inputDelay),
processingDuration: Math.round(attribution.processingDuration),
presentationDelay: Math.round(attribution.presentationDelay),
timestamp: new Date().toISOString()
};
// Kirim telemetri tanpa membebani main thread
navigator.sendBeacon('/api/telemetry/web-vitals', JSON.stringify(payload));
}
});Pola Arsitektur untuk Memangkas INP #
1. Dekomposisi Long Task Menggunakan scheduler.yield()
#
Dalam form kalkulator diskon volume B2B, kalkulasi matriks kuantitas sering kali memproses ribuan sel harga secara sinkron. Eksekusi ini memblokir rendering status tombol.
Gunakan API modern scheduler.yield() (atau fallback berbasis MessageChannel) untuk memecah tugas panjang menjadi micro-chunks yang memberikan jeda bagi browser untuk merender umpan balik visual:
// Utility pemecah beban kerja komputasi
export async function yieldToMainThread(): Promise<void> {
// @ts-ignore
if ('scheduler' in window && 'yield' in window.scheduler) {
// @ts-ignore
return window.scheduler.yield();
}
return new Promise((resolve) => {
const channel = new MessageChannel();
channel.port1.onmessage = () => resolve();
channel.port2.postMessage(null);
});
}
// Implementasi pada filtering katalog B2B
export async function filterKatalogProduk(items: ProdukItem[], kriteria: FilterKriteria) {
const hasil: ProdukItem[] = [];
let counter = 0;
for (const item of items) {
if (evaluasiKriteria(item, kriteria)) {
hasil.push(item);
}
counter++;
// Beri jeda ke main thread setiap 100 evaluasi
if (counter % 100 === 0) {
await yieldToMainThread();
}
}
return hasil;
}
2. Optimistic UI Updates dengan React useTransition
#
Ketika pengguna mengklik tombol penambahan item ke daftar Request for Quotation (RFQ), UI harus segera menampilkan status loading indicator atau perubahan angka badge keranjang sebelum proses validasi atau re-rendering tabel selesai:
import React, { useState, useTransition } from 'react';
export function TombolTambahRFQ({ skuId, onAdd }: { skuId: string; onAdd: (id: string) => Promise<void> }) {
const [isPending, startTransition] = useTransition();
const [isAdded, setIsAdded] = useState(false);
const handleClick = () => {
// 1. Pembaruan instan dengan prioritas tinggi (INP < 50ms)
setIsAdded(true);
// 2. Transisi prioritas rendah untuk kalkulasi berat dan sinkronisasi
startTransition(async () => {
await onAdd(skuId);
});
};
return (
<button
onClick={handleClick}
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
isAdded ? 'bg-emerald-600 text-white' : 'bg-primary text-white hover:bg-primary-hover'
}`}
aria-busy={isPending}
>
{isAdded ? 'Ditambahkan ke RFQ' : 'Tambah ke Penawaran'}
</button>
);
}3. Offloading Pemrosesan Data ke Web Worker #
Pemrosesan dokumen manifest pengiriman ekspor atau parsing CSV daftar pesanan 10.000 baris tidak boleh dieksekusi di main thread antarmuka. Pindahkan logika parsing data ke dedicated Web Worker:
// workers/csvParser.worker.ts
self.onmessage = (event: MessageEvent<{ rawCsv: string }>) => {
const { rawCsv } = event.data;
const parsedRows = parseHeavyB2BDocument(rawCsv);
self.postMessage({ status: 'complete', data: parsedRows });
};
// Hook integrasi di komponen portal
export function useDocumentProcessor() {
const processDocument = (rawCsv: string): Promise<any[]> => {
return new Promise((resolve, reject) => {
const worker = new Worker(new URL('./workers/csvParser.worker.ts', import.meta.url));
worker.onmessage = (e) => {
resolve(e.data.data);
worker.terminate();
};
worker.onerror = (err) => {
reject(err);
worker.terminate();
};
worker.postMessage({ rawCsv });
});
};
return { processDocument };
}Matriks Evaluasi Solusi Optimasi INP #
| Kategori Masalah | Gejala Klinis INP | Solusi Rekayasa | Dampak Penurunan Latensi |
|---|---|---|---|
| Heavy Filtering | Filter tabel 5.000 SKU membekukan klik | Virtualisasi list (@tanstack/react-virtual) |
480 ms -> 42 ms (-91%) |
| Form Auto-Calculation | Input field kuantitas macet saat diketik | Debounce + Web Worker thread | 320 ms -> 38 ms (-88%) |
| Drawer Modal Pembayaran | Animasi open drawer tersendat-sendat | CSS will-change + Render portal |
210 ms -> 28 ms (-86%) |
| DOM Tree Bloat | Node halaman > 3.500 elemen bersarang | Simplifikasi arsitektur layout CSS Grid | 390 ms -> 65 ms (-83%) |
Protokol Verifikasi dan Ambang Batas Kinerja #
Audit INP dilakukan menggunakan pengujian nyata 75th percentile (p75) dari dataset Chrome User Experience Report (CrUX):
+-------------------------------------------------------------+
| STATUS METRIK INP GOOGLE CRUX |
+-------------------+--------------------+--------------------+
| GOOD (HIJAU) | NEEDS IMPROVEMENT | POOR (MERAH) |
| <= 200 ms | 201 ms - 500 ms | > 500 ms |
+-------------------+--------------------+--------------------+PuluhLabs mengintegrasikan pengujian INP otomatis pada pipeline Continuous Integration (CI/CD) menggunakan Lighthouse User Flows. Interaksi simulasi pengisian form dan navigasi multi-tab secara ketat diwajibkan mempertahankan batas latensi di bawah 150 milidetik sebelum rilis produksi dideploy.