Memahami Bandwidth Rendah dan Latensi Tinggi

Anda perlu memahami seperti apa rasanya menggunakan aplikasi atau situs saat konektivitas buruk atau tidak bisa diandalkan, dan membangunnya dengan mempertimbangkan hal itu. Ada berbagai alat yang dapat membantu Anda.

Semakin banyak orang menggunakan web di perangkat seluler. Bahkan di rumah, banyak orang meninggalkan broadband tetap demi seluler.

Dalam konteks ini, perlu dipahami seperti apa rasanya menggunakan aplikasi atau situs Anda saat konektivitas buruk atau tidak bisa diandalkan. Beragam alat software dapat membantu Anda mengemulasikan dan menyimulasikan bandwidth rendah dan latensi tinggi.

Mengemulasikan throttling jaringan

Saat mem-build atau mengupdate situs, Anda harus memastikan performa yang memadai dalam berbagai kondisi konektivitas. Beberapa alat dapat membantu.

Alat browser

Chrome DevTools memungkinkan Anda menguji situs dengan berbagai kecepatan upload/download dan waktu bolak-balik, menggunakan setelan preset atau khusus dari panel Jaringan. Lihat Memulai Analisis Performa Jaringan untuk mempelajari dasar-dasarnya.

Throttling Chrome DevTools

Alat sistem

Network Link Conditioner adalah panel preferensi yang tersedia di Mac jika Anda menginstal Hardware IO Tools untuk Xcode:

Panel kontrol Mac Network Link Conditioner

Setelan Mac Network Link Conditioner

Setelan khusus Mac Network Link Conditioner

Emulasi perangkat

Android Emulator memungkinkan Anda menyimulasikan berbagai kondisi jaringan saat menjalankan aplikasi (termasuk browser web dan aplikasi web hibrid) di Android:

Android Emulator

Setelan Android Emulator

Untuk iPhone, Network Link Conditioner dapat digunakan untuk menyimulasikan kondisi jaringan yang lemah (lihat di atas).

Menguji dari berbagai lokasi dan jaringan

Performa konektivitas bergantung pada lokasi server serta jenis jaringan.

WebPagetest adalah layanan online yang memungkinkan serangkaian uji performa dijalankan untuk situs Anda menggunakan berbagai jaringan dan lokasi host. Misalnya, Anda dapat mencoba situs dari server di India dengan jaringan 2G, atau melalui kabel dari sebuah kota di AS.

Setelan WebPagetest

Pilih lokasi dan dari setelan lanjutan, pilih jenis koneksi. Anda bahkan dapat mengotomatiskan pengujian menggunakan skrip (misalnya, untuk login ke situs) atau menggunakan RESTful API. Hal ini membantu Anda menyertakan pengujian konektivitas ke dalam proses build atau logging performa.

Fiddler mendukung proxy Global melalui GeoEdge, dan aturan kustomnya dapat digunakan untuk menyimulasikan kecepatan modem:

Proxy Fiddler

Menguji di jaringan yang lemah

Proxy software dan hardware memungkinkan Anda mengemulasikan kondisi jaringan seluler yang bermasalah, seperti throttling bandwidth, keterlambatan paket, dan kehilangan paket secara acak. Proxy bersama atau jaringan yang terganggu dapat memungkinkan tim developer menyertakan pengujian jaringan sungguhan dalam alur kerja mereka.

Augmented Traffic Control (ATC) Facebook adalah kumpulan aplikasi berlisensi BSD yang dapat digunakan untuk membentuk traffic dan mengemulasikan kondisi jaringan yang lemah:

Augmented Traffic Control Facebook

Facebook bahkan mendirikan 2G Tuesdays untuk membantu memahami cara orang menggunakan produk mereka di jaringan 2G. Pada hari Selasa, karyawan mendapatkan jendela pop-up yang memberi mereka opsi untuk menyimulasikan koneksi 2G.

Proxy HTTP/HTTPS Charles dapat digunakan untuk menyesuaikan bandwidth dan latensi. Charles adalah software komersial, tetapi tersedia versi uji coba gratis.

Setelan bandwidth dan latensi proxy Charles

Informasi selengkapnya tentang Charles tersedia di codewithchris.com.

Menangani konektivitas yang tidak dapat diandalkan dan "lie-fi"

Apa yang dimaksud dengan lie-fi?

Istilah lie-fi sudah ada sejak tahun 2008 (saat ponsel terlihat seperti ini), dan merujuk pada konektivitas yang tidak seperti kelihatannya. Browser Anda berperilaku seakan-akan memiliki konektivitas padahal tidak ada, apa pun sebabnya.

Kesalahan menafsirkan konektivitas bisa mengakibatkan pengalaman buruk karena browser (atau JavaScript) bersikeras mencoba mengambil resource, bukannya menyerah dan memilih fallback yang logis. Lie-fi sebenarnya bisa lebih buruk daripada offline; setidaknya jika perangkat benar-benar offline, JavaScript Anda dapat melakukan tindakan menghindar yang semestinya.

Lie-fi cenderung menjadi masalah lebih besar karena semakin banyak orang yang beralih ke seluler dan meninggalkan jaringan broadband tetap. Data Sensus AS terbaru menunjukkan peralihan dari broadband tetap. Grafik berikut menampilkan penggunaan internet seluler di rumah pada tahun 2015 yang dibandingkan dengan tahun 2013:

Diagram dari data sensus AS yang menunjukkan peralihan ke seluler dari broadband tetap, terutama di rumah tangga berpendapatan rendah

Menggunakan waktu tunggu untuk menangani konektivitas yang terputus-putus

Sebelumnya, metode amatiran menggunakan XHR telah digunakan untuk menguji konektivitas yang terputus-putus, tetapi pekerja layanan memungkinkan metode yang lebih andal untuk menetapkan waktu tunggu jaringan. Hal ini dapat dilakukan menggunakan Workbox hanya dengan beberapa baris kode:

workboxSW.router.registerRoute(
  '/path/to/image',
  workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);

Anda dapat mempelajari Workbox lebih lanjut dalam presentasi Chrome Dev Summit Jeff Posnick, Workbox: Flexible PWA Libraries.

Fungsi waktu tunggu juga sedang dikembangkan untuk Fetch API, dan Streams API akan membantu dengan mengoptimalkan pengiriman konten dan menghindari permintaan monolitik. Jake Archibald memberikan detail selengkapnya tentang cara mengatasi lie-fi di Mempercepat pemuatan halaman.

Masukan