HTTP 103 Early Hints: Cara Mempercepat Pemuatan Aset Website

Ketika pengunjung membuka halaman website, browser biasanya harus menunggu server menyiapkan respons HTML sebelum mengetahui stylesheet, font, atau skrip penting yang perlu diunduh. Jika server membutuhkan waktu untuk menjalankan kueri database atau merender halaman, koneksi bisa menunggu tanpa banyak pekerjaan. HTTP 103 Early Hints membantu mengurangi jeda ini dengan mengirimkan petunjuk awal saat respons utama masih diproses.

Teknik ini bukan jalan pintas untuk semua website dan tidak menggantikan optimasi gambar, cache, atau CDN. Manfaatnya paling terasa ketika server memerlukan waktu untuk menghasilkan HTML, tetapi beberapa aset penting sudah dapat diprediksi.

Apa Itu HTTP 103 Early Hints?

HTTP 103 adalah respons informasional yang dapat dikirim sebelum respons final, misalnya 200 OK. Respons 103 dapat memuat header Link yang memberi tahu browser sumber daya atau origin mana yang kemungkinan dibutuhkan. Browser yang mendukungnya dapat mulai menyiapkan koneksi atau mengambil aset tersebut selagi server menyelesaikan halaman.

Spesifikasi ini dijelaskan dalam RFC 8297. Berbeda dari respons final, respons 103 bukan isi halaman dan tidak berarti permintaan sudah selesai. Server tetap harus mengirim respons akhir yang berisi status sebenarnya serta HTML atau konten yang diminta.

Bagaimana Alur Kerjanya?

1. Browser meminta halaman, misalnya /artikel/.
2. Server mulai menyiapkan HTML. Proses ini bisa mencakup pemanggilan database, autentikasi, atau rendering dinamis.
3. Sebelum HTML siap, server mengirim respons 103 Early Hints berisi petunjuk untuk aset yang diperkirakan penting.
4. Browser yang mendukung fitur ini dapat memulai koneksi atau pengunduhan lebih awal.
5. Server mengirim respons final, seperti 200 OK, beserta HTML. Browser kemudian menggunakan aset yang sudah diambil jika cocok dan masih tersedia di cache.

Contoh sederhana bentuk header yang dapat dikirim sebagai petunjuk awal:

HTTP/1.1 103 Early Hints
Link: </assets/main.css>; rel=preload; as=style
Link: <https://fonts.example.net>; rel=preconnect; crossorigin

Contoh tersebut bersifat ilustratif. URL aset, jenis sumber daya, serta dukungan server dan browser harus disesuaikan dengan website yang sebenarnya. Respons final tetap perlu menyertakan referensi aset yang benar, dan konfigurasi preload harus cocok dengan cara aset digunakan di halaman.

Kapan Early Hints Layak Digunakan?

Mulailah dari halaman yang menjadi pintu masuk utama pengunjung, seperti beranda, halaman artikel populer, atau halaman produk. Cari halaman dengan waktu tunggu respons awal yang cukup panjang dan aset kritis yang dapat diketahui sebelum HTML selesai dibuat.

• Stylesheet utama: CSS yang diperlukan untuk menampilkan bagian awal halaman.
• Font penting: font yang benar-benar dipakai pada teks utama, dengan atribut lintas-origin yang sesuai bila diperlukan.
• Koneksi ke origin penting: preconnect dapat membantu menyiapkan koneksi ke origin aset pihak ketiga yang memang diperlukan segera.
• Skrip kritis: hanya jika skrip tersebut memang dibutuhkan sejak awal dan pemuatan awalnya telah diuji dengan cermat.

Jangan mengirim petunjuk untuk setiap aset. Terlalu banyak preload dapat bersaing dengan sumber daya yang lebih penting, memakai bandwidth secara sia-sia, dan justru memperlambat tampilan halaman.

Langkah Implementasi yang Aman

