Men-debug aturan spekulasi dengan Chrome DevTools

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 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 pra-rendering, karena halaman ini dirender di perender terpisah—seperti tab latar belakang tersembunyi yang menggantikan tab saat ini saat diaktifkan. Oleh karena itu, opsi DevTools yang 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 "pra-" persyaratan

Ada banyak "pra-" istilah yang membingungkan, jadi kami akan mulai dengan penjelasan tentang:

  • Pengambilan data: mengambil resource atau dokumen terlebih dahulu untuk meningkatkan performa pada masa mendatang. Postingan ini membahas pengambilan data dokumen menggunakan Speculation Rules API, dan bukan opsi <link rel="prefetch"> yang serupa tetapi lebih lama, yang sering digunakan untuk pengambilan data subresource.
  • Pra-rendering: Langkah ini lebih dari sekadar pengambilan data dan benar-benar merender seluruh halaman seolah-olah pengguna telah membuka halaman tersebut, tetapi mempertahankannya dalam proses perender 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"> lama (yang tidak lagi melakukan pra-rendering penuh).
  • Sekulasi navigasi: istilah kolektif untuk opsi pengambilan data dan pra-rendering baru yang dipicu oleh aturan spekulasi.
  • Pramuat: istilah kelebihan beban yang dapat merujuk pada sejumlah teknologi dan proses termasuk <link rel="preload">, pemindai pramuat, dan pramuat navigasi pekerja layanan. Item-item ini tidak akan dibahas di sini, tetapi istilah ini disertakan untuk secara jelas membedakan item-item tersebut dari "spekulasi navigasi" jangka panjang.

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 diambil data sebelumnya:

<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 hasilnya disimpan dalam 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 lainnya:

Panel jaringan di Chrome DevTools yang menampilkan dokumen yang diambil sebelumnya
Panel jaringan di Chrome DevTools menampilkan dokumen yang telah diambil sebelumnya

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 akan 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:

Header pengambilan data Chrome DevTools dengan Sec-Destination disetel ke pengambilan data
Header pengambilan data Chrome DevTools dengan Sec-Destination disetel ke pengambilan data

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 membantu proses debug aturan spekulasi:

Tab pemuatan spekulatif Chrome DevTools menampilkan aturan pengambilan data
Tab pemuatan spekulatif Chrome DevTools menampilkan aturan pengambilan data

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.
  • Speculations yang mencantumkan semua URL yang telah diambil sebelumnya dan yang dipra-render dari kumpulan aturan.

Tab Speculations ditampilkan pada screenshot sebelumnya, dan kita dapat melihat halaman contoh ini memiliki satu set aturan spekulasi untuk pengambilan data 3 halaman. Dua pengambilan data tersebut berhasil dan satu lagi gagal. Ikon selain Kumpulan aturan dapat diklik untuk mengarahkan Anda ke sumber aturan yang ditetapkan 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 URL tersebut berasal (karena mungkin ada beberapa URL di halaman), dan status setiap spekulasi:

Tab Speculations di Chrome DevTools menampilkan URL yang telah diambil sebelumnya beserta statusnya
Tab Speculations di Chrome DevTools menampilkan URL yang telah diambil sebelumnya beserta statusnya

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 memberi Anda 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 yang diambil data sebelumnya, Anda akan melihat pesan berhasil saat halaman tersebut dibuka:

Tab Pemuatan spekulatif Chrome DevTools yang menampilkan pengambilan data yang berhasil
Tab Pemuatan spekulatif Chrome DevTools menunjukkan pengambilan data yang berhasil

Spekulasi yang tidak tertandingi

Saat navigasi terjadi dari halaman dengan aturan spekulasi yang tidak menyebabkan penggunaan pengambilan data atau pra-rendering, bagian tab tambahan 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.

Tab pemuatan Spekulatif Chrome DevTools, menunjukkan bagaimana URL saat ini tidak cocok dengan URL mana pun di aturan spekulasi halaman sebelumnya
URL yang tidak cocok ditandai di DevTools

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 Pemuatan spekulatif 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:

Panel Jaringan Chrome DevTools menampilkan pengambilan data yang gagal
Panel Jaringan Chrome DevTools menampilkan pengambilan data yang gagal

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). Cara ini dapat memberikan pengalaman pemuatan instan, meskipun dengan biaya resource tambahan.

Namun, tidak seperti pengambilan data, pengambilan data tidak tersedia untuk dilihat di panel Network, karena pengambilan dan dirender dalam proses rendering terpisah di Chrome. Hal ini membuat tab Pemuatan spekulatif menjadi 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-rendering seperti yang ditunjukkan dengan halaman demo serupa yang mencoba melakukan pra-rendering, bukan mengambil pengambilan tiga halaman:

Spekulatif Chrome DevTools memuat tab untuk halaman dengan aturan spekulasi pra-rendering
Sekulatif Chrome DevTools memuat tab untuk halaman dengan aturan spekulasi pra-rendering

Di sini kita melihat lagi bahwa salah satu dari tiga URL gagal dipra-render, 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. Dengan begitu, browser dapat mengambilnya dari link asal yang sama pada halaman, bukan dari daftar sekumpulan 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 asal yang sama, kecuali yang dimulai dengan /not-safe-to-prerender sebagai kandidat pra-render.

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 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:

Tab Speculations di Chrome DevTools dengan sejumlah URL yang Tidak dipicu
Tab Speculations Chrome DevTools dengan sejumlah URL yang Tidak dipicu

Status Tidak dipicu karena proses pra-rendering belum dimulai. Namun, saat kursor diarahkan ke link, kita akan melihat perubahan status karena setiap URL telah dipra-render:

Tab Speculations di Chrome DevTools dengan halaman pra-rendering dipicu
Tab Speculations di Chrome DevTools dengan halaman yang dipra-render dipicu

Chrome telah menetapkan batas untuk pra-render, termasuk maksimum 2 pra-render untuk tingkat kecepatan moderate. Jadi, setelah mengarahkan kursor ke link ke-3, kita akan melihat alasan kegagalan untuk URL tersebut:

Tab Speculations di Chrome DevTools dengan pramuat yang gagal ditampilkan
Tab Speculations di Chrome DevTools dengan pramuat yang gagal ditampilkan

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 Periksa:

Chrome DevTools kini memungkinkan Anda mengganti perender yang informasinya ditampilkan
Chrome DevTools kini memungkinkan Anda mengganti perender yang menampilkan informasi

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 dipra-render:

Panel Jaringan Chrome DevTools menampilkan permintaan jaringan untuk halaman yang dipra-render
Panel Jaringan Chrome DevTools menampilkan permintaan jaringan untuk halaman yang dipra-render

Dengan melihat header HTTP untuk resource ini, kita dapat melihat bahwa semuanya akan ditetapkan dengan header Sec-Purpose: prefetch;prerender:

Panel Jaringan Chrome DevTools yang menampilkan header Sec-Destination untuk halaman yang dipra-render
Panel Jaringan Chrome DevTools menampilkan header Sec-Destination untuk halaman yang dipra-render

Atau panel Elements, tempat Anda dapat melihat konten halaman, seperti di screenshot berikut tempat kita melihat elemen <h1> adalah untuk halaman yang dipra-render:

Panel Elemen Chrome DevTools untuk halaman yang dipra-render
Panel Elemen Chrome DevTools untuk halaman yang dipra-render

Atau di panel Konsol, Anda dapat melihat log konsol yang ditampilkan oleh halaman yang dipra-render:

Panel Console Chrome DevTools menampilkan output konsol dari halaman yang dipra-render
Panel Konsol Chrome DevTools menampilkan output konsol dari 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 pra-rendering diaktifkan oleh pengguna yang membukanya, tab Pemuatan spekulatif akan menampilkan status ini, dan apakah halaman berhasil dipra-render atau tidak. Jika tidak dapat diberikan penjelasan terlebih dahulu mengenai penyebabnya:

Tab Pemuatan spekulatif Chrome DevTools yang menampilkan halaman pra-rendering yang berhasil dan gagal
Tab Pemuatan spekulatif Chrome DevTools yang menampilkan halaman pra-rendering yang berhasil dan gagal

Selain itu—seperti halnya kasus pengambilan data—menavigasi dari halaman dengan aturan spekulasi yang tidak cocok dengan halaman saat ini akan berupaya menunjukkan kepada Anda alasan URL tidak cocok dengan URL yang tercakup dalam aturan spekulasi halaman sebelumnya di tab Pemuatan spekulatif:

Tab Pemuatan spekulatif di Chrome DevTools menampilkan ketidakcocokan URL saat ini dan URL yang dicakup oleh halaman sebelumnya
Chrome DevTools menampilkan ketidakcocokan URL

Kesimpulan

Dalam postingan ini, kami telah menunjukkan berbagai cara yang dapat digunakan developer untuk men-debug aturan pengambilan data dan spekulasi pra-rendering. Tim terus berupaya membuat alat untuk aturan spekulasi, dan kami ingin mendengar saran dari para developer mengenai cara lain yang akan membantu untuk proses debug API baru yang menarik ini. Sebaiknya developer menyampaikan masalah di Issue Tracker Chrome jika ada permintaan fitur atau bug yang ditemukan.

Ucapan terima kasih

Gambar jempol oleh Nubelson Fernandes di Unsplash.