Pelajari cara memastikan setiap pengguna mendapatkan pengalaman terbaik dengan mengoptimalkan situs Anda untuk batasan hardware dan jaringan tertentu.
Kemampuan perangkat dan koneksi jaringan sangat bervariasi. Situs yang memuaskan pengguna di perangkat kelas atas mungkin tidak dapat digunakan di perangkat kelas bawah. Situs yang dapat dimuat dengan lancar pada jaringan yang cepat dapat dihentikan di jaringan yang lambat. Setiap pengguna dapat mengalami situs yang lambat. Itulah sebabnya mengembangkan solusi "satu ukuran untuk semua" mungkin tidak selalu berhasil.
Dalam bincang-bincang Chrome Dev Summit, Addy Osmani dari Google dan Nate Schloss dari Facebook mengeksplorasi solusi untuk masalah tersebut, yakni pola penayangan yang lebih mengakomodasi berbagai batasan pengguna. Mereka menyebutnya pemuatan adaptif.
Apa itu pemuatan adaptif?
Pemuatan adaptif mencakup pemberian pengalaman yang berbeda kepada pengguna yang berbeda berdasarkan batasan jaringan dan hardware mereka, khususnya:
Pengalaman core yang cepat untuk semua pengguna (termasuk perangkat kelas bawah).
Penambahan 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 di jaringan yang lambat.
Membatasi kecepatan frame animasi pada perangkat kelas bawah.
Menghindari operasi komputasi yang mahal pada perangkat kelas bawah.
Memblokir skrip pihak ketiga di perangkat yang lebih lambat.
Memuat JavaScript yang tidak penting untuk interaktivitas hanya pada CPU 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 di perangkat kelas bawah.
Navigator.hardwareConcurrency
Properti navigator.hardwareConcurrency adalah jumlah core CPU. Layanan ini digunakan untuk membatasi eksekusi JavaScript yang mahal dan mengurangi logika yang menggunakan CPU secara intensif saat perangkat tidak dapat menanganinya dengan baik.
NetworkInformation.effectiveType
Properti navigator.connection.effectiveType digunakan untuk menyesuaikan transfer data agar menggunakan lebih sedikit bandwidth.
NetworkInformation.saveData
Properti navigator.connection.saveData digunakan untuk memanfaatkan preferensi Penghemat Data pengguna.
Ada dua tempat untuk mengambil keputusan terkait konten yang akan ditayangkan kepada pengguna: klien dan server. Pada 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 terhubung dengan mereka.
Pemuatan adaptif di React
React Adaptive Loading Hooks & Utilitas adalah suite untuk ekosistem React yang mempermudah penyesuaian situs Anda ke perangkat kelas bawah. Ini mencakup:
Hook
useNetworkStatus()untuk beradaptasi berdasarkan status jaringan (slow-2g,2g,3g, atau4g).Hook
useSaveData()untuk beradaptasi berdasarkan preferensi Penghemat Data pengguna.Hook
useHardwareConcurrency()untuk beradaptasi berdasarkan jumlah inti prosesor CPU yang logis di 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 dijalankan pada klien, akan memperbarui dirinya sendiri jika
jenis efektif jaringan berubah.
React Adaptive Loading Hook & Utilitas diterapkan menggunakan API platform web (Informasi Jaringan, Memori Perangkat, dan Hardware konkurensi). Anda dapat menggunakan API yang sama untuk menerapkan konsep pemuatan adaptif ke framework dan library lain, seperti Angular, Vue, dan lainnya.
Penerapan pemuatan adaptif
Bagian ini mengeksplorasi demo tentang cara menggunakan pemuatan adaptif dan contoh dunia nyata dari situs seperti Facebook, eBay, Tinder, dan lainnya.
Demo Film React menunjukkan cara mengadaptasi 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 pada koneksi cepat dan poster berkualitas rendah pada poster yang 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 dapat menghemat penggunaan data dari gambar sebesar 50%, dan pengguna di web menghemat 80%. Berikut adalah demo React yang menggunakan hook Simpan Data untuk mereplikasi linimasa Twitter. Coba buka panel Network DevTools dan lihat perbedaan jumlah data yang ditransfer saat men-scroll saat Save Data dinonaktifkan dibandingkan saat diaktifkan.
eBay secara kondisional mengaktifkan dan menonaktifkan fitur seperti zoom saat kondisi hardware atau jaringan pengguna tidak mendukungnya dengan baik. Anda dapat mencapainya melalui pemisahan kode adaptif dan pemuatan kode—cara untuk memuat komponen yang lebih interaktif secara bersyarat atau menjalankan operasi yang lebih berat secara komputasi pada perangkat kelas atas, tanpa mengirimkan skrip tersebut kepada pengguna yang menggunakan perangkat yang lebih lambat. Lihat video pada durasi 16 menit di mana Addy menunjukkan pola ini yang diterapkan dengan React.lazy() dan Suspense di halaman produk demo eBay.
Tinder menggunakan sejumlah pola pemuatan adaptif di web dan aplikasi Lite-nya untuk menjaga pengalaman yang cepat bagi semua orang. Jika pengguna berada di jaringan yang lambat atau mengaktifkan Penghemat Data, pengguna akan menonaktifkan putar otomatis video, membatasi pengambilan data rute, dan membatasi pemuatan gambar berikutnya di carousel untuk memuat gambar satu per satu saat pengguna menggeser. Setelah menerapkan pengoptimalan ini, mereka melihat peningkatan yang 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 secara publik mengenai karakteristik perangkat untuk mengelompokkan perangkat seluler ke dalam kelas. Namun, pada 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 diintegrasikan ke dalam pemantauan performa, mereka mendapatkan gambaran yang lebih lengkap tentang cara pengguna menggunakan produk Facebook bergantung pada perangkat mereka dan dapat mengidentifikasi regresi dengan lebih mudah.
Lihat video pada 24 menit, di mana Nate membahas cara Facebook mendekati pengelompokan perangkat dan menggunakan pemuatan adaptif untuk animasi dan memuat JavaScript.
Pelajari pemuatan adaptif lebih lanjut
Pemuatan adaptif adalah mendesain situs dengan mempertimbangkan inklusivitas. Bangun pengalaman inti yang berfungsi dengan baik untuk semua pengguna, lalu alihkan atau lapisan fitur yang membuatnya semakin canggih jika pengguna memiliki memori, CPU, atau jaringan yang cepat. Untuk mempelajari pemuatan adaptif lebih lanjut, lihat demo yang tersedia dan tonton diskusi Chrome Dev Summit: