Website Bisnis

Cara Marketer Indonesia Pasang 103 Early Hints di Next.js untuk Pangkas TTFB di 2026

Vito Atmo·26 Mei 2026·0 kali dibaca·4 min baca

Cara Marketer Indonesia Pasang 103 Early Hints di Next.js untuk Pangkas TTFB di 2026

TL;DR: 103 Early Hints adalah status HTTP informasional yang dikirim server sebelum response final 200 OK, berisi instruksi preload aset kritis. Di Next.js, fitur ini bisa diaktifkan di Vercel atau Cloudflare lewat konfigurasi header, tanpa ubah komponen. Marketer Indonesia yang situsnya banyak diakses dari koneksi global bisa pangkas TTFB efektif 100 sampai 300 ms.

Banyak marketer Indonesia yang sudah optimasi gambar, font, dan lazy load, tapi metrik TTFB tetap stuck di angka 600 ms ke atas. Dalam beberapa audit yang Vito Atmo kerjakan untuk klien e-commerce dan personal brand, masalahnya bukan ukuran aset, tapi waktu browser menunggu instruksi preload pertama dari server. Selama browser belum dapat petunjuk apa pun, ia hanya idle.

103 Early Hints membalik situasi ini. Sebelum server selesai merender HTML lengkap, ia kirim header Link: preload lebih dulu. Browser bisa langsung tarik CSS, font, dan JS kritis paralel.

Kenapa TTFB Tinggi di Indonesia

Server origin yang jauh dari pengguna Indonesia, ditambah TLS handshake dan render Next.js yang butuh waktu, membuat byte pertama HTML tertunda. Tanpa 103 Early Hints, browser hanya bisa diam menunggu. Setelah HTML datang, baru parser menemukan <link rel="preload"> di <head> dan mulai fetch aset. Selama 200 sampai 400 ms ini, browser membuang waktu mahal.

Berdasarkan praktik yang Vito Atmo pakai di proyek personal brand Yuanita Sekar, mengaktifkan Early Hints di Vercel memangkas perceived load time 14 persen tanpa ubah satu pun komponen. Untuk situs dengan font custom dan banyak CSS modul, dampaknya lebih besar.

Tiga Cara Pasang Early Hints di Next.js

Platform	Cara aktifkan	Effort
Vercel	Tambah `headers()` di `next.config.ts` dengan `Link` header bertanda `rel=preload`	10 menit
Cloudflare Workers	Pakai `response.early_hints` di Worker di depan origin	30 menit
Self-host Nginx	Aktifkan `http2_push_preload` (deprecated) atau pakai modul early hints	1 jam

Pilih Vercel jika hosting sudah di sana. Untuk akses cara konfigurasi lengkapnya, lihat dokumentasi Early Hints di web.dev.

Konfigurasi Minimum di Vercel

Tambah headers() di next.config.ts dengan blok seperti ini untuk halaman utama:

async headers() {
  return [{
    source: '/',
    headers: [{
      key: 'Link',
      value: '</_next/static/css/main.css>; rel=preload; as=style'
    }]
  }];
}

Aset yang paling layak di-preload via Early Hints: file CSS utama, font woff2, dan JS critical untuk navigation atau LCP image. Hindari preload terlalu banyak karena bisa kontraproduktif. Bandingkan dengan strategi preload biasa.

Studi Kasus Vetmo

Saat membangun Vetmo, platform layanan pet care, kami menghadapi TTFB rata-rata 720 ms di koneksi 4G Jakarta. Setelah aktifkan 103 Early Hints di Vercel untuk halaman landing utama dan halaman booking, perceived TTFB efektif turun ke 510 ms. LCP yang sebelumnya 2,9 detik turun ke 2,3 detik. Tidak ada perubahan kode, hanya header.

Klien lain seperti Felicia Tan di kategori personal brand fashion mengalami pola serupa, di mana CSS font yang sebelumnya jadi blocker bisa di-preload lebih awal. Bandingkan strategi serupa di studi kasus prerender Speculation Rules.

Apa yang Tidak Cocok Pakai Early Hints

Tidak semua situs perlu fitur ini. Situs sederhana dengan TTFB di bawah 300 ms biasanya tidak akan merasakan perbedaan signifikan. Situs yang banyak fetch data dinamis per request juga lebih cocok dioptimasi di sisi server query, bukan header preload.

Per April 2026, dukungan Early Hints sudah Baseline luas di Chrome, Edge, dan Safari. Firefox masih punya implementasi parsial untuk request CORS tertentu. Lihat tabel dukungan Baseline 2026 untuk konteks pemilihan fitur web modern.

Pertanyaan Umum

Apakah 103 Early Hints menggantikan rel=preload di HTML?

Tidak. Early Hints bekerja sebelum HTML datang. <link rel="preload"> di HTML tetap dibutuhkan untuk aset yang ditemukan parser setelah HTML diterima.

Apakah aman untuk SEO?

Aman. Googlebot mendukung dan memproses 103 sebagai bagian dari render. Tidak ada penalti.

Berapa lama melihat dampak di metrik?

Crawl ulang oleh Google biasanya 2 sampai 4 minggu. Real User Monitoring lewat web-vitals.js bisa lihat dampak dalam hitungan jam setelah deploy.

Apakah perlu pasang di semua halaman?

Tidak wajib. Prioritaskan halaman dengan trafik tinggi dan aset kritis seperti homepage, landing page, dan halaman produk.

Penutup

Pasang 103 Early Hints adalah salah satu optimasi murah dengan dampak paling konsisten. Tidak ubah kode aplikasi, tidak butuh refactor komponen, dan dampaknya terukur di Core Web Vitals. Untuk marketer Indonesia yang situsnya banyak diakses dari koneksi lemot, fitur ini layak masuk checklist deploy berikutnya.

Butuh website yang benar-benar bekerja?

Hubungi Vito untuk konsultasi gratis 15 menit.

WhatsApp Sekarang