Cara Memuat Halaman Web Secara Instan (Teknik & Alat Pakar)
Diterbitkan: 2024-02-07Cepat. Lebih cepat. Instan.
Saat kita memasuki tahun 2024, sebuah era terobosan akan segera tiba—sebuah era di mana pengunjung situs dapat mengantisipasi perubahan signifikan menuju pemuatan halaman instan yang menjadi sebuah norma baru.
Bergabunglah bersama kami saat kami menjelajahi evolusi penjelajahan web dan memperluas cara Anda dapat menghadirkan pengalaman instan kepada pengunjung situs Anda.
Apa Artinya Memuat Halaman Secara Instan?
Memuat halaman secara instan mengacu pada tampilan halaman web yang cepat dan lancar berdasarkan permintaan pengguna. Sederhananya, mencapai waktu buka mendekati 0 detik ketika pengunjung situs memuat halaman dari situs web Anda.
Mencapai pemuatan halaman instan melibatkan pengoptimalan berbagai sumber daya backend dan frontend, seperti meminimalkan ukuran file, memanfaatkan cache browser, dan menggunakan jaringan pengiriman konten (CDN).
Baca terus untuk mengetahui tentang teknik terbaru untuk ditambahkan ke kotak alat pengoptimalan Anda.
Mengapa Pemuatan Halaman Instan Penting?
Tujuannya adalah untuk meningkatkan pengalaman pengguna dengan menyediakan akses informasi yang cepat dan responsif, yang sangat penting untuk mempertahankan keterlibatan dan kepuasan pengguna di situs web Anda.
Penelitian pengguna terbaru oleh NitroPack mengungkapkan bahwa pengunjung situs meninggalkan halaman dalam waktu 2,75 detik dan akan mengunjungi halaman 60% lebih banyak jika halaman berikutnya dimuat dalam waktu kurang dari 3 detik.
Menawarkan pengalaman instan juga berdampak positif pada cara pengguna sebenarnya berinteraksi dengan situs web Anda, sehingga secara khusus lulus Core Web Vitals dan Largest Contentful Paint.
Dikenal sebagai metrik kinerja yang paling menantang, LCP adalah aspek yang kompleks untuk dioptimalkan dan, untungnya, sangat dipengaruhi oleh teknik pemuatan instan.
Tantangan Dalam Penjelajahan Web Saat Ini
Meskipun teknisi jaringan melakukan yang terbaik untuk mengkompensasi kelemahan yang melekat pada World Wide Web, 53% pengguna seluler mengharapkan pemuatan halaman yang cepat dalam 3 detik atau kurang.
Untuk menjembatani kesenjangan ini, pemilik situs saat ini menggunakan berbagai strategi untuk mengurangi waktu tunggu dan tetap kompetitif, seperti:
- Pengaturan anggaran kinerja web
- Pengoptimalan pemuatan halaman secara manual dan otomatis
- Kompresi gambar, media, dan kode
- Pengoptimalan kinerja dunia nyata (Core Web Vitals).
- Analisis perilaku pengguna, pengoptimalan perjalanan pelanggan, dan banyak lagi!
Namun, pemilik situs tidak harus bergantung pada sumber daya internal saja.
Browser seperti Google Chrome dan alat pengoptimalan seperti NitroPack semakin banyak menemukan cara untuk membantu mempercepat waktu pemuatan, dengan tujuan untuk “pengalaman instan” yang sulit dipahami.
Bergabunglah dalam daftar tunggu pengoptimal bertenaga AI pertama, Navigation AI dari NitroPack, untuk membuka pengalaman instan otomatis →
Teknik Pemuatan Halaman Instan Manual
Memanfaatkan Kemampuan Browser Dan Petunjuk Sumber Daya
Salah satu cara untuk mengatasi pengalaman penjelajahan instan adalah mengoptimalkan situs web Anda untuk navigasi cepat di masa mendatang.
Pemuatan halaman web selanjutnya setelah Anda membuka situs web.
Petunjuk sumber daya seperti link rel=prefetch adalah API yang mudah diterapkan dengan prioritas lebih rendah dalam rendering halaman web. Itu ditambahkan ke HTML situs web Anda dan didukung dengan cukup baik oleh browser (Safari tertinggal).
Diperkenalkan oleh Barry Pollard sendiri, perkembangan menarik terbaru di Chromium adalah Speculation Rules API.
Speculation Rules API adalah API yang lebih baru dan lebih spesifik untuk melakukan prefetching atau pra-render seluruh halaman web. Ini adalah API berbasis JSON yang memungkinkan penentuan tautan yang telah dibuat sebelumnya atau yang telah diprarender dan banyak kasus penggunaan tingkat lanjut.
Dengan menggunakan Speculation Rules API, Anda dapat memperkirakan waktu pemuatan halaman awal yang jauh lebih cepat dari 2,5 detik dan bahkan mendekati beberapa milidetik pertama. Hal ini dimungkinkan dengan memanfaatkan API untuk menentukan daftar URL ke halaman web untuk prarender atau pengambilan awal, yang akan dijalankan browser di latar belakang.
Pada akhir Januari 2024, Speculation Rules API memiliki penyempurnaan baru yang pada dasarnya memberi kita kontrol lebih besar atas URL dengan menambahkannya ke dokumen, bukan ke daftar. Hal ini memungkinkan kami menentukan pemicu dan prioritas eksekusi URL yang disertakan untuk halaman dan elemen pada halaman oleh browser. Anda kemudian dapat menentukan tingkat “keinginan”, yang pada dasarnya mewakili seberapa yakin Anda bahwa pengguna akan mengeklik tautan tersebut.
Membuka Kunci Pemuatan Halaman Instan Di WordPress
Adam Silverstein mengungkapkan tim Kinerja WordPress sedang mengerjakan implementasi yang lebih stabil dari Speculation Rules API 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 hindari atau prioritaskan (yaitu, hindari pra-penguraian dan pengambilan keranjang belanja tetapi prioritaskan navigasi masa depan yang jelas)
Tim Kinerja 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.

