Navigasi web yang lebih cepat dengan pengambilan data prediktif

Pelajari pengambilan data prediktif dan cara Guess.js menerapkannya.

Minko Gechev

Dalam sesi Navigasi Web yang Lebih Cepat dengan Pengambilan Data Prediktif di Google I/O 2019, saya memulai dengan membahas pengoptimalan aplikasi web dengan pemisahan kode dan potensi implikasi performa untuk navigasi halaman berikutnya. Di bagian kedua presentasi, saya membahas cara meningkatkan kecepatan navigasi menggunakan Guess.js untuk menyiapkan pengambilan data prediktif:

Pemisahan kode untuk aplikasi web yang lebih cepat

Aplikasi web lambat, dan JavaScript adalah salah satu resource termahal yang Anda kirim. Menunggu aplikasi web yang lambat dimuat dapat membuat pengguna frustrasi dan mengurangi konversi.

Aplikasi web yang lambat sangat merepotkan.

Pemuatan lambat adalah teknik yang efisien untuk mengurangi byte JavaScript yang Anda transfer melalui jaringan. Anda dapat menggunakan beberapa teknik untuk memuat JavaScript secara lambat, termasuk:

  • Pemisahan kode tingkat komponen
  • Pemisahan kode tingkat rute

Dengan pemisahan kode tingkat komponen, Anda dapat memindahkan setiap komponen ke dalam bagian JavaScript terpisah. Pada peristiwa tertentu, Anda dapat memuat skrip yang relevan dan merender komponen.

Namun, dengan pemisahan kode tingkat rute, Anda memindahkan seluruh rute menjadi potongan-potongan independen. Saat bertransisi dari satu rute ke rute lainnya, pengguna harus mendownload JavaScript terkait dan mem-bootstrap halaman yang diminta. Operasi ini dapat menyebabkan penundaan yang signifikan, terutama pada jaringan yang lambat.

Mengambil JavaScript terlebih dahulu

Pengambilan data memungkinkan browser mendownload dan meng-cache resource yang kemungkinan akan segera diperlukan pengguna. Metode yang biasa digunakan adalah menggunakan <link rel="prefetch">, tetapi ada dua masalah umum:

  • Pengambilan terlalu banyak resource (overfetching) akan menghabiskan banyak data.
  • Beberapa resource yang dibutuhkan pengguna mungkin tidak pernah pengambilan data.

Pengambilan data prediktif memecahkan masalah ini dengan menggunakan laporan pola navigasi pengguna untuk menentukan aset apa yang akan diambil terlebih dahulu.

Contoh pengambilan data

Pemuatan data prediktif dengan Guess.js

Guess.js adalah library JavaScript yang menyediakan fungsi pengambilan data prediktif. Guess.js menggunakan laporan dari Google Analytics atau penyedia analisis lainnya untuk membuat model prediktif yang dapat digunakan untuk melakukan pramuat secara cerdas hanya pada hal yang kemungkinan diperlukan pengguna.

Guess.js memiliki integrasi dengan Angular, Next.js, Nuxt.js, dan Gatsby. Untuk menggunakannya di aplikasi, tambahkan baris ini ke konfigurasi webpack untuk menentukan ID tampilan Google Analytics:

const { GuessPlugin } = require('guess-webpack');

// ...
plugins: [
   // ...
   new GuessPlugin({ GA: 'XXXXXX' })
]
// ...

Jika tidak menggunakan Google Analytics, Anda dapat menentukan reportProvider dan mendownload data dari layanan favorit Anda.

Integrasi dengan framework

Untuk mempelajari lebih lanjut cara mengintegrasikan Guess.js dengan framework favorit Anda, lihat referensi berikut:

Untuk panduan singkat tentang integrasi dengan Angular, lihat video ini:

Bagaimana cara kerja Guess.js?

Berikut cara Guess.js menerapkan pengambilan data prediktif:

  1. Pertama-tama, AI akan mengekstrak data untuk pola navigasi pengguna dari penyedia analisis favorit Anda.
  2. {i>Router<i} kemudian memetakan URL dari laporan ke potongan JavaScript yang dihasilkan oleh webpack.
  3. Berdasarkan data yang diekstrak, model ini akan membuat model prediktif sederhana tentang halaman mana yang kemungkinan akan dibuka pengguna dari halaman tertentu.
  4. Model ini memanggil model untuk setiap bagian JavaScript, memprediksi bagian lain yang kemungkinan diperlukan berikutnya.
  5. Fungsi ini menambahkan petunjuk pengambilan data ke setiap bagian.

Setelah Guess.js selesai, setiap bagian akan berisi petunjuk pengambilan data sebelumnya yang mirip dengan:

__GUESS__.p(
  ['a.js', 0.2],
  ['b.js', 0.8]
)

Kode yang dihasilkan Guess.js ini memberi tahu browser untuk mempertimbangkan pengambilan data sebelumnya pada bagian a.js dengan probabilitas 0.2 dan bagian b.js dengan probabilitas 0.8.

Setelah browser mengeksekusi kode, Guess.js akan memeriksa kecepatan koneksi pengguna. Jika cukup, Guess.js akan menyisipkan dua tag <link rel="prefetch"> di header halaman, satu untuk setiap bagian. Jika pengguna menggunakan jaringan berkecepatan tinggi, Guess.js akan melakukan pramuat kedua bagian tersebut. Jika pengguna memiliki koneksi jaringan yang buruk, Guess.js hanya akan melakukan pramuat bagian b.js karena memiliki probabilitas tinggi untuk diperlukan.

Pelajari lebih lanjut

Untuk mempelajari Guess.js lebih lanjut, lihat sumber daya ini: