Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Mengoptimalkan Kinerja pada Berbagai Kondisi Jaringan

Mudah bagi kita untuk melupakan kondisi jaringan yang dihadapi oleh pengguna di perangkat seluler. Gunakan DevTools untuk mengemulasi kondisi jaringan yang berbeda. Perbaiki masalah waktu muat apa pun, maka pengguna akan berterima kasih.

TL;DR

  • Tanpa memengaruhi lalu lintas ke tab lain, mengevaluasi kinerja situs menggunakan emulator jaringan Chrome DevTools.
  • Menggunakan profil khusus yang spesifik untuk kondisi jaringan pengguna tertentu.

Mengemulasi konektivitas jaringan

Penyesuaian kondisi jaringan memungkinkan Anda menguji situs pada berbagai koneksi jaringan, termasuk Edge, 3G, dan bahkan offline. Ini juga membatasi throughput pengunduhan dan pengunggahan maksimum. Manipulasi latensi memaksa penundaan minimum pada round-trip time (RTT) koneksi.

Penyesuaian kondisi jaringan diaktifkan melalui panel Network. Pilih koneksi dari menu tarik-turun untuk menerapkan throttling jaringan dan manipulasi latensi.

Pilih Network Throttle

Tip: Anda juga bisa menyetel pembatasan jaringan melalui panel samping Network conditions.

Bila ada pembatasan yang diaktifkan, indikator panel akan menampilkan ikon peringatan. Ini untuk mengingatkan Anda bahwa pembatasan diaktifkan saat Anda berada di panel lain.

Pemilih Network Panel Dengan Indikator Peringatan

Pembatasan khusus

DevTools menyediakan dasar yang kuat pada kondisi default. Anda mungkin perlu menambahkan kondisi khusus agar bisa mencakup kondisi utama pengguna.

Untuk menambahkan kondisi, buka menu tarik-turun untuk menerapkan kondisi. Di bawah header custom, cari dan pilih opsi Add.... Ini akan membuka dialog setelan DevTools dengan tab "Throttling" terbuka.

Indeks Setelan Pembatasan

Pertama, klik tombol Add custom profile. Ini akan membuka formulir inline untuk memasukkan kondisi profil. Isilah formulir dengan akurat, lalu tekan tombol Add jika sudah sesuai dengan kebutuhan.

Setelan Pembatasan, Menambahkan Pembatasan Khusus

Anda bisa mengubah profil khusus yang sudah ada dengan mengarahkan kursor ke atas entri. Saat melakukan itu, ikon Edit dan Delete ditampilkan di sebelah kanan entri.

Setelan Pembatasan Memodifikasi Entri Khusus

Sekarang Anda bisa menutup dialog setelan. Profil khusus baru ini akan ditampilkan di bawah header custom untuk memilih kondisi.

Membuka panel samping network conditions

Anda bisa mengakses fungsi jaringan saat panel DevTools lainnya sedang terbuka, dengan panel samping Network conditions.

panel samping network conditions

Akses panel samping dari menu utama DevTools (Main Menu > More Tools > Network Conditions).

membuka panel samping network conditions