Pemuatan halaman yang lebih cepat menggunakan waktu berpikir server dengan Petunjuk Awal

Cari tahu bagaimana server Anda dapat mengirimkan petunjuk ke browser tentang subresource penting.

Kenji Baheux

Barry Pollard

Apa itu Petunjuk Awal?

Seiring berjalannya waktu, situs web telah menjadi semakin canggih. Dengan demikian, wajar saja jika server harus melakukan pekerjaan non-trivial (misalnya, akses ke database, atau CDN yang mengakses server asal) untuk menghasilkan HTML untuk halaman yang diminta. Sayangnya, "waktu berpikir server" ini menghasilkan latensi tambahan sebelum browser dapat mulai merender halaman. Bahkan, koneksi secara efektif tidak ada aktivitas selama dibutuhkan server untuk menyiapkan respons.

Petunjuk Awal adalah kode status HTTP (103 Early Hints) yang digunakan untuk mengirim respons HTTP awal sebelum respons akhir. Hal ini memungkinkan server mengirimkan petunjuk ke browser tentang subresource penting (misalnya, lembar gaya untuk halaman, JavaScript penting) atau origin yang mungkin akan digunakan oleh halaman, saat server sibuk membuat resource utama. Browser dapat menggunakan petunjuk tersebut untuk melakukan pemanasan koneksi, dan meminta subresource, sambil menunggu resource utama. Dengan kata lain, Petunjuk Awal membantu browser memanfaatkan "waktu berpikir server" tersebut dengan melakukan beberapa pekerjaan sebelumnya, sehingga mempercepat pemuatan halaman.

Dalam beberapa kasus, peningkatan performa pada Largest Contentful Paint dapat berlangsung dari beberapa ratus milidetik, seperti yang diamati oleh Shopify dan oleh Cloudflare, dan hingga satu detik lebih cepat, seperti yang terlihat dalam perbandingan sebelum dan sesudah:

Cara menggunakan Petunjuk Awal

Langkah pertama untuk memanfaatkan Petunjuk Awal terdiri dari mengidentifikasi halaman landing teratas, yaitu halaman tempat pengguna biasanya memulai ketika mengunjungi situs Anda. Ini bisa berupa beranda, atau halaman listingan produk populer jika Anda memiliki banyak pengguna yang berasal dari situs lain. Alasan titik entri ini lebih penting daripada halaman lain adalah karena kegunaan Petunjuk Awal berkurang saat pengguna menjelajahi situs Anda (artinya, browser cenderung memiliki semua subresource yang diperlukan pada navigasi kedua atau ketiga berikutnya). Tidak ada salahnya juga untuk memberikan kesan pertama yang tak terlupakan.

Setelah Anda memiliki daftar halaman landing yang diprioritaskan ini, langkah selanjutnya adalah mengidentifikasi origin atau subresource yang akan menjadi kandidat yang baik untuk petunjuk preconnect atau preload. Biasanya, kedua resource tersebut adalah origin dan subresource yang paling banyak berkontribusi pada metrik pengguna utama seperti Largest Contentful Paint, atau First Contentful Paint. Lebih jelasnya, cari subresource yang memblokir render seperti JavaScript sinkron, stylesheet, atau bahkan font web. Demikian pula, cari origin yang menghosting subresource yang banyak berkontribusi pada metrik pengguna utama.

Perhatikan juga bahwa jika resource utama sudah menggunakan preconnect atau preload, Anda dapat mempertimbangkan origin atau resource ini di antara kandidat untuk Petunjuk Awal. Lihat cara mengoptimalkan LCP untuk detail selengkapnya. Namun, menyalin perintah preconnect dan preload secara naif dari HTML ke Petunjuk Awal mungkin tidak optimal.

Saat menggunakannya dalam HTML, Anda biasanya ingin melakukan preconnect atau preload resource yang tidak akan ditemukan oleh Preload Scanner di HTML—misalnya, font, atau gambar latar yang seharusnya dapat ditemukan terlambat. Untuk Petunjuk Awal, Anda tidak akan memiliki HTML, jadi sebaiknya gunakan preconnect ke domain penting atau preload resource penting yang mungkin akan ditemukan di awal HTML—misalnya, pramuat main.css atau app.js.Selain itu, tidak semua browser mendukung preload untuk Petunjuk Awal—lihat Dukungan Browser.

Langkah kedua terdiri dari meminimalkan risiko penggunaan Petunjuk Awal pada resource atau origin yang mungkin sudah tidak digunakan, atau tidak lagi digunakan oleh resource utama. Misalnya, resource yang sering diupdate dan memiliki beberapa versi (misalnya, example.com/css/main.fa231e9c.css) mungkin bukan pilihan terbaik. Perlu diperhatikan bahwa masalah ini tidak khusus untuk Petunjuk Awal, tetapi berlaku untuk preload atau preconnect di mana pun letaknya. Ini adalah jenis detail yang paling baik ditangani dengan otomatisasi atau pembuatan template (misalnya, proses manual lebih cenderung menyebabkan URL hash atau versi yang tidak cocok antara preload dan tag HTML sebenarnya menggunakan resource).

