Para pengguna internet mengakses web saat ini dengan perangkat yang beragam walaupun bisa dibilang bahwa perangkat tersebut didominasi oleh mobile. Namun ragam perangkat mobile ini sendiri sebenarnya cukup beragam dan bisa kita klasifikasikan dalam perangkat tingkat atas, seperti iPhone 8/X, Samsung S9, LG G6 dan lain-lain. Lalu perangkat tingkat menengah seperti Oppo, Xiaomi, dan Vivo. Serta perangkat low end di bawah 1 juta seperti Samsung seri J.

Beradaptasi dengan perangkat

Dengan beragamnya perangkat dari pengakses web, maka sudah seharusnya kita sebagai pengembang wajib mengoptimalkan website kita untuk perangkat yang paling banyak mengakses website kita. Data perangkat ini sebenarnya bisa dilihat di Google Analytics, sehingga kita bisa memastikan web kita jalan dengan baik di perangkat populer tersebut. Cuma terkadang developer merasa bahwa kalau di perangkat milik dia jalan dengan baik, dia merasa bahwa web tersebut jalan dengan baik di semua perangkat, padahal setiap perangkat memiliki spesifikasi dan kemampuan pemrosesan yang berbeda.

image

Waktu yang diperlukan oleh perangkat untuk memproses JavaScript di CNN.com berdasarkan pengujian WebPageTest (src). Perangkat tingkat tinggi (iPhone 8) butuh ~4 detik, bandingkan dengan~13 detik di perangkat menengah (Moto G4) bahkan butuh~36 detik pada parangkat tingkat rendah (Alcatel 1X).

Berdasarkan data di atas, kita bisa melihat kecepatan perangkat memproses JavaScript berbeda beda di setiap handphone. Bahkan ada perbedaan signifikan antara perangkat tingkat atas hingga 32 detik. Dengan demikian, diperlukan optimasi lebih lanjut di sisi pengembang web untuk membuat web bisa lebih pintar dalam beradaptasi dengan kondisi ini.

Untuk bisa optimal di semua perangkat, tentunya kita perlu akses ke spesifikasi perangkat tersebut. Dan di web, ada beberapa API yang bisa kita gunakan yaitu:

Hardware concurrency
API hardware concurrency ini untuk mengetahui berapa banyak core CPU yang dimiliki oleh perangkat. const logicalProcessors = window.navigator.hardwareConcurrency

Device memory
API device memory ini untuk mengetahui berapa besar jumlah memori (GiB) atau RAM dari perangkat. const componentVersion = navigator.deviceMemory < 2? 'lite' : 'full';

