Cara Menggunakan API Aturan Spekulasi untuk Memuat Halaman Web Secara Instan

Tahun 2024 akan menjadi saat ketika pemuatan instan menjadi standar baru dalam kinerja web, dan pemilik bisnis online mendengarkannya.

Transisi dari cepat ke instan telah dilakukan selama beberapa waktu.

Pada awal tahun 2009, upaya untuk memuat halaman lebih cepat dan efisien mengarahkan tim Chromium untuk membuat petunjuk sumber daya pertama, yang kemudian ditambahkan link rel=”prerender”.

Hal ini diharapkan memiliki dampak yang signifikan terhadap kinerja karena melibatkan pemuatan halaman berikutnya di latar belakang sebelum pengguna menavigasi ke halaman tersebut, sehingga memastikan rendering lebih cepat saat transisi terjadi.

Namun, versi pra-penguraian ini terbukti tidak cukup efisien dan tidak digunakan lagi pada tahun 2017.

Kini, Google meluncurkan pengembangan yang menjanjikan pada Speculation Rules API-nya, yang memungkinkan pendekatan yang lebih canggih untuk pra-perenderan penuh dan membuka penjelajahan web yang benar-benar lancar.

Apa Itu Aturan Spekulasi API Oleh Google?

Speculation Rules API adalah API yang ditentukan JSON yang dikembangkan oleh Google untuk meningkatkan kinerja pemuatan halaman web melalui strategi pemuatan spekulatif.

Pemuatan spekulatif melibatkan prediksi dan pramuat sumber daya untuk navigasi halaman berikutnya, sehingga menghasilkan waktu rendering yang lebih cepat dan pengalaman pengguna yang lebih baik. Google memperkenalkan API ini untuk memberi pengembang cara yang lebih fleksibel dan ekspresif dalam menentukan dokumen mana yang harus diambil atau dipra-render.

Detail penting tentang Speculation Rules API:

• Menargetkan URL Dokumen: Tidak seperti mekanisme pengambilan awal tradisional yang menargetkan file sumber daya tertentu, Speculation Rules API berfokus pada URL dokumen. Hal ini membuatnya sangat cocok untuk aplikasi multi-halaman (MPA) daripada aplikasi satu halaman (SPA).

• Pra-penguraian dan Pengambilan terlebih dahulu: API mendukung strategi pra-penguraian dan pengambilan terlebih dahulu. Pra-perenderan melibatkan pengambilan, rendering, dan memuat konten ke dalam tab yang tidak terlihat, siap untuk aktivasi hampir seketika saat pengguna menavigasi ke halaman. Sebaliknya, pengambilan awal mengunduh dan menyimpan sumber daya halaman tertentu (misalnya, dokumen, gambar, skrip, dll), mengoptimalkan waktu muat saat pengguna kemudian menavigasi ke halaman tersebut.

• Dukungan Browser: API saat ini kompatibel dengan semua browser berbasis Chromium, termasuk Chrome, Edge, Opera, Chrome Android, Opera Android, dan WebView Android. Untuk rincian kompatibilitas selengkapnya, lihat dokumentasi Mozilla:

Anda juga dapat memeriksa apakah browser mendukung API dengan kode berikut:

• Alternatif untuk Fitur yang Tidak Digunakan Lagi: Ini berfungsi sebagai alternatif terhadap teknologi lama seperti dan fitur khusus Chrome yang tidak digunakan lagi , menawarkan kinerja yang lebih baik dan sintaksis yang lebih ekspresif.
• Pertimbangan Keamanan: Pengambilan data lintas situs memiliki batasan untuk melindungi privasi pengguna. Pengambilan awal lintas situs hanya berfungsi jika pengguna tidak menyetel cookie untuk situs tujuan, sehingga mencegah potensi pelacakan aktivitas pengguna.
  

Mengapa Menggunakan API Aturan Spekulasi di Situs Web Anda?

Speculation Rules API memberdayakanpemuatan halaman hampir seketika untuk pengalaman penjelajahan yang lancar.

Peningkatan waktu muat halaman,peningkatan kepuasan pengguna , dan potensi keuntungan SEOadalah alasan kuat bagi pengembang untuk menggunakan teknologi ini.

Dengan mengurangi latensi antar navigasi halaman, pengguna menganggap situs web lebih lancar dan responsif. Hal ini terlihat jelas diCore Web Vitals situs Anda, di mana Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), dan Interaction to Next Paint (INP) menurun drastis.

Pengalaman penjelajahan instan menghasilkan rasio pentalan yang lebih rendah dan peningkatan retensi pengguna– metrik penting bagi keberhasilan platform online Anda. Dengan demikian menggarisbawahi nilai strategis dari pengintegrasian API Aturan Spekulasi.

Bagaimana Cara Kerja API Aturan Spekulasi?

API Aturan Spekulasi Google dirancang untuk menargetkan URL dokumen, bukan file sumber daya tertentu. Speculation Rules API memperkenalkan sintaksis yang lebih ekspresif dan dapat dikonfigurasi untuk menentukan dokumen mana yang harus diambil atau dipra-render.

Dengan struktur yang ditentukan dalam format JSON dalam skrip type="speculationrules", pengembang dapat mengartikulasikan aturan untuk pra-penguraian dan pengambilan terlebih dahulu. Fleksibilitas yang ditingkatkan ini memungkinkan penyesuaian pemuatan spekulatif.

Baru-baru ini, Google mengumumkan penyempurnaan baru pada Speculation Rules API di Chrome 121, yang kini menyediakan opsi untuk pencarian tautan otomatis.

Hal ini dilakukan dengan:

• Menentukan sumber dokumen
• Memilih link pada halaman berdasarkan URL atau pemilih CSS
• Menentukan tingkat “keinginan” – bersemangat (segera), sedang (saat melayang 200 md), dan konservatif (saat mouse atau mendarat)

Namun, jika Anda baru menggunakan Speculation Rules API, sebaiknya Anda menguji terlebih dahulu berbagai pengaturan di bawah.

Cara Menggunakan API Aturan Spekulasi Google

Speculation Rules API memungkinkan pengembang mengikuti pendekatan terstruktur untuk mengoptimalkan proses pra-penguraian dan pengambilan terlebih dahulu.

Mempersiapkan

Ini dimulai dengan pertama-tama membuat elemen skrip type="speculationrules" dan mendefinisikan aturan spekulasi dalam struktur JSON di dalamnya.

Aturan spekulasi dapat ditambahkan baik di kepala atau badan bingkai utama.

Penting: Aturan spekulasi di subframe tidak ditindaklanjuti, dan aturan spekulasi di halaman yang dipra-render hanya ditindaklanjuti setelah pengguna membuka halaman itu sendiri.

Aturan spekulasi dapat dimasukkan secara statis atau dinamis.

• Penyiapan statis dilakukan di HTML laman (sempurna untuk situs web yang tindakan selanjutnya memiliki kepastian tinggi, misalnya situs berita mungkin ingin melakukan pra-render sorotan untuk hari itu)
• Penyiapan dinamis dilakukan melalui JavaScript (cocok untuk situs web yang banyak menggunakan pengalaman pengguna yang dipersonalisasi)

Penting: Saat memilih penyiapan dinamis, selalu rujuk kembali dokumentasi dukungan untuk pengembangan di masa mendatang dan kasus penggunaan yang mungkin tersedia di masa mendatang.

Untuk memberi tahu browser URL mana yang harusdiprarender , Anda dapat memasukkan petunjuk JSON ke laman Anda:

Demikian pula, masukkan instruksi JSON berikut untuk melakukan prefetching :

Anda dapat menambahkan beberapa aturan spekulasi ke suatu halaman, dalam hal ini Anda akan menginstruksikan browser pada salah satu level berikut:

• Daftar URL
• Berbagai aturan spekulasi
• Beberapa daftar dalam satu set aturan spekulasi
  

Menentukan Rute Untuk Prerender/Prefetch

Menyempurnakan pemuatan spekulatif melibatkan penentuan rute untuk pra-perenderan dan pengambilan terlebih dahulu. Dengan mengkategorikan halaman berdasarkan signifikansi atau kemungkinan navigasi pengguna, pengembang dapat mengoptimalkan strategi pemuatan spekulatif.

Namun ada beberapa rute yang dianggap tidak aman, seperti:

• URL keluar;
• URL peralihan bahasa;
• URL "Tambahkan ke troli";
• URL alur masuk tempat server meminta pengiriman SMS, misalnya, ketika autentikasi dua faktor (2FA) diperlukan;
• URL yang memulai pelacakan konversi iklan sisi server;
• URL yang memicu batas penggunaan pengguna, misalnya, dengan menggunakan tunjangan artikel gratis bulanannya.

Sama halnya dengan mengecualikan laman tersebut dari cache, alasan untuk menghindari pengambilan dan prapenguraian laman tersebut terkait dengan variabel dinamis.

Ini adalah halaman sensitif konten yang nilai-nilainya diperbarui berdasarkan tindakan pengguna, dan dengan memuatnya terlebih dahulu di latar belakang, risiko menampilkan status halaman yang sudah ketinggalan zaman menjadi sangat tinggi.

Akurasi dan Trade-Off

Seperti yang disebutkan Barry Pollard dalam webinar kami tentang “Memuat Halaman Secara Instan”:

Meskipun pengambilan awal adalah pendekatan teraman yang dapat Anda duplikasi di banyak laman web, pendekatan ini juga menawarkan imbalan terendah karena hanya melibatkan pengunduhan sumber daya tertentu.

Sebaliknya, pra-penguraian satu halaman penuh menawarkan imbalan yang lebih tinggi, namun harus digunakan dengan hemat karena dapat:

• Membanjiri browser karena hanya dapat menjalankan tugas dalam jumlah terbatas di latar belakang.
• Mengkonsumsi bandwidth dan sumber daya CPU dalam jumlah besar yang dapat menyebabkan penurunan kinerja bagi pengguna di jaringan yang lebih lambat atau atau perangkat dengan sumber daya terbatas.
• Menyebabkan pemborosan sumber daya yang lebih tinggi jika pengunjung tidak membuka halaman.

Untuk menyiapkan pra-perenderan dengan benar, Anda harus mempertimbangkan perilaku pengguna dan menganalisis navigasi umum di situs Anda. Dengan menggunakan peta panas dan diagram alur Google Analytics, Anda dapat mengidentifikasi rute penting dan memulai eksperimen pemuatan prediktif.

Untuk memeriksa apakah halaman telah dipra-render, gunakan entri activationStart bukan nol dari PerformanceNavigationTiming . Ini kemudian dapat dicatat menggunakan Dimensi Kustom:

Dengan cara ini, Anda dapat mengukur rasio antara pra-perenderan dan jenis navigasi lainnya.

Selain itu, penting untuk mengukur jumlah halaman prarender yang tidak dikunjungi kemudian untuk mengoptimalkan aturan spekulasi dan mencapai rasio klik yang lebih tinggi dan mengurangi pemborosan sumber daya.

Anda dapat melakukan ini dengan mengaktifkan peristiwa analitik ketika aturan spekulasi dimasukkan untuk menunjukkan bahwa pra-perenderan telah diminta. Kemudian bandingkan jumlah peristiwa ini dengan tampilan halaman pra-perenderan yang sebenarnya.

Atau kamu bisa…

Pertimbangkan Pra-render Halaman Otomatis Dengan AI Navigasi Oleh NitroPack

Navigation AI adalah pengoptimal penjelajahan web bertenaga AI dari NitroPack yang secara aktif memprediksi dan menganalisis perilaku pengguna untuk melakukan pra-render halaman penuh selama perjalanan pelanggan.

Navigasi AI memberdayakan pemilik situs untuk menawarkan pengalaman penjelajahan instan di desktop dan selulertanpa menulis satu baris kode pun , sehingga meningkatkan keterlibatan pelanggan dan tingkat konversi.

Catatan: Navigasi AI adalah produk terpisah, tetapi 100% kompatibel dengan NitroPack dan semakin memperluas manfaat bagi pemilik situs.

Bergabunglah dalam daftar tunggu untuk Navigasi AI dan dapatkan pengalaman pengguna instan di situs Anda →

AI Navigasi oleh NitroPack dibangun berdasarkan Speculation Rules API dan menawarkan solusi otomatis untuk mencapai rasio hit yang tinggi dan efisiensi sumber daya dalam skenario pra-perenderan.

Dengan menerapkan prediksi awal yang disempurnakan dengan AI pada pemuatan halaman berdasarkan data dan menganalisis perilaku pengguna, Navigation AI dapat menyesuaikan prediksi dan secara akurat menginstruksikan Speculation Rules API untuk melakukan pra-render halaman yang benar-benar akan dikunjungi.

Hasilnya adalah pemuatan halaman seketika karena halaman ini sudah dicat di latar belakang. Pada perangkat seluler, AI Navigasi mengandalkan identifikasi lokasi pengguna pada halaman, dan mengingat area pandang yang kecil, AI dapat dengan mudah memprediksi di mana mereka akan mengetuk.

Berdasarkan 1.200 situs web, Navigation AI sudah menunjukkan hasil yang spektakuler.

• Hasil #1: Halaman web yang menggunakan Navigation AI secara konsisten menunjukkan waktu buka ~2,86 detik VS 6,12 detik tanpa Navigation AI

• Hasil #2: Dengan Navigasi AI, halaman yang diprarender menunjukkan peningkatan LCP sebesar 85% (dari 3,1 detik menjadi 0,4 detik) dan peningkatan CLS sebesar 80% (dari 0,3 detik menjadi 0,06 detik).Untuk halaman yang diambil sebelumnya, Navigation AI meningkatkan LCP sebesar 52% (dari 3,1 detik menjadi 1,5 detik).

• Hasil #3: Dengan Navigasi AI, metrik kinerja untuk seluruh situs web meningkat secara signifikan: LCP sebesar 15%, CLS sebesar 8%, dan TTFB sebesar 26%

Dapatkan akses ke Navigasi AI dengan bergabung dalam daftar tunggu kami →

API Aturan Spekulasi dan WordPress

Dalam webinar “Pemuatan Laman Instan” kami, Insinyur Hubungan Pengembang Google Adam Silverstein mengungkapkan bahwa tim Kinerja Inti WordPress sedang mengerjakan implementasi yang lebih stabil dari API Aturan Spekulasi baru.

Saat ini, fokusnya tetap pada membuat sebagian kecil fungsi API tersedia bagi pemilik situs dan pengembang di ekosistem untuk menguji efisiensi dan tingkat adopsi sebelum menjadikannya bagian dari inti. Inilah yang dapat dimanfaatkan oleh pengguna WordPress sejauh ini:

• Sebuah modul di plugin Performance Lab
• Sebuah plugin mandiri yang mengimplementasikan frontend Speculation Rules API saja (menerapkan tingkat “keinginan” yang konservatif, namun pengembang bebas mengubah perilakunya)

Rute WP-admin dikecualikan secara default, namun terserah kepada pengembang WP untuk menentukan rute yang ingin mereka prioritaskan.

Tim Kinerja Inti WordPress juga sedang mengerjakan implementasi yang lebih canggih dalam plugin di ekosistem. Hal ini bertujuan untuk meringankan beberapa pekerjaan berat yang harus dilakukan pengembang ketika menentukan rute mana yang merupakan prioritas utama dan mana yang tidak boleh dilalui.

Perbaikan Apa yang Akan Terjadi pada Aturan Spekulasi

Saat ini, aturan spekulasi terbatas pada halaman dalam tab yang sama, namun upaya sedang dilakukan untuk mengurangi pembatasan ini.

Pra-perenderan, secara default, terbatas pada halaman asal yang sama. Namun, pembaruan terkini di Chrome 119 kini mendukung pra-perenderan untuk laman lintas asal situs yang sama, sehingga memerlukan keikutsertaan melalui header HTTP.

Versi mendatang mungkin memperluas pra-perenderan ke laman lintas asal dan mengizinkannya di tab baru. API Aturan Spekulasi diatur untuk diperluas, memperkenalkan skor dan sintaksis untuk aturan dokumen dan memberikan lebih banyak fleksibilitas, seperti pra-render tautan dengan mouse ke bawah.

Eksperimen yang sedang berlangsung di Chrome mengeksplorasi fitur tambahan, dan situs dapat berpartisipasi dalam uji coba asal untuk menguji dan memberikan masukan tentang potensi penambahan di masa mendatang.