Cara Memuat Halaman Secara Instan Di Situs Web Apa Pun Secara Otomatis
Memperkenalkan AI Navigasi oleh NitroPack (dalam versi beta)
Navigasi AI adalah produk terbaru NitroPack. Ini adalah pengoptimal penjelajahan web bertenaga AI yang secara aktif memprediksi dan menganalisis perilaku pengguna untuk melakukan pra-render seluruh halaman selama perjalanan pelanggan. AI Navigasi memungkinkan pemilik situs menawarkan pengalaman penjelajahan instan di desktop dan seluler, sehingga meningkatkan keterlibatan pelanggan dan tingkat konversi.
Bergabunglah dalam daftar tunggu untuk Navigasi AI dan persiapkan situs Anda untuk pengalaman pengguna instan →
Bagaimana cara kerja AI Navigasi?
Navigasi AI oleh NitroPack dibangun berdasarkan Speculation Rules API dan menawarkan solusi otomatis untuk mencapai keseimbangan imbalan tinggi dan risiko rendah antara halaman yang dipra-pra-render dan yang tidak di-pra-render. Ini diimplementasikan oleh cuplikan JavaScript ramping dan sepenuhnya agnostik platform saat beroperasi di browser.
Navigasi AI mampu menyelesaikan persamaan kompleks ini dengan membagi seluruh proses menjadi dua fase:
Fase pertama: Menerapkan prediksi awal yang disempurnakan dengan AI pada pemuatan halaman berdasarkan data tanpa meneruskannya ke Speculation Rules API (agar tidak membebani browser)
Fase kedua: Menganalisis perilaku pengguna, menyesuaikan prediksi, dan menginstruksikan API Aturan Spekulasi untuk melakukan pra-render (atau mengambil terlebih dahulu) halaman setelah kami yakin tindakan selanjutnya yang akan dilakukan.
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.
Apa yang membuat Navigasi AI begitu canggih? (+Data)
AI Navigasi mengukur keberhasilan berdasarkan tiga metrik khusus:
Ketepatan prediksi: berapa banyak dari seluruh interaksi pengguna yang berhasil diprediksi oleh AI Navigasi
Ketepatan yang terbuang: berapa banyak dari semua interaksi pengguna yang gagal diprediksi oleh AI Navigasi, sehingga membebani browser
Rasio kehormatan browser: menandakan apakah halaman benar-benar dipra-render/diambil terlebih dahulu dengan benar (jika tidak, kami masuk untuk memeriksa efisiensi browser atau kekuatan jaringan pengguna untuk membantu AI Navigasi beradaptasi dengan situasi serupa)
Berdasarkan 1.200 situs web, Navigation AI sudah menunjukkan hasil yang spektakuler.
Navigasi AI Hasil Dunia Nyata
Hasil #1:Halaman web yang menggunakan Navigation AI secara konsisten menunjukkan waktu buka ~2,86 detikVS 6,12 detik tanpa Navigation AI
Hasil #2: Dengan Navigasi AI, halaman yang diprarender menunjukkanpeningkatan 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%
Waktu muat halaman awal yang cepat, tata letak yang stabil, dan respons yang cepat terhadap interaksi memberdayakan pemilik situs untuk membuat pengguna senang dan terlibat lebih lama dan pada akhirnya melakukan konversi pada tingkat yang lebih tinggi.
Teknik Pemuatan Instan: Akurasi dan Pengorbanan
Mencapai keseimbangan yang tepat dalam memutuskan halaman mana yang akan diprarender/diambil terlebih dahulu berkaitan dengan seberapa baik Anda memahami perilaku pengguna. Pendekatan manual memerlukan pertimbangan yang cermat terhadap pengalaman pengguna di masa lalu dan analisis data untuk mencapai skenario “risiko menengah, imbalan menengah”.
Idealnya, Anda ingin menggandakan peta panas dan menjelajahi apa yang dilakukan pengguna di halaman web Anda – di mana mereka mengeklik, seberapa jauh mereka menggulir ke bawah, dan apa yang cenderung mereka abaikan.
Karena browser dapat menangani permintaan prarender/pengambilan awal dalam jumlah terbatas, pemilik situs dan pengembang harus:
Kecualikan rute seperti tautan logo, halaman keluar, halaman pembelian yang berhasil, halaman tambahkan ke keranjang, dll.
Prioritaskan rute seperti tombol ajakan bertindak (CTA) utama, halaman pelajari lebih lanjut, navigasi logis selanjutnya, dll.
Alternatifnya, Anda dapat mendelegasikan kemampuan pengolahan data dan prediksi ke alat otomatis seperti Navigation AI.
FAQ
Apakah halaman pra-perenderan/pengambilan awal di latar belakang ditampilkan di Analytics?
Jika pengguna belum membuka halaman yang dimaksud, hal itu tidak diperhitungkan dalam analisis, seperti Google Analytics, misalnya. Ingatlah bahwa Speculation Rules API masih dalam tahap awal, dan bergantung pada penyedia analisis yang Anda gunakan, mereka mungkin memutuskan untuk menyertakan data ini dengan cara tertentu. Untuk saat ini, laman yang diprarender/diambil sebelumnya hanya diperhitungkan dalam Laporan Pengalaman Pengguna Chrome (CrUX) jika pengguna benar-benar telah membukanya.
Berapa lama browser menyimpan versi halaman yang dipra-render dalam cache?
Pengembang tidak memiliki kendali atas durasinya. Namun, Chrome menyimpan semua versi cache dari halaman yang dipra-render yang tidak dipilih oleh pengguna dalam cache HTTP. Dengan cara ini, mereka tetap lebih cepat dimuat jika pengguna memutuskan untuk kembali lagi nanti.
Seberapa berat AI dalam AI Navigasi yang meninjau tindakan pengguna?
AI ditangani sepenuhnya oleh server NitroPack dan tidak dijalankan di browser. JavaScript AI Navigasi hanya menggunakan hasil siap pakai yang berasal dari server NitroPack alih-alih menjalankan seluruh model AI itu sendiri.
Apakah teknik pemuatan instan berfungsi untuk halaman pertama yang dibuka pengguna (seperti halaman beranda) atau hanya untuk penjelajahan berikutnya?
Teknik pra-penguraian/pengambilan awal tidak berlaku pada kasus kunjungan situs web pertama. Namun, bilah URL Chrome mulai menggunakan pra-perenderan dengan mengenali URL yang sering kita telusuri dan memuatnya terlebih dahulu
Misalnya, mengetikkan www.goo kemungkinan besar akan memicu laman www.google.com dimuat di latar belakang (tentu saja bergantung pada aktivitas pencarian masing-masing pengguna).
Saat ini, ada juga eksplorasi tentang bagaimana bilah mesin pencari Google dapat memasukkan pra-perenderan.