Dari contoh di atas selanjutnya adalah menggunakan informasi jumlah core CPU atau memori perangkat untuk mengoptimasi konten yang akan ditampilkan. Sebagai contoh: const contentParams= {pageSize:0,showVideo:true,hiresImage:true}; if(logicalProcessors < 3 && componentVersion ==='lite){ contentParams={pageSize:10,showVideo:false,hiresImage:false}; }

Contoh di atas menggunakan informasi di cpu cores dan device memory untuk menampilkan konten versi lite bila perangkat memiliki core kurang dari 3 cores dan RAM kurang dari 2 GiB. Konten versi lite yang dimaksud adalah video diganti dengan gambar statis di-mana masih bisa diberikan link untuk memutar video, jumlah konten yang ditampilkan hanya 10 atau setengah dari seharusnya, serta hanya menampilkan gambar dengan resolusi rendah.

Kesimpulan untuk informasi perangkat Yang perlu diperhatikan dari spesifikasi perangkat adalah kemampuan perangkat untuk memproses JavaScript serta memuat konten seperti gambar dan video. Sehingga bila spesifikasi perangkat cukup rendah sebaiknya ukuran JavaScript yang di-load juga lebih kecil, serta konten media yang ditampilkan sebaiknya tidak beresolusi tinggi atau menggunakan jenis file yang optimal.

Beradaptasi dengan jaringan

Jaringan bersifat sangat dinamis, berbeda dengan perangkat yang bersifat tetap. Pada jaringan walaupun perangkat terhubung dengan wifi atau koneksi selular 4G, hal ini tidak menjamin kecepatan akses pada perangkat akan selalu cepat. Karena itu diperlukan cara untuk mengetahui kecepatan akses sebenarnya untuk melakukan sesuatu pada aplikasi web yang bergantung pada kondisi jaringan.

Network Information API Untuk mengetahui kondisi jaringan pada perangkat maka tersedia Network Information API yang bisa diakses seperti contoh berikut const networkInformation = navigator.connection

Dan informasi yang dapat diakses dari API tersebut mencakup

  • downlink, kecepatan download sebenarnya dalam megabits per second (Mbps).
  • downlinkMax, kecepatan download maksimum bergantung pada jenis koneksi. Bila koneksinya adalah 4G maka akan tercantum kecepatan maksimum pada 4G.
  • rtt, round trip time atau biasa disebut ping dalam satuan mili second(ms)
  • effectiveType, tipe kecepatan sebenarnya (‘slow-2g’, ‘2g’, ‘3g’, atau ‘4g’) yang dikalkulasi berdasarkan downlink, rtt, dan lainnya.
  • type, tipe jaringan yang sedang terhubung di mana akan menampilkan nilai salah satu dari ‘bluetooth’, ‘cellular’, ‘ethernet’,’none’,’wifi’,’wimax’,’other’, dan ’unknown’.

Nah bagaimana menggunakan informasi di atas untuk bisa membuat aplikasi web kita beradaptasi untuk kenyamanan pengguna. Yang utama dari informasi di atas menurut saya adalah effectiveType dan type. Untuk effectiveType, kita bisa mengkondisikan jenis konten yang akan ditampilkan yang sesuai dengan kecepatan jaringan sebenarnya.

Kesimpulan kecepatan jaringan Kalau spesifikasi perangkat mempengaruhi kemampuan perangkat memproses JavaScript, dan menampilkan konten. Maka kecepatan jaringan mempengaruhi waktu yang diperlukan untuk memuat konten tersebut. Karena itu untuk kecepatan jaringan rendah, sebaiknya kita memuat konten dengan ukuran lebih kecil dari seharusnya. Lalu di kecepatan tinggi kita bisa memuat konten dengan ukuran yang sebenarnya.

Adaptive Streaming

Salah satu fungsi yang digunakan dalam mengkonsumsi konten video adalah fungsi streaming. Permasalahannya kecepatan jaringan bersifat dinamis dan bisa berubah-ubah setiap waktu. Dengan menggunakan informasi effectiveType yang diperiksa secara berkala pada saat sedang streaming, kita bisa mengganti streaming kita ke bitrate yang sesuai. Misalnya bila effectiveType 4G maka kita akan memuat konten bitrate resolusi tinggi. Namun bila pada 3G kita akan memuat konten beresolusi rendah.

image

Contoh adaptive streaming yang mengecek effectiveType setiap 6 detik

Hal ini sudah diadaptasi oleh Instagram di aplikasi web mereka menggunakan Shaka Player sehingga mereka bisa memutar video di web dengan lebih lancar tanpa lagging.

Sinkronisasi data hanya di jaringan wifi

Salah satu yang bisa dilakukan juga dengan informasi type adalah untuk keperluan upload atau download file berukuran besar atau sinkronisasi data berukuran besar. Hal ini diperlukan untuk mencegah pengguna kehabisan paket data karena proses sinkronisasi data berukuran besar. if(navigator.connection.type==='wifi'){ //upload data langsung uploadData(); } else { //jadwalkan upload nanti pada saat terhubung dengan wifi. scheduleForUploadOnWifi(); }

Sinkronisasi bahkan bisa lebih baik lagi bila menggunakan service workers yang sudah didukung oleh semua browsers modern. Pada service worker ada background sync API yang bisa digunakan untuk melakukan sinkronisasi data ini di background tanpa harus membuka aplikasi web. Dan background sync API ini juga bisa diatur untuk hemat daya dan hanya jalan pada wifi saja. navigator.serviceWorker.ready.then(function(registration) { registration.periodicSync.register({ tag: 'get-latest-news', // default: '' minPeriod: 12 * 60 * 60 * 1000, // default: 0 powerState: 'avoid-draining', // default: 'auto' networkState: 'avoid-cellular' // default: 'online' }).then(function(periodicSyncReg) { // success }, function() { // failure }) });

Kesimpulan

Web harusnya bisa diakses dengan nyaman tanpa peduli jenis perangkat atau kondisi jaringan yang ada. Dengan adanya akses pengembang ke informasi spesifikasi perangkat dan kecepatan jaringan memungkinkan pengembang web bisa membuat web yang lebih pintar beradaptasi dengan kondisi spesifikasi perangkat dan jaringan dalam memuat konten yang dapat dikonsumsi oleh pengguna dengan lebih cepat dan nyaman. Dan penggunaannya bahkan bisa lebih jauh lagi seperti untuk adaptive streaming atau sinkronisasi data.

Referensi