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 meningkatkan Data Web Inti secara signifikan untuk navigasi halaman tambahan ini.
Men-debug aturan spekulasi bisa jadi rumit. Hal ini khususnya berlaku untuk halaman pra-rendering, karena halaman ini dirender dalam perender terpisah—seperti tab latar belakang tersembunyi yang menggantikan tab saat ini saat diaktifkan. Oleh karena itu, opsi DevTools yang biasa tidak selalu bisa digunakan untuk men-debug masalah.
Tim Chrome telah bekerja keras meningkatkan dukungan DevTools untuk proses debug aturan spekulasi. Dalam postingan ini, Anda akan melihat berbagai cara menggunakan alat ini untuk memahami aturan spekulasi halaman, mengapa mereka mungkin tidak berfungsi, dan kapan developer bisa menggunakan opsi DevTools yang lebih umum—dan kapan tidak.
Penjelasan istilah "pra-"
Ada banyak istilah "sebelum-" yang mudah disalahartikan, jadi mari kita mulai dengan penjelasan ini:
- Ambil data: mengambil resource atau dokumen terlebih dahulu untuk meningkatkan performa di masa mendatang. Postingan ini membahas pengambilan data dokumen menggunakan Speculation Rules API, bukan opsi
<link rel="prefetch">yang serupa, tetapi lebih lama, yang sering digunakan untuk pengambilan data subresource. - 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 berkaitan dengan versi Speculation Rules API yang lebih baru, bukan opsi
<link rel="prerender">lama (yang tidak lagi melakukan pra-rendering penuh). - Spekulasi navigasi: istilah kolektif untuk opsi pengambilan data dan pra-rendering baru yang dipicu oleh aturan spekulasi.
- Pramuat: istilah berlebihan yang dapat merujuk pada sejumlah teknologi dan proses termasuk
<link rel="preload">, pemindai pramuat, dan pramuat navigasi pekerja layanan. Item-item tersebut tidak akan dibahas di sini, tetapi istilah tersebut disertakan untuk secara jelas membedakannya dari istilah "spekulasi navigasi".
Aturan spekulasi untuk prefetch
Aturan spekulasi dapat digunakan untuk mengambil data dokumen navigasi berikutnya. Misalnya, saat menyisipkan JSON berikut ke halaman, next.html dan next2.html akan melakukan pengambilan data:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Menggunakan aturan spekulasi untuk pengambilan data navigasi memiliki beberapa keuntungan dibandingkan sintaksis <link rel="prefetch"> lama, seperti API yang lebih ekspresif dan hasilnya disimpan di cache memori daripada 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 lainnya:
Dua permintaan yang ditandai dengan warna merah adalah resource pengambilan data, seperti yang dapat dilihat pada kolom Jenis. Aset ini diambil dengan prioritas Lowest seperti 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:
Melakukan debug prefetch dengan tab Pemuatan spekulatif
Bagian Speculative load baru telah ditambahkan di panel Application Chrome DevTools, di bagian Background services, untuk membantu 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 telah diambil dan dipra-render dari kumpulan aturan.
Tab Spekulasi ditampilkan di screenshot sebelumnya, dan kita dapat melihat halaman contoh ini memiliki sekumpulan aturan spekulasi untuk mengambil data 3 halaman. Dua pengambilan data tersebut berhasil, sedangkan 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 Speculations yang difilter ke kumpulan aturan tersebut.
Tab Speculations mencantumkan semua URL target, bersama dengan tindakan (pengambilan data atau pra-rendering), dari kumpulan aturan mana yang berasal (karena mungkin ada beberapa 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. Mengklik URL akan memberikan 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 guna menunjukkan apakah pengambilan data atau pra-rendering digunakan untuk halaman ini atau tidak.
Untuk halaman pengambilan data, Anda akan melihat pesan yang berhasil saat halaman tersebut dibuka:
Spekulasi yang tidak cocok
Saat navigasi terjadi dari halaman dengan aturan spekulasi yang tidak menyebabkan pengambilan data atau pra-render yang digunakan, bagian tambahan dari tab akan menampilkan detail selengkapnya tentang mengapa URL tidak sesuai dengan URL spekulasi mana pun. Hal ini berguna untuk menemukan kesalahan ketik dalam aturan spekulasi.
Misalnya, di sini kita membuka next4.html, tetapi hanya next.html, next2.html, atau next3.html yang merupakan pengambilan data, sehingga kita dapat melihat ini tidak sepenuhnya cocok dengan ketiga aturan tersebut.
Tab Pemuatan spekulatif sangat berguna untuk men-debug aturan spekulasi itu sendiri, dan menemukan error sintaksis di JSON.
Sedangkan untuk pengambilan data itu sendiri, panel Network mungkin sudah dikenal luas. 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 selanjutnya.
Aturan spekulasi untuk prerender
Aturan spekulasi pra-render 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 penuh dan render halaman yang ditentukan (tunduk pada batasan tertentu). Hal ini dapat memberikan pengalaman pemuatan instan—meskipun dengan biaya resource tambahan.
Namun, tidak seperti pengambilan data, pengambilan data ini tidak dapat dilihat di panel Jaringan, 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.
Melakukan debug prerender dengan tab Pemuatan spekulatif
Layar Pemuatan spekulatif yang sama dapat digunakan untuk aturan spekulasi pra-rendering seperti yang ditunjukkan dengan halaman demo serupa yang mencoba melakukan pra-rendering, bukan pengambilan data tiga halaman:
Di sini kita melihat lagi bahwa salah satu dari tiga URL gagal melakukan pra-rendering, dan developer bisa mendapatkan detail per URL di tab Speculations dengan mengklik link 2 Ready, 1 Failure.
Di Chrome 121, kami meluncurkan dukungan aturan dokumen. Hal ini memungkinkan browser mengambilnya dari link origin yang sama pada 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 origin yang sama, kecuali link yang dimulai dengan /not-safe-to-prerender sebagai kandidat pra-rendering.
Kode ini juga menetapkan eagerness pra-rendering ke moderate yang berarti navigasi dipra-render saat link diarahkan, atau diklik.
Ada aturan serupa seperti ini di situs demo ini, dan penggunaan bagian Pemuatan spekulatif yang baru di situs ini menunjukkan manfaat tab baru ini karena semua URL yang memenuhi syarat yang ditemukan oleh browser di halaman telah dicantumkan:
Status adalah Tidak dipicu karena proses pra-render belum dimulai. Namun, saat kita mengarahkan kursor ke link, kita melihat perubahan status karena setiap URL dipra-render:
Chrome telah menetapkan batas pada pra-rendering, termasuk maksimum 2 pra-rendering untuk tingkat moderate, jadi setelah mengarahkan kursor ke link ke-3, kita melihat alasan kegagalan untuk URL tersebut:
Melakukan proses 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 dalam perender di balik layarnya sendiri.
Namun, kini Anda dapat mengalihkan perender yang digunakan oleh panel DevTools dengan menu drop-down di menu drop-down kanan atas, atau dengan memilih URL di bagian atas panel dan memilih Periksa:
Drop-down ini (dan nilai yang dipilih) dibagikan di semua panel lainnya juga, seperti panel Network, tempat Anda dapat melihat halaman yang diminta adalah halaman yang dipra-render:
Dengan melihat header HTTP untuk resource ini, kita dapat melihat bahwa semuanya akan ditetapkan dengan header Sec-Purpose: prefetch;prerender:
Atau di panel Elemen, tempat Anda dapat melihat konten halaman, seperti di screenshot berikut tempat kita melihat elemen <h1> adalah untuk halaman pra-rendering:
Atau panel Konsol, tempat Anda dapat melihat log konsol yang dimunculkan oleh halaman pra-rendering:
Men-debug aturan spekulasi pada halaman pra-rendering
Bagian sebelumnya membahas cara men-debug halaman yang dipra-render di halaman yang memulai pra-rendering. Namun, halaman pra-rendering juga dapat memberikan informasi proses debug, baik dengan melakukan panggilan analisis maupun login ke konsol (yang dapat dilihat seperti dijelaskan di bagian sebelumnya).
Selain itu, setelah halaman pra-rendering diaktifkan oleh pengguna yang membuka halaman tersebut, tab Pemuatan spekulatif akan menampilkan status ini, dan apakah halaman tersebut berhasil dipra-render atau tidak. Jika tidak dapat dipra-render, penjelasan mengapa hal itu terjadi:
Selain itu—seperti yang terjadi pada pengambilan data—membuka halaman dengan aturan spekulasi yang tidak cocok dengan halaman saat ini akan berupaya menunjukkan kepada Anda alasan URL tidak sesuai dengan 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 pra-rendering dan pengambilan data. Tim ini terus mengerjakan alat untuk aturan spekulasi, dan kami ingin mendengar saran dari developer mengenai cara lain yang akan berguna untuk melakukan proses debug API baru yang menarik ini. Sebaiknya developer melaporkan masalah di Issue Tracker Chrome untuk setiap permintaan fitur atau bug yang ditemukan.
Ucapan terima kasih
Gambar Thumbail oleh Nubelson Fernandes di Unsplash.