Düşük Bant Genişliği ve Yüksek Gecikmeyi Anlama

Bağlantı zayıf veya güvenilir olmadığında uygulamanızın ya da sitenizin nasıl kullanıldığını anlamak ve buna göre geliştirme yapmak önemlidir. Bu konuda size yardımcı olacak çeşitli araçlar var.

Kullanıcıların artan bir oranı web'i mobil cihazlarda kullanıyor. Evde bile birçok kullanıcı mobil için sabit geniş bandı terk ediyor.

Bu bağlamda, bağlantı zayıf veya istikrarsız olduğunda uygulamanızda veya sitenizde nasıl bir deneyim sunulacağını anlamanız önemlidir. Düşük bant genişliği ve yüksek gecikmeyi taklit etmenize ve simüle etmenize yardımcı olabilecek çeşitli yazılım araçları vardır.

Ağ sınırlamasını taklit etme

Site oluştururken veya güncellerken çeşitli bağlantı koşullarında yeterli performansı sağlamanız gerekir. Bu konuda size yardımcı olabilecek çeşitli araçlar vardır.

Tarayıcı araçları

Chrome Geliştirici Araçları, Ağ panelindeki hazır ayarları veya özel ayarları kullanarak sitenizi çeşitli yükleme/indirme hızları ve gidiş dönüş süreleriyle test etmenize olanak tanır. Temel bilgileri öğrenmek için Ağ Performansını Analiz Etme özelliğini kullanmaya başlama başlıklı makaleyi inceleyin.

Chrome DevTools'un kısıtlanması

Sistem araçları

Network Link Conditioner, Xcode için Donanım IO Araçları'nı yüklediğinizde Mac'te bulunan bir tercih panelidir:

Mac Network Link Conditioner kontrol paneli

Mac Ağ Bağlantısı Düzenleyici ayarları

Mac Network Link Conditioner özel ayarları

Cihaz emülasyonu

Android Emulator, Android'de uygulama (web tarayıcıları ve karma web uygulamaları dahil) çalıştırırken çeşitli ağ koşullarını simüle etmenize olanak tanır:

Android Emulator

Android Emülatör ayarları

iPhone için Ağ Bağlantısı Düzenleyici, bozuk ağ koşullarını simüle etmek amacıyla kullanılabilir (yukarıya bakın).

Farklı konumlardan ve ağlardan test etme

Bağlantı performansı, sunucu konumunun yanı sıra ağ türüne bağlıdır.

WebPagetest, çeşitli ağlar ve barındırma konumları kullanılarak siteniz için bir dizi performans testinin çalıştırılmasını sağlayan bir online hizmettir. Örneğin, sitenizi Hindistan'daki bir sunucuda 2G ağında veya ABD'deki bir şehirde kablolu bağlantı üzerinden deneyebilirsiniz.

WebPagetest ayarları

Bir konum seçin ve gelişmiş ayarlardan bir bağlantı türü seçin. Dilerseniz komut dosyaları (ör. bir siteye giriş yapmak için) veya RESTful API'lerini kullanarak testleri otomatikleştirebilirsiniz. Bu, bağlantı testini derleme süreçlerine veya performans günlüğüne dahil etmenize yardımcı olur.

Fiddler, GeoEdge aracılığıyla küresel proxy'yi destekler ve özel kuralları modem hızlarını simüle etmek için kullanılabilir:

Fiddler proxy'si

Bozuk bir ağda test etme

Yazılım ve donanım proxy'leri, bant genişliği kısıtlaması, paket gecikmesi ve rastgele paket kaybı gibi sorunlu mobil ağ koşullarını emüle etmenizi sağlar. Paylaşılan bir proxy veya bozuk bir ağ, geliştirici ekibinin iş akışlarına gerçek dünya ağ testlerini dahil etmesine olanak tanıyabilir.

Facebook'un Geliştirilmiş Trafik Kontrolü (ATC), trafiği şekillendirmek ve bozuk ağ koşullarını taklit etmek için kullanılabilen BSD lisanslı bir uygulama grubudur:

Facebook'un Geliştirilmiş Trafik Kontrolü

Facebook, 2G kullanan kullanıcıların ürünlerini nasıl kullandığını anlamak için 2G Salı günleri adlı bir program bile başlattı. Salı günleri çalışanlara 2G bağlantısını simüle etme seçeneği sunan bir pop-up gösteriliyor.

Charles HTTP/HTTPS proxy'si, bant genişliğini ve gecikmeyi ayarlamak için kullanılabilir. Charles ticari bir yazılımdır ancak ücretsiz deneme sürümü mevcuttur.

Charles proxy bant genişliği ve gecikme ayarları

Charles hakkında daha fazla bilgiyi codewithchris.com adresinde bulabilirsiniz.

Güvenilir olmayan bağlantı ve "yalancı kablosuz bağlantı" ile başa çıkma

Lie-fi nedir?

Yalancı kablosuz terimi en az 2008'den (telefonların böyle göründüğü tarihten) beri kullanılmaktadır ve göründüğü gibi olmayan bağlantıyı ifade eder. Tarayıcınız, herhangi bir nedenden dolayı bağlı olmadığı halde, internete bağlıymış gibi davranır.

Bağlantının yanlış yorumlanması, tarayıcı (veya JavaScript) vazgeçip makul bir yedek seçmek yerine kaynakları almaya devam ettiğinden kötü bir deneyime neden olabilir. Yalan-fi aslında çevrimdışı olmaktan daha kötü olabilir. En azından bir cihaz kesinlikle çevrimdışıysa JavaScript'iniz uygun kaçınma işlemini gerçekleştirebilir.

Daha fazla kullanıcı sabit geniş banttan mobil ağa geçtiği için yalancı kablosuz bağlantı daha büyük bir sorun haline gelebilir. Son ABD nüfus sayımı verileri, sabit geniş banttan uzaklaşma olduğunu gösteriyor. Aşağıdaki grafikte, 2013 ile 2015 yılında evde mobil internet kullanımı gösterilmektedir:

Özellikle düşük gelirli hanelerde sabit geniş banttan mobil bağlantıya geçişi gösteren, ABD nüfus sayımı verilerinden elde edilen grafik

Aralıklı bağlantıyı yönetmek için zaman aşımları kullanın

Geçmişte, aralıklı bağlantıyı test etmek için XHR kullanan hack yöntemler kullanılıyordu ancak hizmet çalışanı, ağ zaman aşımlarını ayarlamak için daha güvenilir yöntemler sunar. Bu işlem, yalnızca birkaç satır kodla Workbox kullanılarak yapılabilir:

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

Workbox hakkında daha fazla bilgiyi Jeff Posnick'in Chrome Dev Summit'teki Workbox: Esnek PWA Kitaplıkları konuşmasında bulabilirsiniz.

Getirme API'si için zaman aşımı işlevi de geliştirilmektedir. Streams API, içerik yayınlamayı optimize ederek ve monolitik isteklerden kaçınarak yardımcı olacaktır. Jake Archibald, Supercharging page load (Sayfanın çok daha hızlı yüklenmesini sağlama) adlı videoda "lie-fi" ile başa çıkma hakkında daha fazla bilgi veriyor.

Geri bildirim