Memahami Bandwidth Rendah dan Latensi Tinggi

Anda harus memahami seperti apa rasanya menggunakan aplikasi atau situs saat konektivitas buruk atau tidak dapat diandalkan, dan membangunnya dengan cara yang sesuai. Berbagai alat dapat membantu Anda.

Menguji dengan bandwidth rendah dan latensi tinggi

Makin banyak orang menggunakan web di perangkat seluler. Bahkan di rumah, banyak orang mengabaikan broadband tetap dan menggunakan perangkat seluler.

Dalam konteks ini, penting untuk memahami seperti apa rasanya menggunakan aplikasi atau situs Anda saat konektivitas buruk atau tidak dapat diandalkan. Berbagai alat software dapat membantu Anda mengemulasi dan menyimulasikan bandwidth rendah dan latensi tinggi.

Emulasi throttling jaringan

Saat membangun atau mengupdate situs, Anda harus memastikan performa yang memadai di berbagai kondisi konektivitas. Beberapa alat dapat membantu.

Alat browser

Chrome DevTools memungkinkan Anda menguji situs dengan berbagai kecepatan upload/download dan waktu round-trip, menggunakan preset atau setelan kustom dari panel Jaringan. Lihat Mulai Menganalisis 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 Network Link Conditioner Mac

Setelan kustom Network Link Conditioner Mac

Emulasi perangkat

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

Android Emulator

Setelan Android Emulator

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

Uji dari lokasi dan jaringan yang berbeda

Performa konektivitas bergantung pada lokasi server serta jenis jaringan.

WebPagetest adalah layanan online yang dapat digunakan untuk menjalankan serangkaian uji performa 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 akan membantu Anda menyertakan pengujian konektivitas ke dalam proses build atau logging performa.

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

Proxy Fiddler

Uji di jaringan yang terganggu

Dengan proxy software dan hardware, Anda dapat mengemulasikan kondisi jaringan seluler yang bermasalah, seperti throttling bandwidth, keterlambatan paket, dan kehilangan paket secara acak. Proxy bersama atau jaringan yang lemah dapat memungkinkan tim developer menerapkan pengujian jaringan dunia nyata dalam alur kerja mereka.

Augmented Traffic Control (ATC) Facebook adalah serangkaian aplikasi berlisensi BSD yang dapat digunakan untuk membentuk traffic dan mengemulasi kondisi jaringan yang terganggu:

Augmented Traffic Control Facebook

Facebook bahkan mengadakan 2G Tuesdays untuk membantu memahami cara pengguna jaringan 2G menggunakan produk mereka. Pada hari Selasa, karyawan melihat pop-up yang memberi mereka opsi untuk menyimulasikan koneksi 2G.

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

Setelan bandwidth dan latensi proxy Charles

Informasi selengkapnya tentang Charles tersedia di codewithchris.com.

Tangani masalah konektivitas yang tidak bisa diandalkan dan "lie-fi"

Apa itu Lie-Fi?

Istilah lie-fi sudah ada sejak tahun 2008 (ketika ponsel tampak seperti ini), dan mengacu pada konektivitas yang tidak seperti yang terlihat. Browser Anda berperilaku seolah-olah memiliki konektivitas, padahal apa pun alasannya tidak.

Konektivitas yang salah ditafsirkan dapat menyebabkan pengalaman yang buruk karena browser (atau JavaScript) terus mencoba mengambil resource, bukan menyerah dan memilih penggantian yang logis. Lie-Fi sebenarnya bisa lebih buruk daripada offline; setidaknya jika perangkat benar-benar offline, JavaScript Anda dapat mengambil tindakan menghindari yang sesuai.

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

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

Gunakan waktu tunggu untuk menangani konektivitas yang terputus-putus

Sebelumnya, metode canggih yang 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 diskusi Chrome Dev Summit Jeff Posnick, Workbox: Fleksibel 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 menangani lie-fi dalam Meningkatkan pemuatan halaman.

Masukan