Aturan spekulasi dapat digunakan untuk mengambil data dan melakukan pra-rendering navigasi halaman berikutnya seperti yang dijelaskan di postingan sebelumnya. Hal ini dapat memungkinkan pemuatan halaman yang jauh lebih cepat—atau bahkan instan—sehingga sangat meningkatkan Core Web Vitals 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 mengapa aturan tersebut mungkin tidak berfungsi, dan kapan developer bisa menggunakan opsi DevTools yang lebih dikenal—dan kapan tidak.
Penjelasan istilah "pra-"
Ada banyak istilah "pra-" yang membingungkan, jadi kita akan memulai dengan penjelasan tentang istilah-istilah berikut:
- Pengambilan data: mengambil resource atau dokumen terlebih dahulu untuk meningkatkan performa pada masa mendatang. Postingan ini membahas pengambilan dokumen secara prefetch menggunakan Speculation Rules API, bukan opsi
<link rel="prefetch">yang serupa, tetapi lebih lama yang sering digunakan untuk mengambil sub-resource secara prefetch. - Pra-rendering: ini lebih dari sekadar pengambilan data dan benar-benar merender seluruh halaman seolah-olah pengguna telah membukanya, tetapi menyimpannya dalam proses perender latar belakang tersembunyi yang siap digunakan jika pengguna benar-benar membukanya. 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-rendering penuh). - Spekulasi navigasi: istilah kolektif untuk opsi pramuat dan pra-render baru yang dipicu oleh aturan spekulasi.
- Preload: istilah yang kelebihan beban yang dapat merujuk ke 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 "spekulasi navigasi".
Aturan spekulasi untuk prefetch
Aturan spekulasi dapat digunakan untuk mengambil data dokumen navigasi berikutnya. Misalnya, saat menyisipkan JSON berikut ke dalam halaman, next.html dan next2.html akan dipramuat:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Menggunakan aturan spekulasi untuk pengambilan data navigasi memiliki beberapa keunggulan dibandingkan sintaksis <link rel="prefetch"> lama, seperti API yang lebih ekspresif dan hasil yang disimpan di cache memori, bukan cache disk HTTP.
Men-debug aturan spekulasi prefetch
Pengambilan data 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 pengambilan data, seperti yang dapat dilihat oleh kolom Jenis. 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-rendering halaman saat ini.
- Aturan yang mencantumkan semua kumpulan aturan yang ditemukan di halaman saat ini.
- Spekulasi yang mencantumkan semua URL yang dipramuat dan diprarender dari kumpulan aturan.
Tab Spekulasi ditampilkan di screenshot sebelumnya, dan kita dapat melihat halaman contoh ini memiliki satu kumpulan aturan spekulasi untuk melakukan pengambilan data 3 halaman. Dua dari prefetch tersebut berhasil dan satu gagal. Ikon di samping Kumpulan aturan dapat diklik untuk mengarahkan Anda ke sumber kumpulan aturan di panel Elemen. Atau, link Status dapat diklik untuk mengarahkan Anda ke tab Spekulasi yang difilter ke kumpulan aturan tersebut.
Tab Speculations mencantumkan semua URL target, bersama dengan tindakan (pengambilan data atau pra-rendering), dari kumpulan aturan mana URL tersebut berasal (karena mungkin ada beberapa URL di halaman), dan status setiap spekulasi:
Di atas URL, drop-down dapat digunakan untuk menampilkan URL dari semua kumpulan aturan, atau hanya URL dari kumpulan aturan tertentu. Di bawahnya, semua URL tercantum. Dengan mengklik URL, Anda akan mendapatkan informasi yang lebih mendetail.
Dalam screenshot ini, kita dapat melihat alasan kegagalan untuk halaman next3.html (yang tidak ada sehingga 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-rendering digunakan untuk halaman ini atau tidak.
Untuk halaman yang diambil data sebelumnya, Anda akan melihat pesan berhasil saat halaman tersebut dibuka:
Spekulasi yang tidak cocok
Saat navigasi terjadi dari halaman dengan aturan spekulasi yang tidak menghasilkan pengambilan data atau pra-rendering yang digunakan, bagian tambahan pada tab akan menampilkan detail selengkapnya tentang alasan URL tidak cocok dengan URL spekulasi mana pun. 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, sehingga kita dapat melihat bahwa ini tidak sepenuhnya cocok dengan salah satu dari ketiga aturan tersebut.
Tab Speculative loads sangat berguna untuk men-debug aturan spekulasi itu sendiri, dan menemukan error sintaksis dalam JSON.
Untuk pengambilan data itu sendiri, panel Jaringan kemungkinan adalah tempat yang tidak asing lagi. 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-rendering mengikuti sintaksis yang sama dengan aturan spekulasi pengambilan data. Contoh:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Kumpulan aturan ini memicu pemuatan dan render penuh dari halaman yang ditentukan (tunduk kepada batasan tertentu). Hal ini dapat memberikan pengalaman pemuatan instan—meskipun dengan biaya resource tambahan.
Namun, tidak seperti pengambilan data, data ini tidak dapat dilihat di panel Jaringan, karena data ini diambil dan dirender dalam proses rendering terpisah di Chrome. Hal ini membuat tab Beban spekulatif lebih penting untuk men-debug aturan spekulasi pra-rendering.
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 mengambil tiga halaman terlebih dahulu:
Di sini kita melihat lagi bahwa salah satu dari tiga URL gagal diprarender, dan developer dapat 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 origin 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.
Fungsi ini juga menetapkan pra-rendering eagerness ke moderate yang berarti navigasi dipra-render saat link diarahkan kursor, atau diklik.
Ada aturan serupa seperti ini di situs demo aturan spekulatif, dan penggunaan bagian Pemuatan spekulatif baru di situs ini menunjukkan kegunaan tab baru ini karena semua URL memenuhi syarat yang ditemukan browser di halaman tersebut tercantum:
Status adalah Not triggered karena proses pra-rendering untuk ini belum dimulai. Namun, saat mengarahkan kursor ke link, kita akan melihat perubahan status saat setiap URL dipra-render:
Chrome telah menetapkan batas pada pra-rendering, termasuk maksimum 2 pra-rendering untuk kesiapan moderate, sehingga 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 data, halaman yang telah dipra-render tidak akan muncul dalam proses rendering saat ini di panel DevTools seperti panel Network, karena halaman tersebut dirender di perender di balik layarnya sendiri.
Namun, sekarang Anda dapat mengganti perender yang digunakan oleh panel DevTools dengan menu drop-down di drop-down kanan atas, atau dengan memilih URL di bagian atas panel dan memilih Inspect:
Drop-down ini (dan nilai yang dipilih) juga dibagikan di semua panel lainnya, seperti panel Jaringan, tempat Anda dapat melihat halaman yang diminta adalah halaman yang dirender sebelumnya:
Dengan melihat header HTTP untuk resource ini, kita dapat melihat bahwa semuanya akan ditetapkan dengan header Sec-Purpose: prefetch;prerender:
Atau panel Elemen, tempat Anda dapat melihat konten halaman, seperti pada screenshot berikut yang menampilkan elemen <h1> untuk halaman yang dirender sebelumnya:
Atau di panel Konsol, Anda dapat melihat log konsol yang ditampilkan oleh halaman yang dipra-render:
Men-debug aturan spekulasi di halaman pra-rendering
Bagian sebelumnya membahas cara men-debug halaman yang dipra-render pada halaman yang memulai pra-rendering. Namun, halaman pra-rendering juga dapat memberikan informasi proses debug, baik dengan melakukan panggilan analisis maupun dengan logging ke konsol (yang dapat dilihat seperti yang dijelaskan di bagian sebelumnya).
Selain itu, setelah halaman yang diprarender diaktifkan oleh pengguna yang membukanya, tab Pemuatan spekulatif akan menampilkan status ini, dan apakah halaman berhasil diprarender atau tidak. Jika tidak dapat dipra-render, penjelasan tentang alasannya akan diberikan:
Selain itu—seperti halnya pengambilan data—membuka halaman dengan aturan spekulasi yang tidak cocok dengan halaman saat ini akan mencoba menunjukkan 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 yang dapat dilakukan developer untuk men-debug aturan spekulasi pramuat dan pra-render. Tim kami terus berupaya mengembangkan alat untuk aturan spekulasi, dan kami ingin mendengar saran dari developer tentang cara lain yang akan membantu proses debug API baru yang menarik ini. Sebaiknya developer melaporkan masalah di issue tracker Chrome untuk permintaan fitur atau bug yang ditemukan.
Ucapan terima kasih
Gambar thumbnail oleh Nubelson Fernandes di Unsplash.