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 cara mengoptimalkan aplikasi web dengan pemisahan kode dan potensi implikasi performa untuk navigasi halaman berikutnya. Di bagian kedua diskusi ini, saya membahas cara meningkatkan kecepatan navigasi dengan menggunakan Guess.js untuk menyiapkan pengambilan data prediktif:

Pemisahan kode untuk aplikasi web yang lebih cepat

Aplikasi web lambat, dan JavaScript merupakan salah satu resource paling mahal yang Anda kirim. Menunggu pemuatan aplikasi web yang lambat dapat membuat pengguna kesal dan menurunkan konversi.

Aplikasi web yang lambat bisa membuat stres.

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

  • Pemisahan kode tingkat komponen
  • Pemisahan kode tingkat rute

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

Namun, dengan pemisahan kode tingkat rute, Anda akan memindahkan seluruh rute menjadi bagian independen. Saat pengguna bertransisi dari satu rute ke rute lain, mereka harus mendownload JavaScript yang terkait dan melakukan bootstrap dari halaman yang diminta. Operasi ini dapat menyebabkan penundaan yang signifikan, terutama di jaringan yang lambat.

Pengambilan Data JavaScript

Pengambilan data memungkinkan browser mendownload dan meng-cache sumber daya yang mungkin akan segera dibutuhkan pengguna. Metode yang biasa adalah menggunakan <link rel="prefetch">, tetapi ada dua kesalahan umum:

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

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

Contoh pra-pengambilan

Pengambilan 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 mengambil data secara cerdas hanya yang mungkin diperlukan pengguna.

Guess.js memiliki integrasi dengan Angular, Next.js, Nuxt.js, dan Gatsby. Untuk menggunakannya di aplikasi Anda, tambahkan baris berikut 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 tentang cara mengintegrasikan Guess.js dengan kerangka kerja favorit Anda, lihat sumber 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. Fungsi ini terlebih dahulu mengekstrak data untuk pola navigasi pengguna dari penyedia analisis favorit Anda.
  2. Kemudian, kode ini akan memetakan URL dari laporan ke potongan JavaScript yang dihasilkan oleh webpack.
  3. Berdasarkan data yang diekstrak, fitur ini membuat model prediktif sederhana tentang halaman yang kemungkinan besar dibuka pengguna dari halaman tertentu.
  4. Fungsi ini memanggil model untuk setiap potongan JavaScript, memprediksi potongan lain yang mungkin diperlukan berikutnya.
  5. Ia menambahkan instruksi pengambilan data ke setiap potongan.

Setelah Guess.js selesai, setiap potongan akan berisi instruksi pengambilan data 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 potongan a.js dengan probabilitas 0.2 dan potongan b.js dengan probabilitas 0.8.

Setelah browser mengeksekusi kode, Guess.js akan memeriksa kecepatan koneksi pengguna. Jika sudah cukup, Guess.js akan menyisipkan dua tag <link rel="prefetch"> di header halaman, satu untuk setiap bagian. Jika pengguna berada di jaringan berkecepatan tinggi, Guess.js akan mengambil data kedua bagian. Jika pengguna memiliki koneksi jaringan yang buruk, Guess.js hanya akan mengambil data potongan b.js karena kemungkinan besar akan diperlukan.

Selengkapnya

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