103 Early Hints

Penggunaan

Ketika server mengirim 103 Early Hints, klien menafsirkan header Link dan melakukan prefetch terhadap sumber daya yang ditentukan. Mekanisme ini paling berguna ketika server memerlukan waktu untuk memproses permintaan sebelum menyusun response akhir. Selama server bekerja, klien memanfaatkan waktu tersebut untuk memuat stylesheet, gambar, atau skrip yang dibutuhkan halaman akhir.

Catatan

Beberapa response 103 Early Hints dikirim terlebih dahulu sebelum response HTTP akhir.

Petunjuk bukanlah jaminan

Pada sistem mana pun yang mengandalkan prediksi, tingkat akurasinya bervariasi. Ketika server mengembalikan 103 Early Hints yang menyarankan klien mengambil sumber daya tertentu, saran tersebut didasarkan pada asumsi yang masuk akal. Hanya response HTTP akhir yang menyediakan header Link yang otoritatif.

Perbedaan antara petunjuk dan header akhir muncul dalam dua bentuk: response akhir membutuhkan sumber daya tambahan yang tidak disebutkan dalam petunjuk, atau sumber daya yang diambil berdasarkan early hints ternyata tidak diperlukan. Pada kasus kedua, klien melakukan pekerjaan ekstra tanpa manfaat, dan total waktu transaksi justru bertambah.

Operasi yang dilakukan berdasarkan early hints bersifat aman. Sebagai contoh, penggunaan metode GET tidak mengubah state server.

Dampak SEO

103 Early Hints adalah response informasional yang mendahului status code akhir. Crawler mesin pencari memproses response akhir, bukan response informasional perantara. Peningkatan performa dari early hints berlaku untuk browser, bukan untuk crawler. Status code ini aman digunakan dan tidak mengganggu cara Google memproses halaman.

Menggantikan server push

Mekanisme 103 Early Hints diposisikan untuk menggantikan mekanisme server push, sebagai bagian dari kerangka kerja resource hints yang menggunakan rel=preload, pada browser modern. Tidak seperti server push, 103 Early Hints tidak bergantung pada response akhir sebelum browser mulai mengambil sumber daya yang ditentukan.

Catatan

Demi alasan keamanan, browser membatasi penggunaan 103 Early Hints hanya pada koneksi HTTP/2 dan HTTP/3.

Contoh

Klien meminta sebuah berkas index.html, dan server mengembalikan tiga petunjuk mengenai sumber daya yang kemungkinan dibutuhkan. Berkas yang diminta belum ada dalam body pesan karena server masih menghasilkan response. Klien mulai memuat sumber daya yang ditentukan oleh setiap direktif Link.

Setelah jeda singkat, server mengembalikan response 200 akhir, beserta direktif Link resmi dan index.html di dalam body pesan. Perhatikan perbedaan antara early hints dan daftar sumber daya akhir.

Permintaan

GET /index.html HTTP/1.1
Host: example.com

Response

HTTP/1.1 103 Early Hints
Link: </style.css>; rel=preload; as=style
Link: </images/logo.svg>; rel=preload; as=image
Link: </videos/instructions_simple.mp4>; rel=preload; as=video

<there is a short pause in the transmission>

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 100
Link: </style.css>; rel=preload; as=style
Link: </images/logo.svg>; rel=preload; as=image
Link: </images/pro_badge.svg>; rel=preload; as=image
Link: </videos/instructions_advanced.mp4>; rel=preload; as=video

<message body will follow>

Sumber daya early hint pertama, style.css, diambil dan diproses oleh klien, bersama gambar logo dan video instructions_simple.mp4. Baik stylesheet maupun logo dapat langsung digunakan apa adanya. Gambar pro_badge pada response akhir tidak muncul dalam petunjuk, sehingga klien baru mengambil sumber daya tersebut setelah menerima response akhir.

Video instructions_advanced.mp4 pada header Link akhir berbeda dari early hint. Server menyarankan instructions_simple.mp4 melalui early hints, tetapi pengambilan itu tidak diperlukan. Video yang baru ditentukan tetap harus diambil dan diproses sebelum index.html dirender sepenuhnya, yang kemungkinan menambah waktu muat karena dua video diambil alih-alih satu.

Referensi kode

.NET

HttpStatusCode.EarlyHints

Rust

http::StatusCode::EARLY_HINTS

Rails

:early_hints

http.StatusEarlyHints

Symfony

Response::HTTP_EARLY_HINTS

Python3.9+

http.HTTPStatus.EARLY_HINTS

Apache HttpComponents Core

org.apache.hc.core5.http.HttpStatus.SC_EARLY_HINTS

Angular

@angular/common/http/HttpStatusCode.EarlyHints