Pemuatan adaptif: meningkatkan performa web di perangkat yang lambat

Pelajari cara memastikan setiap pengguna mendapatkan pengalaman terbaik dengan mengoptimalkan situs Anda untuk batasan jaringan dan hardware tertentu.

Kemampuan perangkat dan koneksi jaringan sangat bervariasi. Situs yang memuaskan pengguna di perangkat kelas atas dapat tidak dapat digunakan di perangkat kelas bawah. Situs yang dimuat dengan lancar di jaringan cepat dapat berhenti di jaringan lambat. Setiap pengguna dapat mengalami situs yang lambat, itulah sebabnya mengembangkan solusi "satu ukuran cocok untuk semua" mungkin tidak selalu berhasil.

Dalam diskusi Chrome Dev Summit, Addy Osmani dari Google dan Nate Schloss dari Facebook mengeksplorasi solusi untuk masalah tersebut—sebuah pola untuk menghadirkan halaman yang dapat mengakomodasi berbagai kendala pengguna dengan lebih baik. Mereka menyebutnya pemuatan adaptif.

Apa yang dimaksud dengan pemuatan adaptif?

Pemuatan adaptif melibatkan pengiriman pengalaman yang berbeda kepada pengguna yang berbeda berdasarkan batasan jaringan dan hardware mereka, khususnya:

• Pengalaman inti yang cepat untuk semua pengguna (termasuk perangkat kelas bawah).

• Menambahkan fitur khusus kelas atas secara bertahap, jika jaringan dan hardware pengguna dapat menanganinya.

Dengan mengoptimalkan batasan hardware dan jaringan tertentu, Anda memungkinkan setiap pengguna mendapatkan pengalaman terbaik untuk perangkat mereka. Menyesuaikan pengalaman dengan batasan pengguna dapat mencakup:

• Menayangkan gambar dan video berkualitas rendah pada jaringan yang lambat.

• Memperlambat kecepatan frame animasi di perangkat kelas bawah.

• Menghindari operasi komputasi yang mahal pada perangkat kelas bawah.

• Memblokir skrip pihak ketiga di perangkat yang lebih lambat.

• Memuat JavaScript non-penting untuk interaktivitas hanya di CPU yang cepat.

Dukungan browser dan cara menerapkan pemuatan adaptif

Sinyal yang dapat Anda gunakan untuk pemuatan adaptif tercantum di bawah. Dukungan browser juga disertakan untuk setiap sinyal:

Navigator.deviceMemory

Properti navigator.deviceMemory digunakan untuk mengurangi konsumsi memori pada perangkat kelas bawah.

Navigator.hardwareConcurrency

Properti navigator.hardwareConcurrency adalah jumlah core CPU. Ini digunakan untuk membatasi eksekusi JavaScript yang mahal dan mengurangi logika yang intensif CPU saat perangkat tidak dapat menanganinya dengan baik.

NetworkInformation.effectiveType

Properti navigator.connection.effectiveType digunakan untuk meningkatkan transfer data agar menggunakan lebih sedikit bandwidth.

NetworkInformation.saveData

Properti navigator.connection.saveData digunakan untuk memanfaatkan preferensi Penghemat Data pengguna.

Ada dua tempat yang dapat Anda gunakan untuk membuat keputusan tentang apa yang akan ditayangkan kepada pengguna: klien dan server. Di klien, Anda memiliki JavaScript API yang disebutkan di atas. Di server, Anda dapat menggunakan petunjuk klien untuk mendapatkan insight tentang kemampuan perangkat pengguna dan jaringan yang tersambung.

Pemuatan adaptif di React

React Adaptive Loading Hooks & Utilities adalah rangkaian untuk ekosistem React yang memudahkan adaptasi situs Anda ke perangkat bawah. Ini mencakup:

• Hook useNetworkStatus() untuk beradaptasi berdasarkan status jaringan (slow-2g, 2g, 3g, atau 4g).

• Hook useSaveData() untuk beradaptasi berdasarkan preferensi Penghemat Data pengguna.

• Hook useHardwareConcurrency() untuk beradaptasi berdasarkan jumlah core prosesor CPU logis pada perangkat pengguna.

• Hook useMemoryStatus() untuk beradaptasi berdasarkan memori perangkat (RAM) pengguna.

Setiap hook menerima argumen opsional untuk menetapkan nilai awal. Opsi ini berguna dalam dua skenario: saat browser pengguna tidak mendukung API yang relevan dan untuk rendering sisi server tempat Anda dapat menggunakan data petunjuk klien untuk menetapkan nilai awal di server. Misalnya, hook useNetworkStatus() dapat menggunakan nilai awal yang diteruskan dari petunjuk klien untuk rendering sisi server dan, saat dieksekusi di klien, memperbarui dirinya sendiri jika jenis efektif jaringan berubah.

