Peningkatan pada Speculation Rules API

Barry Pollard

Tim Chrome telah mengerjakan beberapa update menarik pada Speculation Rules API yang digunakan untuk meningkatkan performa navigasi dengan pengambilan data atau bahkan melakukan pra-rendering navigasi mendatang. Peningkatan tambahan ini sekarang tersedia semua dari Chrome 122 (dengan beberapa fitur tersedia dari versi sebelumnya).

Perubahan ini membuat halaman pengambilan data dan pra-rendering jauh lebih mudah di-deploy dan tidak boros, yang kami harap akan mendorong penggunaan lebih lanjut.

Fitur tambahan

Pertama-tama adalah penjelasan tentang tambahan baru yang telah kami tambahkan ke Speculation Rules API dan cara menggunakannya. Setelah ini, kami akan menunjukkan demo sehingga Anda dapat melihat cara kerjanya.

Aturan dokumen

Sebelumnya, Speculation Rules API bekerja dengan menentukan daftar URL untuk mengambil data atau melakukan pra-rendering:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>

Aturan spekulasi bersifat semi-dinamis sehingga skrip aturan spekulasi baru dapat ditambahkan, dan skrip lama dihapus untuk menghapus spekulasi tersebut (perhatikan bahwa memperbarui daftar urls skrip aturan spekulasi yang ada tidak memicu perubahan dalam spekulasi). Namun, cara ini tetap menyerahkan pilihan URL ke situs, baik dengan mengirimkannya dari server pada waktu permintaan halaman, atau dengan membuat daftar ini secara dinamis melalui JavaScript sisi klien.

Aturan daftar tetap menjadi opsi untuk kasus penggunaan yang lebih sederhana (dengan navigasi berikutnya berasal dari sekumpulan kecil yang jelas), atau kasus penggunaan lanjutan (dengan daftar URL dihitung secara dinamis berdasarkan heuristik apa pun yang ingin digunakan pemilik situs, lalu dimasukkan ke dalam halaman).

Sebagai alternatif, dengan senang hati kami menawarkan opsi baru untuk penemuan link otomatis menggunakan aturan dokumen. Cara ini berfungsi dengan mengambil URL dari dokumen itu sendiri berdasarkan kondisi where. Hal ini dapat didasarkan pada link itu sendiri:

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": {"href_matches": "/logout/*"}}
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

Pemilih CSS juga dapat digunakan sebagai alternatif, atau bersama dengan, kecocokan href untuk menemukan link di halaman saat ini:

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "and": [
        { "selector_matches": ".prerender" },
        { "not": {"selector_matches": ".do-not-prerender"}}
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

Hal ini memungkinkan satu kumpulan aturan spekulasi digunakan di seluruh situs, bukan menggunakannya secara spesifik per halaman, sehingga memudahkan situs untuk menerapkan aturan spekulasi.

Tentu saja, pra-rendering semua link di halaman pasti akan sia-sia, jadi dengan kemampuan baru ini, kami telah memperkenalkan setelan eagerness.

Kegembiraan

Dengan jenis spekulasi apa pun, terdapat keseimbangan antara presisi dan perolehan, serta waktu tunggu. Pra-rendering semua link saat halaman dimuat berarti Anda hampir pasti akan melakukan pra-rendering link yang diklik pengguna (dengan asumsi mereka mengklik link situs yang sama di halaman), dan dengan waktu tunggu sebanyak mungkin, tetapi dengan pemborosan bandwidth yang berpotensi besar.

Di sisi lain, hanya pra-rendering setelah pengguna mengklik link dapat mencegah pemborosan, tetapi dengan mengorbankan waktu tunggu yang jauh lebih sedikit. Artinya, pra-rendering kemungkinan tidak selesai sebelum browser beralih ke halaman tersebut.

Setelan eagerness memungkinkan Anda menentukan kapan spekulasi harus dijalankan, memisahkan kapan untuk berspekulasi dari URL mana spekulasi akan dijalankan. Setelan eagerness tersedia untuk aturan sumber list dan document, serta memiliki empat setelan yang heuristik berikut dimiliki Chrome:

• immediate: Hal ini digunakan untuk berspekulasi sesegera mungkin, yaitu segera setelah aturan spekulasi diamati.
• eager: Saat ini perilakunya identik dengan setelan immediate, tetapi pada masa mendatang, kita ingin menempatkannya di antara immediate dan moderate.
• moderate: Fungsi ini melakukan spekulasi jika Anda mengarahkan kursor ke link selama 200 milidetik (atau pada peristiwa pointerdown jika lebih cepat, dan di perangkat seluler saat tidak ada peristiwa hover).
• conservative: Fungsi ini berspekulasi pada pointer atau touch down.

eagerness default untuk aturan list adalah immediate. Opsi moderate dan conservative dapat digunakan untuk membatasi aturan list ke URL yang berinteraksi dengan pengguna ke daftar tertentu. Meskipun dalam banyak kasus, aturan document dengan kondisi where yang sesuai mungkin lebih sesuai.

eagerness default untuk aturan document adalah conservative. Mengingat dokumen dapat terdiri dari banyak URL, penggunaan immediate atau eager untuk aturan document harus digunakan dengan hati-hati (lihat juga bagian batas Chrome berikutnya).

Setelan eagerness yang akan digunakan bergantung pada situs Anda. Untuk situs statis yang sangat sederhana, berspekulasi dengan lebih cepat mungkin memerlukan sedikit biaya dan bermanfaat bagi pengguna. Situs dengan arsitektur yang lebih kompleks dan payload halaman yang lebih berat mungkin lebih memilih mengurangi pemborosan dengan mengurangi frekuensi spekulasi sampai Anda mendapatkan sinyal niat yang lebih positif dari pengguna untuk membatasi pemborosan.

Opsi moderate adalah jalan tengah, dan banyak situs dapat memperoleh manfaat dari aturan spekulasi sederhana berikut yang akan melakukan pra-rendering semua link saat mengarahkan kursor atau mengarahkan ke bawah sebagai implementasi aturan spekulasi dasar yang masih andal:

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "href_matches": "/*"
    },
    "eagerness": "moderate"
  }]
}
</script>

Batas Chrome

Meskipun dengan pilihan eagerness, Chrome memiliki batasan untuk mencegah penggunaan API ini yang berlebihan:

Setelan moderate dan conservative—yang bergantung pada interaksi pengguna—bekerja dengan cara Pertama Masuk, Pertama Keluar (FIFO). Setelah mencapai batas, spekulasi baru akan menyebabkan spekulasi terlama dibatalkan dan diganti dengan spekulasi baru untuk menghemat memori.

Fakta bahwa spekulasi moderate dan conservative dipicu oleh pengguna memungkinkan kita menggunakan nilai minimum 2 yang lebih sederhana untuk menghemat memori. Setelan immediate dan eager tidak dipicu oleh tindakan pengguna, sehingga memiliki batas yang lebih tinggi karena browser tidak mungkin mengetahui setelan mana yang diperlukan dan kapan diperlukan.

Spekulasi yang dibatalkan dengan dikeluarkan dari antrean FIFO dapat dipicu lagi—misalnya dengan mengarahkan kursor ke link tersebut lagi—yang akan menyebabkan URL tersebut dispekulasi ulang. Dalam kasus ini, spekulasi sebelumnya kemungkinan menyebabkan browser meng-cache beberapa resource dalam Cache HTTP untuk URL tersebut, sehingga pengulangan spekulasi akan mengurangi jaringan secara signifikan dan menghemat waktu.

Batas immediate dan eager juga dinamis. Menghapus elemen skrip aturan spekulasi menggunakan tingkat minat ini akan menciptakan kapasitas dengan membatalkan spekulasi yang dihapus tersebut. URL ini juga dapat dispekulasi ulang jika disertakan dalam skrip URL baru dan batasnya belum tercapai.

Chrome juga akan mencegah spekulasi digunakan dalam kondisi tertentu termasuk:

• Save-Data.
• Penghemat energi.
• Batasan memori.
• Saat tombol "Pramuat halaman" dinonaktifkan (yang juga secara eksplisit dinonaktifkan oleh ekstensi Chrome seperti uBlock Origin).
• Halaman dibuka di tab latar belakang.

Semua kondisi ini bertujuan untuk mengurangi dampak spekulasi berlebihan yang akan merugikan pengguna.

source opsional

Chrome 122 membuat kunci source bersifat opsional karena hal ini dapat disimpulkan dari keberadaan kunci url atau where. Oleh karena itu, kedua aturan spekulasi ini identik:

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": { "href_matches": "/*" },
    "eagerness": "moderate"
  }]
}
</script>

<script type="speculationrules">
{
  "prerender": [{
    "where": { "href_matches": "/*" },
    "eagerness": "moderate"
  }]
}
</script>

Header HTTP Speculation-Rules

Aturan spekulasi juga dapat ditayangkan menggunakan header HTTP Speculation-Rules, bukan menyertakannya langsung di HTML dokumen. Hal ini memudahkan deployment CDN tanpa perlu mengubah konten dokumen itu sendiri.

Header HTTP Speculation-Rules ditampilkan bersama dokumen, dan mengarah ke lokasi file JSON yang berisi aturan spekulasi:

Speculation-Rules: "/speculationrules.json"

Resource ini harus menggunakan jenis MIME yang benar dan, jika resource merupakan resource lintas asal, lulus pemeriksaan CORS.

Content-Type: application/speculationrules+json
Access-Control-Allow-Origin: *

Jika ingin menggunakan URL relatif, Anda dapat menyertakan kunci "relative_to": "document" dalam aturan spekulasi. Jika tidak, URL relatif akan menjadi URL file JSON aturan spekulasi yang relatif. Tindakan ini mungkin sangat berguna jika Anda perlu memilih beberapa—atau semua—link asal yang sama.

Penggunaan ulang cache yang lebih baik

Kami telah melakukan sejumlah peningkatan untuk penyimpanan cache di Chrome sehingga pengambilan data (atau bahkan pra-rendering) dokumen akan menyimpan dan menggunakan kembali resource dalam cache HTTP. Artinya, spekulasi masih dapat memiliki manfaat di masa depan, meskipun spekulasi tersebut tidak digunakan.

Hal ini juga membuat spekulasi ulang (misalnya, untuk aturan dokumen dengan setelan tingkat keinginan moderate) menjadi jauh lebih murah, karena Chrome akan menggunakan cache HTTP untuk resource yang dapat di-cache.

Kami juga mendukung proposal No-Vary-Search baru untuk lebih meningkatkan penggunaan ulang cache.

Dukungan No-Vary-Search

Saat mengambil data atau melakukan pra-rendering halaman, parameter URL tertentu (secara teknis dikenal sebagai parameter penelusuran) mungkin tidak penting bagi halaman yang sebenarnya ditayangkan oleh server, dan hanya digunakan oleh JavaScript sisi klien.

Misalnya, parameter UTM digunakan oleh Google Analytics untuk pengukuran kampanye, tetapi biasanya tidak menghasilkan halaman yang berbeda ditampilkan dari server. Artinya, page1.html?utm_content=123 dan page1.html?utm_content=456 akan menayangkan halaman yang sama dari server, sehingga halaman yang sama dapat digunakan kembali dari cache.

Demikian pula, aplikasi mungkin menggunakan parameter URL lain yang hanya ditangani di sisi klien.

Proposal No-Variasi-Search memungkinkan server menentukan parameter yang tidak menghasilkan perbedaan dengan resource yang dikirimkan, sehingga memungkinkan browser menggunakan kembali versi dokumen yang di-cache sebelumnya, yang hanya berbeda berdasarkan parameter ini. Catatan: saat ini fungsi ini hanya didukung di Chrome (dan browser berbasis Chromium) untuk spekulasi navigasi pengambilan data.

Aturan spekulasi mendukung penggunaan expects_no_vary_search untuk menunjukkan tempat header HTTP No-Vary-Search diharapkan akan ditampilkan. Melakukan hal itu dapat lebih membantu untuk menghindari download yang tidak perlu.

<script type="speculationrules">
{
  "prefetch": [{
    "urls": ["/products*"],
    "expects_no_vary_search": "params=(\"id\")"
  }]
}
</script>

<a href="/products?id=123">Product 123</a>
<a href="/products?id=124">Product 124</a>

Dalam contoh ini, HTML halaman awal /products sama untuk ID produk 123 dan 124. Namun, konten halaman pada akhirnya akan berbeda berdasarkan rendering sisi klien menggunakan JavaScript untuk mengambil data produk menggunakan parameter penelusuran id. Jadi, kita mengambil data URL tersebut dengan segera dan URL akan menampilkan header HTTP No-Vary-Search yang menampilkan halaman dapat digunakan untuk parameter penelusuran id apa pun.

Namun, jika pengguna mengklik link mana pun sebelum pengambilan data selesai, browser mungkin tidak menerima halaman /products. Dalam hal ini, browser tidak tahu apakah akan berisi header HTTP No-Vary-Search. Kemudian, browser memiliki pilihan untuk mengambil link lagi, atau menunggu pengambilan data selesai untuk melihat apakah link berisi header HTTP No-Vary-Search. Setelan expects_no_vary_search memungkinkan browser mengetahui bahwa respons halaman diharapkan berisi header HTTP No-Vary-Search, dan menunggu hingga pengambilan data tersebut selesai.

Demo

Kami telah membuat demo di https://speculative-rules.glitch.me/common-fruits.html yang dapat digunakan untuk melihat aturan dokumen dengan penerapan setelan tingkat keinginan moderate:

Buka DevTools, klik panel Application. Kemudian, di bagian Layanan latar belakang, klik Pemuatan spekulatif, lalu panel spekulasi, dan urutkan berdasarkan kolom Status.

Saat mengarahkan kursor ke buahnya, Anda akan melihat halaman pra-rendering. Mengkliknya akan menampilkan waktu LCP yang jauh lebih cepat daripada salah satu urutan langkah, yang tidak dipra-render. Demo ini juga dijelaskan dalam video berikut:

Anda juga dapat melihat postingan blog aturan spekulasi proses debug sebelumnya untuk mengetahui informasi selengkapnya tentang cara menggunakan DevTools untuk men-debug aturan spekulasi.

Dukungan platform untuk aturan spekulasi

Meskipun aturan spekulasi relatif sederhana untuk diterapkan dengan memasukkan aturan ke dalam elemen <script type="speculationrules">, dukungan platform dapat menjadikannya peristiwa sekali klik. Kami telah bekerja sama dengan berbagai platform dan partner untuk mempermudah peluncuran aturan spekulasi.

Kami juga berupaya keras untuk menstandarkan API melalui Web Incubator Community Group (WICG) agar browser lain juga dapat menerapkan API yang menarik ini jika mereka menginginkannya.

WordPress

Tim WordPress Core Performance (termasuk developer dari Google), membuat plugin Spekulasi Rules. Plugin ini memungkinkan penambahan satu-klik yang sederhana untuk dukungan aturan dokumen ke situs WordPress mana pun. Plugin ini juga tersedia untuk diinstal melalui plugin WordPress Performance Lab, yang juga sebaiknya Anda pertimbangkan untuk diinstal karena akan membuat Anda tetap mendapatkan update terbaru tentang plugin performa terkait dari tim.

Tersedia dua kelompok setelan: Speculation mode dan Eagerness:

Untuk penyiapan yang lebih rumit—misalnya, untuk mengecualikan URL tertentu agar tidak diambil data sebelumnya atau dipra-render—baca dokumentasi.

Akamai

Akamai adalah salah satu penyedia CDN terkemuka di dunia, dan mereka telah secara aktif bereksperimen dengan Speculation Rules API selama beberapa waktu. Akamai telah merilis dokumentasi tentang cara pelanggan dapat mengaktifkan API ini di setelan CDN mereka. Mereka juga sebelumnya telah membagikan hasil mengesankan yang mungkin dicapai dengan API baru ini.

NitroPack

NitroPack adalah solusi pengoptimalan performa yang menggunakan Navigation AI kustomnya untuk memprediksi halaman mana yang akan ditambahkan ke aturan spekulasi, yang bertujuan untuk memberikan waktu tunggu yang lebih lama daripada mengarahkan kursor ke link, tetapi tanpa membuang-buang spekulasi yang tidak perlu pada semua link yang diamati. Lihat dokumentasi Nitropack Speculation Rules API untuk informasi selengkapnya. Solusi inovatif ini menunjukkan bahwa masih ada banyak aturan daftar lama yang dapat ditawarkan saat dipasangkan dengan insight khusus situs.

Tim Chrome juga bekerja sama dengan NitroPack dalam webinar untuk Speculation Rules API bagi pengguna yang mencari informasi lebih lanjut, termasuk diskusi yang bagus tentang pertimbangan yang diperlukan antara berspekulasi lebih awal dan sering, serta terlambat dan lebih jarang.

Astro

Astro menambahkan halaman pra-rendering menggunakan Speculation Rules API di 4.2 secara eksperimental, yang memungkinkan developer menggunakan Astro untuk mengaktifkan fitur ini dengan mudah, sekaligus kembali ke pengambilan data standar untuk browser yang tidak mendukung Speculation Rules API. Baca dokumentasi pra-render klien untuk mendapatkan informasi selengkapnya.

Kesimpulan

Penambahan ke Speculation Rules API ini memungkinkan penggunaan fitur performa baru yang menarik ini untuk situs secara jauh lebih sederhana, dengan meminimalkan risiko membuang-buang sumber daya dengan spekulasi yang tidak terpakai. Kami senang melihat platform yang sudah memanfaatkan API ini. Kami berharap API ini dapat diadopsi secara lebih luas pada tahun 2024, dan pada akhirnya menghasilkan performa yang lebih baik bagi pengguna akhir.

Selain peningkatan performa yang diberikan Speculation Rules API, kami juga senang melihat peluang baru yang terbuka. View Transitions adalah API baru yang memungkinkan developer menentukan transisi antar-navigasi dengan lebih mudah. Saat ini, fitur ini tersedia untuk Aplikasi Web Satu Halaman (SPA), tetapi versi multi-halaman sedang berlangsung (dan tersedia di balik tanda di Chrome). Pra-rendering adalah add-on alami pada fitur tersebut untuk memastikan tidak ada penundaan, yang akan mencegah peningkatan pengalaman pengguna yang ingin diberikan oleh transisi. Kami telah melihat situs yang bereksperimen dengan kombinasi ini.

Kami tidak sabar untuk menggunakan Speculation Rules API lebih lanjut sepanjang tahun 2024, dan akan terus memberi tahu Anda tentang peningkatan lebih lanjut yang kami lakukan pada API.

Ucapan terima kasih

Thumbnail oleh Robbie Down di Unsplash