1. Ukur kondisi awal. Catat waktu respons server, Largest Contentful Paint (LCP), dan waterfall jaringan pada halaman sasaran sebelum mengubah konfigurasi.
2. Identifikasi aset yang stabil. Pilih sumber daya yang hampir selalu dibutuhkan pada halaman tersebut. Aset dengan nama versi yang sering berubah berisiko membuat petunjuk awal tidak cocok dengan HTML final.
3. Periksa dukungan platform. Pastikan server, reverse proxy, atau CDN benar-benar dapat mengirim respons 103. Dukungan dan perilaku fitur berbeda antarplatform; jangan menganggap menambahkan header biasa otomatis menghasilkan respons 103.
4. Konfigurasikan secara bertahap. Mulai dengan satu atau dua aset kritis, lalu pastikan URL, tipe as, dan atribut seperti crossorigin sesuai kebutuhan.
5. Pertahankan petunjuk pada respons final. Untuk kompatibilitas, header Link yang relevan tetap dapat disertakan pada respons final sehingga browser yang tidak memanfaatkan Early Hints tetap mendapat petunjuk.
6. Uji hasilnya. Bandingkan pengukuran pada kondisi jaringan dan cache yang sebanding. Periksa tab Network di DevTools, respons awal, serta apakah aset diunduh satu kali atau justru berulang.

Risiko dan Batasan yang Perlu Dipahami

Early Hints bekerja berdasarkan perkiraan. Jika server memberi petunjuk untuk aset yang akhirnya tidak digunakan, browser mungkin mengunduh sesuatu yang tidak diperlukan. Jika URL pada petunjuk berbeda dari URL di HTML, unduhan awal juga bisa terbuang. Pengalihan lintas-origin pada respons final dan perbedaan dukungan browser dapat mengurangi manfaatnya.

Fitur ini juga tidak memperbaiki sumber masalah seperti server yang terlalu lambat, gambar yang berukuran besar, JavaScript berlebihan, atau cache yang buruk. Untuk halaman yang HTML-nya sudah dikirim sangat cepat, petunjuk preload atau preconnect biasa pada respons final mungkin sudah memadai.

Untuk pemilik website WordPress, periksa dahulu apakah hosting atau CDN menyediakan dukungan Early Hints dan apakah fitur tersebut dapat diaktifkan dari panel pengelolaan. Hindari memasang potongan kode acak yang mengaku mengaktifkan status 103 tanpa memastikan lapisan server yang menangani respons mendukungnya.

Cara Menilai Apakah Ada Manfaatnya

Uji halaman yang sama sebelum dan sesudah konfigurasi, idealnya dengan beberapa pengulangan. Perhatikan LCP, waktu respons awal, urutan pengunduhan stylesheet atau font, serta apakah jumlah byte yang ditransfer meningkat. Jangan hanya mengandalkan satu skor Lighthouse: gunakan juga data lapangan bila tersedia, karena hasil dapat berbeda menurut perangkat, cache, dan kualitas jaringan.

Dokumentasi Chrome for Developers tentang Early Hints menjelaskan alur, pertimbangan pemilihan aset, dan keterbatasan implementasi browser. Gunakan dokumentasi server atau CDN yang dipakai untuk memastikan konfigurasi yang tepat.

Kesimpulan

HTTP 103 Early Hints memberi browser kesempatan memulai pekerjaan jaringan sebelum HTML final siap. Teknik ini dapat membantu halaman dinamis yang memiliki waktu pemrosesan server cukup lama, terutama bila aset kritisnya stabil dan mudah diprediksi. Namun, hasil terbaik datang dari implementasi terukur: pilih sedikit aset yang benar-benar penting, verifikasi dukungan platform, hindari unduhan ganda, lalu bandingkan metrik sebelum dan sesudah. Jika server sudah merespons cepat, optimasi cache, gambar, CSS, dan JavaScript mungkin memberikan dampak yang lebih besar.