Sebagai contoh, perhatikan alur berikut:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]

Server memprediksi bahwa main.abcd100.css akan diperlukan, dan menyarankan untuk melakukan pramuat menggunakan Petunjuk Awal:

103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]

Beberapa saat kemudian, halaman web, termasuk CSS yang ditautkan, ditayangkan. Sayangnya, resource CSS ini sering diperbarui, dan resource utamanya sudah lima versi di depan (abcd105) dari resource CSS yang diprediksi (abcd100).

200 OK
[...]
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.abcd105.css">

Secara umum, targetkan sumber daya dan asal yang cukup stabil, dan sebagian besar tidak bergantung pada hasil sumber daya utama. Jika perlu, pertimbangkan untuk membagi resource kunci menjadi dua: bagian stabil yang dirancang untuk digunakan dengan Petunjuk Awal dan bagian yang lebih dinamis yang tersisa untuk diambil setelah resource utama diterima oleh browser:

<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">

Terakhir, pada sisi server, cari permintaan resource utama yang dikirim oleh browser yang diketahui mendukung Early Hints, dan segera tanggapi dengan 103 Early Hints. Pada respons 103, sertakan petunjuk preconnect dan pramuat yang relevan. Setelah aset utama siap, tindak lanjuti dengan respons biasa (misalnya, 200 OK jika berhasil). Untuk kompatibilitas mundur, sebaiknya sertakan juga header HTTP Link dalam respons akhir, bahkan mungkin menambahkan resource penting yang menjadi jelas sebagai bagian dari pembuatan resource utama (misalnya, bagian dinamis dari resource kunci jika Anda mengikuti saran "dibagi menjadi dua"). Tampilannya akan terlihat seperti berikut:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script

Beberapa saat kemudian:

200 OK
Content-Length: 7531
Content-Type: text/html; charset=UTF-8
Content-encoding: br
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Link: </experimental.3eab3290.css>; rel=preload; as=style
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">
   <script src="/common.js"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">

Dukungan browser

Meskipun 103 Petunjuk Awal didukung di semua browser utama, perintah yang dapat dikirim pada Petunjuk Awal berbeda untuk setiap browser:

Dukungan prakoneksi:

Dukungan pramuat:

Chrome DevTools juga memiliki dukungan 103 Petunjuk Awal dan header Link dapat dilihat di resource dokumen:

Perhatikan bahwa untuk menggunakan resource Petunjuk Awal, Disable cache tidak boleh dicentang di DevTools karena Petunjuk Awal menggunakan cache browser. Untuk resource bawaan, inisiator akan ditampilkan sebagai early-hints dan ukuran sebagai (Disk cache):

Hal ini juga memerlukan sertifikat tepercaya untuk pengujian HTTPS.

Firefox (mulai v126) tidak memiliki dukungan 103 Petunjuk Awal eksplisit di DevTools, tetapi sumber daya yang dimuat menggunakan Petunjuk Awal tidak menampilkan informasi Header HTTP yang merupakan salah satu indikator yang dimuat melalui Petunjuk Awal.

Dukungan server

Berikut ini ringkasan mengenai tingkat dukungan untuk Petunjuk Awal di antara software server HTTP open source yang populer:

• Apache: didukung menggunakan mod_http2.
• H2O: didukung.
• NGINX: modul eksperimental.
• Node: didukung sejak 18.11.0 untuk http dan http2

Aktifkan Petunjuk Awal dengan cara yang lebih mudah

Jika menggunakan salah satu CDN atau platform berikut, Anda mungkin tidak perlu menerapkan Petunjuk Awal secara manual. Lihat dokumentasi online penyedia solusi Anda untuk mengetahui apakah penyedia tersebut mendukung Petunjuk Awal, atau lihat daftar tidak lengkap di sini:

• Petunjuk Awal di Cloudflare
• Petunjuk Awal di Fastly.
• Petunjuk Awal di Akamai.

Cara menghindari masalah untuk klien yang tidak mendukung Petunjuk Awal

Respons HTTP informasi dalam rentang 100 adalah bagian dari standar HTTP, tetapi beberapa klien atau bot lama mungkin kesulitan dengan hal ini karena sebelum peluncuran 103 Petunjuk Awal, mereka jarang digunakan untuk penjelajahan web umum.

Hanya memberikan 103 Petunjuk Awal sebagai respons kepada klien yang mengirim header permintaan HTTP sec-fetch-mode: navigate yang harus memastikan petunjuk tersebut hanya dikirim untuk klien baru yang mengerti untuk menunggu respons berikutnya. Selain itu, karena Petunjuk Awal hanya didukung pada permintaan navigasi (lihat batasan saat ini), petunjuk ini memiliki manfaat tambahan yaitu menghindari pengiriman yang tidak perlu pada permintaan lain.

Selain itu, Petunjuk Awal direkomendasikan untuk hanya dikirim melalui koneksi HTTP/2 atau HTTP/3 dan sebagian besar browser hanya akan menerimanya melalui protokol tersebut.

Pola lanjutan

Jika Anda telah menerapkan sepenuhnya Petunjuk Awal ke halaman landing utama dan mencari peluang lainnya, Anda mungkin tertarik dengan pola lanjutan berikut.

Untuk pengunjung yang berada di permintaan halaman nth sebagai bagian dari perjalanan pengguna biasa, sebaiknya sesuaikan respons Petunjuk Awal untuk konten yang lebih rendah dan lebih dalam di halaman tersebut, dengan kata lain menggunakan Petunjuk Awal tentang resource berprioritas lebih rendah. Hal ini mungkin terdengar kontra-intuitif mengingat kami merekomendasikan agar Anda berfokus pada subresource atau origin yang memiliki prioritas tinggi dan pemblokir render. Namun, saat pengunjung telah menjelajahi beberapa lama, kemungkinan besar browser mereka telah memiliki semua sumber daya penting. Dari sana, mungkin masuk akal untuk mengalihkan perhatian Anda ke sumber daya yang berprioritas lebih rendah. Misalnya, hal ini dapat berarti menggunakan Petunjuk Awal untuk memuat gambar produk atau JS/CSS tambahan yang hanya diperlukan untuk interaksi pengguna yang kurang umum.

Batasan saat ini

Berikut adalah batasan Petunjuk Awal seperti yang diterapkan di Chrome:

• Hanya tersedia untuk permintaan navigasi (yaitu, resource utama untuk dokumen tingkat atas).
• Hanya mendukung preconnect dan preload (artinya, prefetch tidak didukung).
• Petunjuk Awal yang diikuti dengan pengalihan lintas origin pada respons akhir akan menyebabkan Chrome menghapus resource dan koneksi yang diperolehnya menggunakan Petunjuk Awal.
• Resource yang dipramuat menggunakan Petunjuk Awal disimpan di cache HTTP dan diambil dari sana oleh halaman tersebut nanti. Oleh karena itu, hanya resource yang dapat di-cache yang dapat dipramuat menggunakan Petunjuk Awal atau resource akan diambil dua kali (sekali oleh Petunjuk Awal dan sekali lagi oleh dokumen). Di Chrome, cache HTTP dinonaktifkan untuk sertifikat HTTPS yang tidak tepercaya (meskipun Anda melanjutkan pemuatan halaman).

Browser lain memiliki batasan serupa dan, seperti disebutkan sebelumnya, beberapa browser lain membatasi lebih lanjut 103 petunjuk awal untuk preconnect saja.

Apa langkah selanjutnya?

Bergantung pada minat dari komunitas, kami dapat meningkatkan penerapan Petunjuk Awal dengan kemampuan berikut:

• Petunjuk Awal untuk resource yang tidak dapat di-cache menggunakan cache memori, bukan cache HTTP.
• Petunjuk Awal yang dikirim pada permintaan subresource.
• Petunjuk Awal yang dikirim pada permintaan resource utama iframe.
• Dukungan untuk pengambilan data di Early Hints.

Kami menantikan masukan Anda tentang aspek yang perlu diprioritaskan dan cara meningkatkan kualitas Petunjuk Awal.

Hubungan dengan H2/Push

Jika Anda sudah mengenal fitur HTTP2/Push yang tidak digunakan lagi, Anda mungkin bertanya-tanya apa perbedaan Petunjuk Awal. Meskipun Petunjuk Awal memerlukan perjalanan bolak-balik agar browser dapat mulai mengambil subresource penting, dengan HTTP2/Push server dapat mulai mendorong subresource bersama responsnya. Meskipun kedengarannya luar biasa, hal ini mengakibatkan kelemahan utama pada struktural: dengan HTTP2/Push sangat sulit untuk menghindari dorongan subresource yang sudah dimiliki browser. Efek "dorongan berlebihan" ini mengakibatkan penggunaan bandwidth jaringan yang kurang efisien, sehingga manfaat performanya terhambat secara signifikan. Secara keseluruhan, data Chrome menunjukkan bahwa HTTP2/Push sebenarnya sangat negatif untuk performa di seluruh web.

Sebaliknya, Petunjuk Awal berperforma lebih baik dalam praktiknya karena menggabungkan kemampuan untuk mengirim respons awal dengan petunjuk yang membuat browser bertanggung jawab untuk mengambil, atau terhubung ke, apa yang sebenarnya diperlukan. Meskipun Petunjuk Awal tidak mencakup semua kasus penggunaan yang dapat ditangani HTTP2/Push secara teori, kami yakin bahwa Petunjuk Awal adalah solusi yang lebih praktis untuk mempercepat navigasi.

Gambar thumbnail oleh Pierre Bamin.