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 pembahasan, saya membahas cara meningkatkan kecepatan navigasi menggunakan Guess.js untuk menyiapkan pengambilan data prediktif:

Pemisahan kode untuk mempercepat aplikasi web

Aplikasi web berjalan lambat, dan JavaScript merupakan salah satu resource paling mahal yang Anda kirimkan. Menunggu aplikasi web yang lambat dimuat dapat membuat pengguna frustrasi dan menurunkan konversi.

Aplikasi web yang lambat dapat 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 secara 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 memindahkan seluruh rute menjadi potongan-potongan independen. Saat pengguna bertransisi dari satu rute ke rute lain, mereka harus mendownload JavaScript terkait dan melakukan bootstrap halaman yang diminta. Operasi ini dapat menyebabkan penundaan yang signifikan, terutama pada jaringan yang lambat.

Pengambilan JavaScript

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

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

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

Contoh pengambilan data

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 kemungkinan dibutuhkan 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 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>Tcpdump<i} kemudian memetakan URL dari laporan ke potongan JavaScript yang dihasilkan oleh webpack.
  3. Berdasarkan data yang diekstrak, model ini membuat model prediktif sederhana tentang halaman yang kemungkinan dibuka oleh pengguna dari halaman tertentu.
  4. Fungsi ini memanggil model untuk setiap potongan JavaScript, dengan memprediksi potongan lain yang mungkin diperlukan berikutnya.
  5. Ia menambahkan instruksi pengambilan data ke setiap potongan.

Setelah Guess.js selesai, setiap potongan akan berisi petunjuk 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 memadai, Guess.js akan menyisipkan dua tag <link rel="prefetch"> di header halaman, satu untuk setiap potongan. Jika pengguna berada di jaringan berkecepatan tinggi, Guess.js akan mengambil data kedua bagian tersebut. Jika pengguna memiliki koneksi jaringan yang buruk, Guess.js hanya akan mengambil data potongan b.js karena kemungkinan besar diperlukan.

Pelajari lebih lanjut

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