103 Petunjuk Awal: Apa Itu dan Bagaimana Menerapkannya

Diterbitkan: 2022-07-16

103 Early Hints adalah kode status HTTP baru yang membantu browser memutuskan konten apa yang akan dimuat sebelumnya bahkan sebelum halaman mulai tiba.

Setelah pertama kali disebutkan oleh Cloudflare pada akhir tahun lalu, kini Google secara resmi mengumumkan bahwa Early Hints tersedia di Chrome versi 103 dengan dukungan untuk preload dan preconnect untuk memulai:

Tweet petunjuk awal

Di baris berikut, Anda akan mempelajari apa sebenarnya Petunjuk Awal dan bagaimana Anda dapat menerapkannya di situs web Anda untuk meningkatkan kinerja.

Tetapi sebelum itu, kita akan melalui tinjauan singkat tentang cara kerja browser dan mengapa ada kebutuhan untuk Petunjuk Awal.

Singkatnya: Browser, Server, dan Server Think-Time

Agar Anda dapat memuat halaman ini (atau halaman lain mana pun) dan membaca kontennya, browser Anda memerlukan petunjuk tentang apa yang harus dirender dan sumber daya apa (seperti gambar, font, file JavaScript) yang perlu diambil untuk menyelesaikan lukisannya.

Pada dasarnya, browser Anda mengirim permintaan ke server, dan instruksi apa yang harus dimuat berasal dari respons server.

Sayangnya, mungkin ada latensi beberapa ratus milidetik hingga server mengumpulkan semua sumber daya yang diperlukan untuk mengompilasi seluruh halaman web dan mengirimkannya kembali ke browser.

Periode ini dikenal sebagai “waktu berpikir server”.

Selama waktu berpikir server ini, browser hanya duduk di sana dan menunggu tanpa menampilkan konten apa pun. Dan saya yakin kita bisa sepakat bahwa tidak ada yang mau menatap layar kosong.

Di situlah Petunjuk Awal berperan.

Apa itu Petunjuk Awal?

Salah satu cara untuk meningkatkan kinerja halaman adalah dengan menggunakan petunjuk sumber daya. Seperti namanya, mereka memberi browser "petunjuk" tentang sumber daya apa yang mungkin diperlukan nanti — misalnya, memuat file tertentu atau menghubungkan ke server yang berbeda.

Jika Anda tertarik dengan topik tersebut dan ingin mempelajari lebih lanjut, lihat artikel kami tentang petunjuk sumber daya dan penerapannya.

Sehebat kedengarannya menggunakan petunjuk sumber daya, ada masalah. Agar browser dapat menindaklanjutinya, server harus mengirim setidaknya sebagian halaman.

Masukkan Petunjuk Awal.

Petunjuk Awal memanfaatkan "waktu berpikir server" untuk mengirim instruksi secara asinkron ke browser untuk mulai memuat sub-sumber daya penting (seperti lembar gaya, file JavaScript penting, dll.) atau membuat koneksi dengan asal yang mungkin digunakan pada halaman saat server mengkompilasi respons penuh.

Tanpa petunjuk awal
Tanpa Petunjuk Awal

Dalam istilah yang lebih sederhana:

Dengan Petunjuk Awal diaktifkan, server mengirimkan dua tanggapan: yang pertama (kode status Petunjuk Awal HTTP 103) untuk menginstruksikan browser tentang apa yang dapat segera mulai memuat, dan yang kedua (kode status HTTP 200) adalah tanggapan lengkap dengan sisanya informasi.

Dengan petunjuk awal
Dengan Petunjuk Awal diaktifkan


Dengan mengirimkan petunjuk ini ke browser sebelum respons lengkap dikompilasi, browser dapat mengetahui apa yang perlu dilakukan untuk memuat halaman web lebih cepat bagi pengguna.

Hasil akhirnya:

Waktu muat halaman lebih cepat dan latensi yang dirasakan pengguna berkurang.

Jika Anda mencari penjelasan yang lebih formal, Cloudflare melakukan pekerjaan yang baik dengan menyediakannya:

“Secara formal, Petunjuk Awal adalah standar web yang mendefinisikan kode status HTTP baru (103 Petunjuk Awal) yang mendefinisikan interaksi baru antara klien dan server. 103 disajikan kepada klien sementara respons 200 OK (atau kesalahan) disiapkan, yang merupakan "waktu berpikir server".


Menerapkan Petunjuk Awal di Situs Web Anda

Anda harus mengambil beberapa langkah untuk menerapkan Petunjuk Awal di situs web Anda dengan sukses.

Langkah 0: Pertimbangkan untuk menggunakan link rel=preload atau link rel=preconnect alih-alih Petunjuk Awal

Ini adalah langkah 0 karena jika server Anda dapat segera mengirim 200 respons, menambahkan Petunjuk Awal tidak ada gunanya . Sebagai gantinya, jika Anda ingin mempercepat respons 200, bahkan lebih, Anda dapat memanfaatkan tautan rel=preload atau tautan rel=preconnect petunjuk sumber daya.

Cara termudah untuk menentukan seberapa cepat server Anda mengirim 200 respons adalah dengan menggunakan alat pengujian kinerja KeyCDN. Yang harus Anda lakukan adalah memasukkan URL situs Anda dan mendapatkan datanya:

Alat Pengujian Kinerja KeyCDN


Langkah 1: Identifikasi halaman teratas Anda

Jika langkah 0 tidak valid untuk Anda dan server Anda memerlukan waktu untuk menghasilkan respons, Anda memiliki semua prasyarat untuk melanjutkan mengintegrasikan Petunjuk Awal.

Langkah pertama adalah mengidentifikasi halaman arahan teratas Anda, atau dengan kata lain, halaman tempat pengguna Anda memulai perjalanan mereka di situs Anda. Titik masuk ini lebih penting daripada laman lainnya karena keefektifan Petunjuk Awal menurun saat pengunjung menavigasi situs web Anda .

Itu karena browser modern cukup pandai menebak halaman mana yang akan dikunjungi pengguna berikutnya, dan mereka kemungkinan memiliki semua sub-sumber daya yang mereka butuhkan pada navigasi kedua atau ketiga berikutnya.


Langkah 2: Identifikasi asal-usul penting dan sub-sumber daya yang paling berkontribusi pada metrik kinerja utama

Setelah mengidentifikasi laman landas teratas, Anda harus beralih ke mengidentifikasi asal dan sub-sumber daya mana yang merupakan kandidat yang baik untuk petunjuk prakoneksi atau pramuat. Ini akan menjadi asal dan sumber daya yang secara besar-besaran berkontribusi pada metrik utama seperti Cat Konten Terbesar dan Cat Konten Penuh Pertama.

Lebih khusus lagi, Anda ingin mencari sub-sumber daya yang memblokir render seperti JavaScript sinkron, stylesheet, atau bahkan font web.

Anda dapat mengidentifikasinya dengan menjalankan situs web Anda melalui alat pengujian seperti WebPageTest dan memeriksa bagan air terjun. Semua sumber daya yang memblokir render akan memiliki "X" di depannya:

Bagan Air Terjun Uji Halaman Web

Cara termudah untuk mengidentifikasi sub-sumber daya yang cocok untuk Petunjuk Awal adalah jika sumber daya utama Anda sudah menggunakan link rel=preconnect atau link rel=preload . Ini adalah kandidat yang sempurna.

Penting: Anda tidak ingin menggunakan Petunjuk Awal atau petunjuk sumber daya lainnya pada sumber daya yang mungkin usang atau tidak lagi digunakan oleh sumber daya utama. Secara umum, bertujuan untuk sumber daya dan asal yang cukup stabil dan sebagian besar independen dari hasil untuk sumber daya utama. Pelajari lebih lanjut di sini.


Dan begitulah cara Anda dapat menambahkan Petunjuk Awal secara manual ke situs web Anda.

Tetapi bagaimana jika Anda tidak memiliki keterampilan teknis untuk melakukannya sendiri?

Nah, ada cara yang lebih mudah.

Mengaktifkan Petunjuk Awal Menggunakan Akun Cloudflare Anda

Jika Anda pengguna Cloudflare, Anda dapat mengaktifkan Petunjuk Awal melalui dasbor Anda, dengan melakukan langkah-langkah berikut:

  1. Masuk ke dasbor Cloudflare Anda dan pilih domain Anda.
  2. Dari dasbor, klik Kecepatan > Pengoptimalan.
  3. Di bawah Pengiriman yang Dioptimalkan, aktifkan Petunjuk Awal.
Untuk informasi lebih lanjut, Anda dapat memeriksa dokumentasi Cloudflare.


Seperti yang Anda ketahui, CDN bawaan NitroPack juga disediakan oleh Cloudflare. Transisi ini membuka pintu bagi kami untuk mulai mengerjakan fitur caching tepi HTML baru, yang, ketika dirilis, akan memungkinkan kami untuk memberi semua klien kami kemungkinan untuk mengaktifkan Petunjuk Awal tanpa memiliki akun Cloudflare.

Kami sedang mendalami proses pengembangan dan bekerja keras untuk merilis caching tepi HTML sesegera mungkin. Jadi pastikan untuk berlangganan buletin kami dan ikuti blog kami untuk menjadi yang pertama mengetahui kapan kami mengumumkannya.