Hook & Utilitas Pemuatan Adaptif React diterapkan menggunakan API platform web (Informasi Jaringan, Memori Perangkat dan Konkurensi Hardware). Anda dapat menggunakan API yang sama untuk menerapkan konsep pemuatan adaptif ke framework dan library lain, seperti Angular, Vue, dan lainnya.

Cara kerja pemuatan adaptif

Bagian ini membahas demo tentang cara menggunakan pemuatan adaptif dan contoh dunia nyata dari situs seperti Facebook, eBay, Tinder, dan lainnya.

Demo React Movie menunjukkan cara menyesuaikan penayangan media berdasarkan status jaringan. Ini adalah aplikasi untuk menjelajahi film yang menampilkan poster, ringkasan, dan daftar pemeran. Berdasarkan jenis koneksi efektif pengguna, poster berkualitas tinggi akan ditayangkan di koneksi cepat dan poster berkualitas rendah di poster lambat.

Twitter memiliki mode Penghemat Data yang dirancang untuk mengurangi jumlah data yang digunakan. Dalam mode ini, gambar pratinjau dimuat dalam resolusi rendah dan gambar besar hanya dimuat saat Anda mengetuk pratinjau. Dengan mengaktifkan opsi ini, pengguna di iOS dan Android menghemat 50% penggunaan data dari gambar, dan pengguna di web menghemat 80%. Berikut adalah demo React yang menggunakan hook Save Data untuk mereplikasi linimasa Twitter. Coba buka panel Jaringan DevTools dan lihat perbedaan jumlah data yang ditransfer saat Anda men-scroll saat Simpan Data dinonaktifkan dibandingkan saat diaktifkan.

eBay mengaktifkan dan menonaktifkan fitur secara kondisional seperti zoom saat hardware atau kondisi jaringan pengguna tidak mendukungnya dengan baik. Anda dapat melakukannya melalui pemisahan kode dan pemuatan kode adaptif—cara untuk memuat komponen yang lebih interaktif secara kondisional atau menjalankan operasi yang lebih berat secara komputasi di perangkat kelas atas, sekaligus tidak mengirim skrip tersebut ke pengguna di perangkat yang lebih lambat. Tonton videonya di menit 16 saat Addy menunjukkan pola ini yang diterapkan dengan React.lazy() dan Suspense di halaman produk eBay demo.

Tinder menggunakan sejumlah pola pemuatan adaptif di web dan aplikasi Lite untuk menjaga pengalaman tetap cepat bagi semua orang. Jika pengguna menggunakan jaringan lambat atau mengaktifkan Penghemat Data, mereka akan menonaktifkan pemutaran otomatis video, membatasi pramuat rute, dan membatasi pemuatan gambar berikutnya di carousel untuk memuat gambar satu per satu saat pengguna menggeser. Setelah menerapkan pengoptimalan ini, mereka melihat peningkatan signifikan dalam jumlah geser rata-rata di negara-negara seperti Indonesia.

Pemuatan adaptif di Facebook

Satu masalah yang muncul dalam pemuatan adaptif adalah mengelompokkan perangkat ke dalam class kelas atas dan kelas bawah berdasarkan sinyal yang tersedia. Pada perangkat seluler, string user-agent (UA) memberikan nama perangkat yang memungkinkan Facebook menggunakan data yang tersedia untuk publik di karakteristik perangkat untuk mengelompokkan perangkat seluler ke dalam class. Namun, di perangkat desktop, satu-satunya informasi relevan yang diberikan UA adalah sistem operasi perangkat.

Untuk mengelompokkan perangkat desktop, Facebook mencatat data tentang sistem operasi, inti CPU (dari navigator.hardwareConcurrency), dan memori RAM (navigator.deviceMemory) dalam pemantauan performanya. Melihat hubungan antara berbagai jenis hardware dan performa, mereka mengklasifikasikan perangkat ke dalam lima kategori. Dengan class hardware yang terintegrasi ke dalam pemantauan performa, mereka mendapatkan gambaran yang lebih lengkap tentang cara orang menggunakan produk Facebook, bergantung pada perangkat mereka, dan dapat mengidentifikasi regresi dengan lebih mudah.

Tonton videonya di menit 24, saat Nate menjelaskan cara Facebook menangani pengelompokan perangkat dan menggunakan pemuatan adaptif untuk animasi dan memuat JavaScript.

Pelajari pemuatan adaptif lebih lanjut

Pemuatan adaptif adalah tentang mendesain situs dengan mempertimbangkan inklusivitas. Buat pengalaman inti yang berfungsi dengan baik untuk semua orang, lalu alihkan atau tambahkan fitur yang membuatnya lebih luar biasa jika pengguna memiliki memori, CPU, atau jaringan yang cepat. Untuk mempelajari pemuatan adaptif lebih lanjut, lihat demo yang tersedia dan tonton presentasi Chrome Dev Summit: