Cari tahu cara server Anda dapat mengirimkan petunjuk tentang sub-resource penting ke browser.
Apa itu Petunjuk Awal?
Situs web menjadi semakin canggih dari waktu ke waktu. Dengan demikian, bukanlah hal yang aneh jika server perlu melakukan pekerjaan berat (misalnya, akses ke database, atau CDN yang mengakses server asal) untuk menghasilkan HTML untuk halaman yang diminta. Sayangnya, "waktu berpikir server" ini mengakibatkan latensi tambahan sebelum browser dapat mulai merender halaman. Koneksi secara efektif menjadi tidak aktif selama waktu yang dibutuhkan server untuk menyiapkan respons.
Early Hints 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 sub-resource penting (misalnya, stylesheet untuk halaman, JavaScript penting) atau origin yang mungkin akan digunakan oleh halaman, saat server sibuk menghasilkan resource utama. Browser dapat menggunakan petunjuk tersebut untuk memanaskan koneksi, dan meminta sub-resource, sambil menunggu resource utama. Dengan kata lain, Petunjuk Awal membantu browser memanfaatkan "waktu berpikir server" seperti itu dengan melakukan beberapa pekerjaan di muka, sehingga mempercepat pemuatan laman.
Dalam beberapa kasus, peningkatan performa pada Largest Contentful Paint dapat mencapai beberapa ratus milidetik, seperti yang diamati oleh Shopify dan oleh Cloudflare, dan hingga satu detik lebih cepat, seperti yang terlihat dalam contoh ini sebelum/setelah perbandingan:
Mengimplementasikan Petunjuk Awal
Sebelum membahas topik lebih dalam, perhatikan bahwa Petunjuk Awal tidak berguna jika server Anda dapat langsung mengirimkan 200 (atau respons akhir lainnya). Sebagai gantinya, pertimbangkan untuk menggunakan link rel=preload atau link rel=preconnect reguler pada respons utama (header HTTP rel link), atau dalam respons utama (elemen <link>), dalam situasi tersebut. Untuk kasus ketika server Anda memerlukan sedikit waktu untuk menghasilkan respons utama, lanjutkan membaca.
Langkah pertama untuk memanfaatkan Petunjuk Awal terdiri dari mengidentifikasi halaman landing teratas, yaitu halaman tempat pengguna biasanya memulai saat mengunjungi situs Anda. Ini dapat 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 akan menurun saat pengguna menjelajahi situs Anda (artinya, browser lebih cenderung memiliki semua sub-resource yang dibutuhkan pada navigasi kedua atau ketiga berikutnya). Memberikan kesan pertama yang baik juga merupakan ide yang bagus.
Setelah Anda memiliki daftar halaman landing yang diprioritaskan ini, langkah selanjutnya adalah mengidentifikasi origin atau sub-resource mana yang akan menjadi kandidat yang baik untuk petunjuk prakoneksi atau pramuat, sebagai perkiraan pertama. Biasanya, resource tersebut adalah origin dan sub-resource yang paling berkontribusi terhadap metrik pengguna utama seperti Largest Contentful Paint atau First Contentful Paint. Lebih jelasnya, cari sub-resource yang memblokir perenderan seperti JavaScript sinkron, stylesheet, atau bahkan font web. Demikian pula, cari origin yang menghosting sub-resource yang berkontribusi banyak terhadap metrik pengguna utama. Catatan: jika resource utama sudah menggunakan <link rel=preconnect> atau <link rel=preload>, Anda dapat mempertimbangkan origin atau resource ini di antara kandidat untuk Petunjuk Awal. Baca artikel ini untuk mengetahui detail selengkapnya.
Langkah kedua terdiri dari meminimalkan risiko penggunaan Petunjuk Awal pada resource atau origin yang mungkin sudah tidak digunakan lagi, atau tidak lagi digunakan oleh resource utama. Misalnya, resource yang sering diupdate dan berversi (misalnya example.com/css/main.fa231e9c.css) mungkin bukan pilihan terbaik. Perlu diketahui bahwa masalah ini tidak khusus untuk Petunjuk Awal, tetapi berlaku untuk semua link rel=preload atau rel=preconnect di mana pun masalah tersebut ada. Ini adalah detail yang paling sesuai untuk penanganan otomatisasi atau template (misalnya, proses manual lebih cenderung menyebabkan hash atau URL versi tidak cocok antara link rel=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 pramuat melalui Petunjuk Awal:
103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]
Beberapa saat kemudian, halaman web, termasuk CSS yang ditautkan, akan ditampilkan. Sayangnya, resource CSS ini sering diperbarui, dan resource utama sudah lima versi lebih cepat (abcd105) dari resource CSS yang diprediksi (abcd100).
200 OK
[...]
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.abcd105.css">
Secara umum, bidik resource dan asal yang cukup stabil, dan sebagian besar tidak bergantung pada hasil resource utama. Jika perlu, pertimbangkan untuk membagi sumber daya utama Anda menjadi dua: bagian stabil yang dirancang untuk digunakan dengan Petunjuk Awal, dan bagian yang lebih dinamis lagi untuk diambil setelah sumber daya utama diterima oleh browser:
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/experimental.3eab3290.css">
Terakhir, di sisi server, cari permintaan resource utama yang dikirim oleh browser yang diketahui mendukung Petunjuk Awal, lalu respons segera dengan 103 Petunjuk Awal. Dalam respons 103, sertakan petunjuk preconnect dan pramuat yang relevan. Setelah resource 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 terlihat 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 Browser
- 103
- 103
- 120
- 17
Dukungan pramuat:
Dukungan Browser
- 103
- 103
- x
Dukungan server
Berikut adalah ringkasan tingkat dukungan untuk Petunjuk Awal di antara software server HTTP OSS populer:
- Apache: didukung melalui mod_http2.
- H2O: didukung.
- NGINX: modul eksperimental.
- Node: didukung sejak 18.11.0 untuk http dan http2
Mengaktifkan Petunjuk Awal dengan cara 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:
Menghindari masalah untuk klien yang tidak mendukung Petunjuk Awal
Respons HTTP informasi dalam rentang 100 adalah bagian dari standar HTTP, tetapi beberapa klien lama atau bot mungkin kesulitan dengan ini karena, sebelum peluncuran 103 Early Hints, tanggapan tersebut jarang digunakan untuk penjelajahan web umum.
Hanya memunculkan 103 Petunjuk Awal sebagai respons terhadap klien yang mengirim header permintaan HTTP sec-fetch-mode: navigate harus memastikan petunjuk tersebut hanya dikirim untuk klien yang lebih baru yang mengerti untuk menunggu respons berikutnya. Selain itu, karena Petunjuk Awal hanya didukung pada permintaan navigasi (lihat batasan saat ini), hal 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.
Pola lanjutan
Jika Anda telah menerapkan Petunjuk Awal sepenuhnya ke halaman landing utama dan mencari lebih banyak peluang, Anda mungkin tertarik dengan pola lanjutan berikut.
Untuk pengunjung yang membuka permintaan halaman n sebagai bagian dari perjalanan pengguna biasa, Anda dapat menyesuaikan respons Petunjuk Awal ke konten yang lebih rendah dan lebih dalam di halaman, dengan kata lain menggunakan Petunjuk Awal pada resource berprioritas lebih rendah. Hal ini mungkin terdengar kontra-intuitif mengingat kami merekomendasikan agar Anda berfokus pada origin atau sub-resource yang memblokir render dan berprioritas tinggi. Namun, saat pengunjung bernavigasi untuk beberapa waktu, kemungkinan besar browser mereka telah memiliki semua sumber daya penting. Selanjutnya, Anda sebaiknya mengalihkan perhatian ke resource 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
preconnectdanpreload(yaitu,prefetchtidak didukung). - Petunjuk Awal yang diikuti dengan pengalihan lintas asal pada respons akhir akan menyebabkan Chrome menghapus resource dan koneksi yang diperoleh melalui Petunjuk Awal.
Browser lain memiliki batasan yang serupa, dan lebih lanjut membatasi 103 petunjuk awal untuk preconnect saja.
Apa selanjutnya?
Bergantung pada minat dari komunitas, kami dapat meningkatkan penerapan Petunjuk Awal dengan kemampuan berikut:
- Petunjuk Awal yang dikirim pada permintaan sub-resource.
- Petunjuk Awal dikirim dalam permintaan resource utama iframe.
- Dukungan untuk pengambilan data di Petunjuk Awal.
Kami menantikan masukan Anda terkait aspek yang harus diprioritaskan dan cara meningkatkan Petunjuk Awal lebih lanjut.
Hubungan dengan H2/Push
Jika sudah terbiasa dengan fitur HTTP2/Push yang tidak digunakan lagi, Anda mungkin bertanya-tanya apa perbedaan Petunjuk Awal. Meskipun Petunjuk Awal memerlukan perjalanan bolak-balik agar browser mulai mengambil sub-sumber daya penting, dengan HTTP2/Push server dapat mulai mendorong sub-sumber daya bersama respons. Meskipun terdengar luar biasa, ini menghasilkan kelemahan struktural utama: dengan HTTP2/Push, sangat sulit untuk menghindari pengiriman sub-resource yang sudah dimiliki browser. Efek "over-push" ini mengakibatkan penggunaan bandwidth jaringan yang kurang efisien, yang secara signifikan menghambat manfaat performa. Secara keseluruhan, data Chrome menunjukkan bahwa HTTP2/Push sebenarnya adalah hal 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 mengambil, atau menghubungkan ke, apa yang sebenarnya diperlukan. Meskipun Petunjuk Awal tidak mencakup semua kasus penggunaan yang dapat diatasi HTTP2/Push secara teori, kami percaya bahwa Petunjuk Awal adalah solusi yang lebih praktis untuk mempercepat navigasi.
Gambar thumbnail oleh Pierre Bamin.