Digital Transformation
103 Early Hints
TL;DR: 103 Early Hints adalah status HTTP informasional yang dipakai server untuk mengirim petunjuk Link: preload sebelum response final 200 OK. Browser bisa mulai unduh CSS, font, atau JS kritis lebih awal, menghemat TTFB efektif 100 sampai 300 ms di koneksi global.
Apa itu 103 Early Hints?
103 Early Hints adalah respons HTTP informasional yang dikirim server lebih dulu, sebelum response akhir 200 OK. Tujuannya mengirimkan header Link: preload yang memberitahu browser aset apa saja yang akan dipakai halaman. Browser bisa langsung membuka koneksi dan menarik resource itu sambil menunggu server menyelesaikan render. Dukungan browser sudah Baseline luas sejak 2024, dan Chrome, Edge, Firefox, dan Safari sudah mengimplementasi spesifikasi RFC 8297.
Anda bisa membayangkan 103 sebagai pesan dari kasir kafe yang menyebut, "kopi Anda sedang dibuat, sambil menunggu silakan ambil sendok." Browser tidak perlu menunggu seluruh response selesai untuk mulai bekerja.
Cara Kerja Singkat
| Tahap | Yang terjadi |
|---|---|
| Request masuk | Browser mengirim GET ke origin |
| Server kirim 103 | Header Link: </main.css>; rel=preload; as=style dikirim lebih dulu |
| Browser mulai fetch | Aset di-preload paralel sambil server proses render |
| Server kirim 200 | Response final dengan HTML, browser sudah siap parse |
Implementasi di Next.js bisa pakai middleware atau platform edge yang mendukung, misalnya Vercel atau Cloudflare. Lihat panduan praktis di artikel pemasangan 103 Early Hints di Next.js.
Kenapa Penting?
Pengukuran TTFB dan LCP selama ini sangat dipengaruhi waktu server merender HTML. Tanpa Early Hints, browser pasif menunggu byte pertama HTML datang baru bisa parse dan menemukan resource yang perlu di-preload. Untuk situs Indonesia yang origin server-nya jauh dari user, jarak ini bisa menambah 200 sampai 400 ms idle. Berdasarkan praktik yang Vito Atmo pakai di proyek Atmo LMS, mengaktifkan 103 memangkas perceived load time sekitar 12 sampai 18 persen tanpa mengubah kode aplikasi.
Sumber resmi: HTTP 103 Early Hints di web.dev.
Pertanyaan Umum
Apakah 103 Early Hints sama dengan rel=preload biasa?
Tidak. Preload biasa ditemukan browser setelah HTML datang, sementara 103 dikirim sebelum HTML siap, jadi browser bisa mulai unduh lebih dulu.
Apakah semua hosting mendukung?
Belum semua. Vercel, Cloudflare, Fastly, dan Cloud Run sudah mendukung. Shared hosting tradisional umumnya belum.
Istilah Terkait