Early Hints (HTTP 103): Cara Website Bisnis Indonesia Memangkas LCP dengan Trik Server Lama yang Baru Populer

TL;DR: Early Hints adalah status HTTP 103 yang memajukan momen browser tahu aset kritis, sehingga LCP turun tanpa mengubah satu baris pun di komponen halaman. Saat dipasang lewat Cloudflare atau Vercel di proyek Next.js, perbaikan empiris berkisar 15-30% pada halaman dengan TTFB di atas 200 ms. Cocok untuk e-commerce, landing page kampanye, dan halaman product detail dengan hero image besar.

Banyak tim sudah mencoba semua trik populer untuk LCP: kompresi image, fetchpriority="high", font preload, sampai migrasi ke edge runtime. Lalu mentok di angka 2,7 detik karena server butuh waktu generate HTML dari database. Jeda inilah yang sebenarnya bisa dipakai browser untuk mulai mengunduh aset, asal server mau memberi sinyal lebih awal.

Itu yang dilakukan Early Hints. Konsepnya bukan baru. RFC 8297 sudah ada sejak 2017. Yang berubah di 2026 adalah dukungan CDN dan framework yang akhirnya matang.

Masalah yang Diselesaikan Early Hints

Ketika halaman dinamis dipanggil, urutan kerja standarnya: server terima request, query database, render template, kirim HTML. Browser baru tahu CSS dan font apa yang perlu diunduh setelah HTML pertama tiba. Untuk halaman e-commerce kompleks, jeda generate HTML bisa 200-500 ms. Selama itu browser idle.

Early Hints memutus pola itu. Sebelum response final 200 OK, server kirim status 103 berisi header Link yang berisi resource hint preload dan preconnect. Browser mulai bekerja paralel dengan server, sehingga saat HTML datang, font, CSS, dan LCP image sudah ada di memory cache.

Cara Kerja: Anatomi Response 103

Browser membaca header Link dari 103 dan mulai unduh. Saat HTML 200 datang, request untuk aset itu sudah selesai atau hampir selesai. LCP image biasanya yang paling diuntungkan karena urutan kritisnya paling panjang.

Implementasi di Next.js 15 + Vercel

Vercel mendukung Early Hints lewat unstable_after dan response streaming. Pola yang saya pakai di proyek terakhir, sebuah landing page kampanye untuk klien personal branding Yuanita Sekar, kira-kira begini:

1. Identifikasi 3-5 aset paling kritis untuk LCP halaman.
2. Pasang fetchpriority="high" di image LCP utama.
3. Aktifkan Early Hints di edge config dengan header Link yang mereferensikan aset itu.
4. Verifikasi di Chrome DevTools tab Network, kolom "Initiator" menunjukkan early-hints untuk aset yang ditarget.

Untuk halaman katalog Atmo (LMS), pendekatan ini menurunkan LCP p75 dari sekitar 2,9 detik ke 2,1 detik tanpa mengubah komponen React. Angka ini diukur lewat RUM dengan sampling konservatif selama 14 hari.

Studi Kasus: Vetmo Halaman Product Detail

Vetmo adalah platform pet care yang halaman product detail-nya berat karena hero image, gallery 6 thumbnail, dan font custom. Sebelum Early Hints, LCP p75 di 3,2 detik. Setelah:

Yang menarik, TTFB sama persis. Server tidak jadi lebih cepat. Browser saja yang lebih sibuk selama jeda yang biasanya idle. Pola ini sangat cocok untuk situs Indonesia yang banyak diakses dari koneksi 4G dengan latensi 60-100 ms ke origin.

Pertanyaan Umum

Apakah Early Hints bekerja di semua browser?

Chrome, Edge, dan Firefox mendukung sejak 2022. Safari belum stabil per April 2026. Karena itu, Early Hints harus dianggap progressive enhancement, bukan pengganti optimasi LCP standar.

Apakah CDN saya mendukung?

Cloudflare, Fastly, Akamai, dan Vercel sudah mendukung. Untuk self-hosted, pastikan reverse proxy (Nginx 1.25+ atau Caddy) menjalankan HTTP/2 atau HTTP/3 dengan dukungan 1xx response.

Berapa banyak aset yang dianjurkan di header Link?

Maksimal 3-5 aset paling kritis. Lebih dari itu, browser bisa kebanjiran request paralel dan justru memperlambat halaman.

Apakah Early Hints mengganggu caching?

Tidak. Early Hints bekerja di lapisan response sebelum HTML, terpisah dari caching strategy seperti stale-while-revalidate yang berjalan di lapisan cache.

Bagaimana cara mengukur dampak?

Pakai RUM tools yang membaca PerformanceObserver event early-hints dan korelasikan dengan metrik LCP. Field data dari CrUX juga akan menunjukkan pergeseran p75 setelah 28 hari rolling.

Penutup: Trik Lama, Manfaat Baru

Early Hints bukan magic bullet. Tidak akan menyelamatkan halaman dengan TTFB 1,5 detik karena query database lambat. Tapi untuk halaman yang sudah cukup terstruktur dengan TTFB 200-400 ms, ini cara paling murah memangkas LCP tanpa mengubah arsitektur. Per April 2026, dukungan tooling sudah cukup matang untuk dipasang di production tanpa risiko.

Yang perlu disiapkan tim: identifikasi aset LCP per halaman, monitor RUM, dan iterasi tiap 2-3 minggu. Tidak ada konfigurasi yang one-size-fits-all karena profil aset berbeda di tiap halaman.