Aturan spekulasi dapat digunakan untuk melakukan pengambilan data dan pra-render navigasi halaman berikutnya seperti yang dijelaskan dalam postingan sebelumnya. Hal ini dapat memungkinkan pemuatan halaman yang jauh lebih cepat—atau bahkan instan—sehingga sangat meningkatkan Data Web Inti untuk navigasi halaman tambahan ini.
Men-debug aturan spekulasi bisa jadi rumit. Hal ini terutama berlaku untuk halaman yang dipra-render, karena halaman ini dirender di perender terpisah—seperti tab latar belakang tersembunyi yang menggantikan tab saat ini saat diaktifkan. Oleh karena itu, opsi DevTools biasa tidak selalu dapat digunakan untuk men-debug masalah.
Tim Chrome telah bekerja keras untuk meningkatkan dukungan DevTools untuk proses debug aturan spekulasi. Dalam postingan ini, Anda akan melihat berbagai cara menggunakan alat ini untuk memahami aturan spekulasi halaman, alasan alat ini mungkin tidak berfungsi, dan kapan developer dapat menggunakan opsi DevTools yang lebih umum—dan kapan tidak.
Penjelasan istilah "pra-"
Ada banyak istilah "pra-" yang membingungkan, jadi kita akan mulai dengan penjelasan tentang istilah-istilah ini:
- Prefetch: mengambil resource atau dokumen terlebih dahulu untuk meningkatkan performa di masa mendatang. Postingan ini membahas pengambilan dokumen terlebih dahulu menggunakan Speculation Rules API, bukan opsi
<link rel="prefetch">serupa, tetapi lebih lama yang sering digunakan untuk mengambil subresource terlebih dahulu. - Pra-render: ini melangkah lebih jauh dari pengambilan data sebelumnya dan benar-benar merender seluruh halaman seolah-olah pengguna telah membuka halaman tersebut, tetapi tetap menyimpannya dalam proses perenderan latar belakang tersembunyi yang siap digunakan jika pengguna benar-benar membuka halaman tersebut. Sekali lagi, dokumen ini membahas versi Speculation Rules API yang lebih baru, bukan opsi
<link rel="prerender">yang lebih lama (yang tidak lagi melakukan pra-render penuh). - Navigasi spekulatif: istilah kolektif untuk opsi pengambilan data dan pra-render baru yang dipicu oleh aturan spekulasi.
- Pramuat: istilah yang terlalu sering digunakan dan dapat merujuk pada sejumlah teknologi dan proses, termasuk
<link rel="preload">, pemindai pramuat, dan pramuat navigasi pekerja layanan. Item ini tidak akan dibahas di sini, tetapi istilah ini disertakan untuk membedakannya dengan jelas dari istilah "navigasi spekulatif".
Aturan spekulasi untuk prefetch
Aturan spekulasi dapat digunakan untuk melakukan pengambilan data awal dokumen navigasi berikutnya. Misalnya, saat menyisipkan JSON berikut ke halaman, next.html dan next2.html akan di-prefetch:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
Penggunaan aturan spekulasi untuk pengambilan data sebelumnya pada navigasi memiliki beberapa keunggulan dibandingkan sintaksis <link rel="prefetch"> yang lebih lama, seperti API yang lebih ekspresif dan hasil yang disimpan dalam cache memori, bukan cache disk HTTP.
Aturan spekulasi prefetch proses debug
Pengambilan data awal yang dipicu oleh aturan spekulasi dapat dilihat di panel Jaringan dengan cara yang sama seperti pengambilan data lainnya:
Dua permintaan yang ditandai dengan warna merah adalah resource yang telah diambil sebelumnya, seperti yang dapat dilihat pada kolom Type. Resource ini diambil dengan prioritas Lowest karena ditujukan untuk navigasi mendatang dan Chrome memprioritaskan resource halaman saat ini.
Mengklik salah satu baris juga akan menampilkan header HTTP Sec-Purpose: prefetch, yang merupakan cara permintaan ini dapat diidentifikasi di sisi server:
Men-debug prefetch dengan tab Pemuatan spekulatif
Bagian Pemuatan spekulatif baru telah ditambahkan di panel Aplikasi Chrome DevTools, di bagian Layanan latar belakang, untuk membantu proses debug aturan spekulasi:
Ada tiga tab yang tersedia di bagian ini:
- Pemuatan spekulatif yang mencantumkan status pra-render halaman saat ini.
- Aturan yang mencantumkan semua set aturan yang ditemukan di halaman saat ini, yang ditetapkan sebagai URL atau tag aturan, jika ada.
- Spekulasi yang mencantumkan semua URL yang telah di-prefetch dan di-prerender dari set aturan.
Tab Spekulasi ditampilkan dalam screenshot sebelumnya, dan kita dapat melihat bahwa contoh halaman ini memiliki satu set aturan spekulasi untuk melakukan pengambilan data 3 halaman. Dua pengambilan data awal berhasil dan satu gagal. Ikon di samping Set aturan dapat diklik untuk membuka sumber set aturan di panel Elemen. Atau, link Status dapat diklik untuk mengarahkan Anda ke tab Spekulasi yang difilter ke kumpulan aturan tersebut.
Tab Spekulasi mencantumkan semua URL target, beserta tindakan (pengambilan data awal atau pra-render), set aturan yang digunakan (karena mungkin ada beberapa di halaman), dan status setiap spekulasi:
Di atas URL, drop-down dapat digunakan untuk menampilkan URL dari semua set aturan, atau hanya URL dari set aturan tertentu. Di bawahnya, semua URL akan dicantumkan. Dengan mengklik URL, Anda akan mendapatkan informasi yang lebih mendetail.
Dalam screenshot ini, kita dapat melihat alasan kegagalan halaman next3.html (yang tidak ada dan oleh karena itu menampilkan 404, yang merupakan kode status HTTP non-2xx).
Tab ringkasan, Pemuatan spekulatif, menampilkan laporan Status pemuatan spekulatif untuk halaman ini untuk menunjukkan apakah pengambilan data atau pra-render digunakan untuk halaman ini atau tidak.
Untuk halaman yang telah diambil datanya, Anda akan melihat pesan berhasil saat halaman tersebut dibuka:
Spekulasi yang tidak cocok
Jika navigasi terjadi dari halaman dengan aturan spekulasi yang tidak menghasilkan penggunaan pengambilan data atau pra-render, bagian tambahan tab akan menampilkan detail lebih lanjut tentang alasan URL tidak cocok dengan URL spekulasi. Hal ini berguna untuk menemukan kesalahan ketik dalam aturan spekulasi Anda.
Misalnya, di sini kita membuka next4.html, tetapi hanya next.html, next2.html, atau next3.html yang merupakan pengambilan data awal, jadi kita dapat melihat bahwa ini tidak cocok dengan salah satu dari ketiga aturan tersebut.
Tab Pemuatan spekulatif sangat berguna untuk men-debug aturan spekulasi itu sendiri, dan menemukan error sintaksis dalam JSON.
Untuk pengambilan data awal itu sendiri, panel Jaringan mungkin merupakan tempat yang lebih umum. Untuk contoh kegagalan pengambilan data, Anda dapat melihat 404 untuk pengambilan data di sini:
Namun, tab Pemuatan spekulatif menjadi jauh lebih berguna untuk aturan spekulasi pra-rendering, yang akan dibahas berikutnya.
Aturan spekulasi untuk prerender
Aturan spekulasi pra-render mengikuti sintaksis yang sama dengan aturan spekulasi pengambilan data terlebih dahulu. Contoh:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
Kumpulan aturan ini memicu pemuatan dan rendering penuh halaman yang ditentukan (tunduk pada batasan tertentu). Hal ini dapat memberikan pengalaman pemuatan instan—meskipun dengan biaya resource tambahan.
Namun, tidak seperti pengambilan data awal, hal ini tidak dapat dilihat di panel Network, karena diambil dan dirender dalam proses rendering terpisah di Chrome. Hal ini membuat tab Pemuatan spekulatif menjadi lebih penting untuk men-debug aturan spekulasi pra-render.
Men-debug prerender dengan tab Pemuatan spekulatif
Layar Pemuatan spekulatif yang sama dapat digunakan untuk aturan spekulasi pra-render seperti yang ditunjukkan dengan halaman demo serupa yang mencoba melakukan pra-render, bukan melakukan pengambilan data tiga halaman:
Di sini kita melihat lagi bahwa salah satu dari tiga URL gagal melakukan pra-render, dan developer bisa mendapatkan detail per URL di tab Spekulasi dengan mengklik link 2 Siap, 1 Gagal.
Di Chrome 121, kami meluncurkan dukungan aturan dokumen. Hal ini memungkinkan browser mengambilnya dari link asal yang sama di halaman, bukan mencantumkan kumpulan URL tertentu:
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
Contoh ini memilih semua link dengan origin yang sama, kecuali yang dimulai dengan /not-safe-to-prerender sebagai kandidat pra-render.
Setelan ini juga menetapkan pra-render eagerness ke moderate yang berarti navigasi akan dipra-render saat link di-hover, atau diklik.
Ada aturan serupa seperti ini di situs demo aturan spekulatif, dan menggunakan bagian Pemuatan spekulatif baru di situs ini menunjukkan kegunaan tab baru ini karena semua URL yang memenuhi syarat yang ditemukan browser di halaman tercantum:
Status adalah Not triggered karena proses pra-render untuk halaman ini belum dimulai. Namun, saat kita mengarahkan kursor ke link, kita melihat perubahan status saat setiap URL dipra-render:
Chrome telah menetapkan batas pada pra-render, termasuk maksimum 2 pra-render untuk tingkat keantusiasan moderate, jadi setelah mengarahkan kursor ke link ke-3, kita akan melihat alasan kegagalan untuk URL tersebut:
Men-debug prerender dengan panel DevTools lainnya
Tidak seperti pengambilan awal, halaman yang telah di-prerender tidak akan muncul dalam proses rendering saat ini di panel DevTools seperti panel Network, karena halaman tersebut dirender di perender di balik layar mereka sendiri.
Namun, kini Anda dapat mengganti perender yang digunakan oleh panel DevTools dengan menu drop-down di kanan atas, atau dengan memilih URL di bagian atas panel dan memilih Periksa:
Menu drop-down ini (dan nilai yang dipilih) juga dibagikan di semua panel lainnya, seperti panel Network, tempat Anda dapat melihat bahwa halaman yang diminta adalah halaman yang telah di-prerender:
Dengan melihat header HTTP untuk resource ini, kita dapat melihat bahwa semuanya akan ditetapkan dengan header Sec-Purpose: prefetch;prerender:
Atau panel Elements, tempat Anda dapat melihat konten halaman, seperti pada screenshot berikut yang menunjukkan bahwa elemen <h1> adalah untuk halaman yang telah di-prerender:
Atau panel Konsol, tempat Anda dapat melihat log konsol yang dikeluarkan oleh halaman yang telah di-prerender:
Men-debug aturan spekulasi di halaman yang telah di-pra-render
Bagian sebelumnya membahas cara men-debug halaman pra-render di halaman yang memulai pra-rendering. Namun, halaman yang telah di-prerender juga dapat memberikan informasi proses debug, baik dengan melakukan panggilan analisis maupun mencatat ke konsol (yang dapat dilihat seperti yang dijelaskan di bagian sebelumnya).
Selain itu, setelah halaman yang telah di-pra-render diaktifkan oleh pengguna yang membukanya, tab Pemuatan spekulatif akan menampilkan status ini, dan apakah halaman tersebut berhasil di-pra-render atau tidak. Jika tidak dapat di-pra-render, penjelasan mengenai alasannya akan diberikan:
Selain itu—seperti halnya pengambilan data—berpindah dari halaman dengan aturan spekulasi yang tidak cocok dengan halaman saat ini akan mencoba menunjukkan kepada Anda alasan URL tidak cocok dengan URL yang tercakup dalam aturan spekulasi halaman sebelumnya di tab Pemuatan spekulatif:
Kesimpulan
Dalam postingan ini, kami telah menunjukkan berbagai cara developer dapat men-debug aturan spekulasi pengambilan data dan pra-render. Tim terus berupaya mengembangkan alat untuk aturan spekulasi, dan kami ingin mendengar saran dari developer tentang cara lain yang akan membantu men-debug API baru yang menarik ini. Sebaiknya developer mengajukan masalah di pelacak masalah Chrome untuk permintaan fitur atau bug yang ditemukan.
Ucapan terima kasih
Gambar thumbnail oleh Nubelson Fernandes di Unsplash.