Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Memahami bandwith yang rendah dan respons tinggi

Sangat penting untuk memahami bagaimana rasanya aplikasi atau situs kita memiliki konektivitas yang tidak dapat diandalkan. Berikut beberapa alat yang dapat membantu Anda.

Uji dengan bandwith yang rendah dan respons tinggi

Peningkatan proporsi pengguna yang mengakses situs web berganti ke perangkat mobile. Walupun di rumah, banyak orang meninggalkan layanan broadband untuk perangkat mobile.

Dalam konteks ini, sangat penting untuk memahami seperti apa aplikasi atau situs kita ketika memiliki konektivitas yang tidak dapat diandalkan. Berikut beberapa alat yang dapat membantu Anda meniru dan mensimulasikan bandwidth rendah dan respons tinggi.

Simulasi network throttling

Ketika membangun atau memperbarui situs web, Anda harus memastikan kinerja yang memadai dalam berbagai kondisi konektivitas. Beberapa alat berikut dapat membantu

Alat peramban (browser)

Chrome DevTools memungkinkan anda untuk melakukan uji coba pada situs web dengan berbagai simulasi kecepatan proses unggah/unduh round-trip times, menggunakan pengaturan kustom atau yang sudah tersedia melalui panel Chrome DevTools Network:

Chrome DevTools throttling

Alat sistem

Network Link Conditioner adalah panel preferensi yang tersedia pad Mac jika anda memasang Hardware IO Tools untuk Xcode:

Mac Network Link Conditioner control panel

Mac Network Link Conditioner settings

Mac Network Link Conditioner custom settings

Emulasi perangkat

Android Emulator memungkinkan anda untuk melakukan simulasi pada berbagai macam kondisi jaringan saat menjalankan aplikasi (termasuk browser web dan aplikasi web hybrid) di Android:

Android Emulator

Android Emulator settings

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

Uji pada lokasi dan jaringan yang berbeda

Kinerja konektivitas tergantung pada lokasi server serta jenis jaringan.

WebPagetest adalah layanan online yang memungkinkan serangkaian tes kinerja yang akan dijalankan untuk situs Anda menggunakan berbagai jaringan dan lokasi server. Misalnya, Anda dapat mencoba situs Anda dari server di India pada jaringan 2G, atau melalui kabel dari sebuah kota di Amerika Serikat.

WebPagetest settings

Pilih lokasi dan, dari pengaturan lanjutan, pilih jenis koneksi. Anda bahkan dapat mengotomatisasi pengujian menggunakan script (misalnya, untuk masuk ke sebuah situs) atau menggunakan RESTful API mereka. Hal ini membantu Anda untuk memasukkan pengujian konektivitas ke dalam proses logging.

Fiddler mendukung proxy global melalui GeoEdge, dan aturan khusus yang dapat digunakan untuk mensimulasikan kecepatan modem:

Fiddler proxy

Uji pada jaringan yang terganggu

Software dan hardware proxy memungkinkan Anda untuk meniru kondisi jaringan seluler bermasalah, seperti bandwidth throttling, delay, dan packet loss yang acak. Sebuah proxy bersama atau gangguan jaringan dapat memungkinkan sebuah tim pengembang untuk menggabungkan pengujian jaringan dunia nyata dalam alur kerja mereka.

Facebook's Augmented Traffic Control (ATC) adalah aplikasi dengan lisensi BSD yang dapat digunakan untuk membentuk lalu lintas dan meniru kondisi jaringan yang terganggu:

Facebook's Augmented Traffic Control

Acara yang diadakan Facebook 2G Tuesdays membantu memahami bagaimana orang-orang yang berada dalam jaringan 2G menggunakan produk mereka. Pada hari Selasa, karyawan mendapatkan pop-up yang memberikan mereka pilihan untuk mensimulasikan koneksi 2G.

Charles HTTP/HTTPS proxy yang dapat digunakan untuk mengatur bandwidth dan respons. Charles adalah aplikasi komersial, tapi versi free-trial tersedia.

Charles proxy bandwidth and latency settings

Informasi lebih lanjut tentang Charles dapat dilihat di codewithchris.com.

Menangani konektivitas tidak dapat diandalkan dan "lie-fi"

Apa itu lie-fi?

Istilah lie-fi muncul sekitar tahun 2008 (ketika ponsel tampak seperti ini). Browser anda seolah-olah memiliki konektivitas, tapi ternyata tidak.

Konektivitas yang disalahartikan dapat menimbulkan pengalaman buruk karena browser (atau JavaScript) berusaha untuk mengambil sumber daya ke situs web daripada berhenti. Lie-fi sebenarnya bisa lebih buruk daripada offline; setidaknya jika perangkat pasti offline JavaScript anda dapat mengambil tindakan yang tepat untuk mengatasinya.

Lie-fi kemungkinan akan menjadi masalah yang lebih besar karena lebih banyak orang pindah ke ponsel dan jauh dari fixed broadband. Baru-baru ini Data Sensus Amerika Serikat terbaru menunjukkan pindah dari fixed broadband. Grafik berikut menunjukkan penggunaan mobile internet di rumah pada 2015 dibandingkan dengan 2013:

Chart from US census data showing the move to mobile away from fixed broadband, particularly in lower-income households

Gunakan timeout untuk menangani konektivitas yang terputus-putus

Sebelumnya, metode Hacky menggunakan XHR telah digunakan untuk menguji konektivitas terputus, tapi service worker memungkinkan metode yang lebih dapat diandalkan untuk mengatur timeout pada jaringan. Jeff Posnick menjelaskan bagaimana untuk mencapai hal ini menggunakan timeout sw-toolbox dalam salah satu presentasinya Instant Loading with Service Workers:

toolbox.router.get(
  '/path/to/image',
  toolbox.networkFirst,
  {networkTimeoutSeconds: 3}
);

Sebuah pilihan timeout juga direncanakan untuk Fetch API, dan Streams API sehingga dapat membantu dengan mengoptimalkan pengiriman konten. Jake Archibald memberikan rincian lebih lanjut tentang mengatasi lie-fi di Supercharging page load.

Translated By: