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

Bağlantı zayıf veya güvenilir olmadığında uygulamanızda veya sitenizde nasıl bir deneyim sunulacağını anlamanız ve buna göre derleme yapmanız önemlidir. Bu konuda size yardımcı olabilecek bir dizi araç bulunmaktadır.

Düşük bant genişliği ve yüksek gecikme süresiyle test etme

Web'i mobil cihaz üzerinden geçiren kullanıcıların oranında artış bulunmaktadır. Evdeyken bile, birçok kullanıcı mobil cihazlar için sabit geniş bant bağlantısından vazgeçiyor.

Bu bağlamda, bağlantı zayıf veya istikrarsız olduğunda uygulamanızı veya sitenizi kullanmanın nasıl bir his olduğunu anlamanız önemlidir. Bir dizi yazılım aracı, düşük bant genişliği ve yüksek gecikme emülasyonu ve simüle etmenize yardımcı olabilir.

Ağ sınırlama emülasyonu

Bir siteyi oluştururken veya güncellerken, çeşitli bağlantı koşullarında yeterli performans sağladığınızdan emin olmanız gerekir. Bunun için yararlanabileceğiniz pek çok araç vardır.

Tarayıcı araçları

Chrome Geliştirici Araçları, Ağ panelindeki ön ayarları veya özel ayarları kullanarak sitenizi çeşitli yükleme/indirme hızlarında ve gidiş dönüş sürelerinde test etmenize olanak tanır. Temel bilgileri öğrenmek için Ağ Performansını Analiz Etmeye Başlayın bölümüne bakın.

Chrome Geliştirici Araçları'nın kısıtlanması

Sistem araçları

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

Mac Network Link Conditioner kontrol paneli

Mac Network Link Conditioner ayarları

Mac Network Link Conditioner özel ayarları

Cihaz emülasyonu

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

Android Emulator

Android Emülatör ayarları

Network Link Conditioner, iPhone için sorunlu 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 konumu ve ağ türüne bağlıdır.

WebPagetest, çeşitli ağlar ve ana makine konumları kullanılarak siteniz için bir dizi performans testinin yapılmasını sağlayan bir internet hizmetidir. Örneğin, sitenizi 2G ağda Hindistan'daki bir sunucudan veya kablolu ağda ABD'deki bir şehirden deneyebilirsiniz.

WebPagetest ayarları

Bir yer belirleyip gelişmiş ayarlardan bağlantı türü seçin. Hatta komut dosyaları (örneğin, bir siteye giriş yapmak için) veya RESTful API'lerini kullanarak testi otomatikleştirebilirsiniz. Bu, bağlantı testlerini derleme süreçlerine veya performans günlük kaydına eklemenize yardımcı olur.

Fiddler, GeoEdge üzerinden Global proxy kullanmayı destekler ve özel kuralları mod hızlarını simüle etmek için kullanılabilir:

Fiddler proxy'si

Sorunlu ağda test etme

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

Facebook'un Artırılmış Trafik Kontrolü (ATC), trafiği şekillendirmek ve sorunlu ağ koşullarını emüle etmek için kullanılabilen BSD lisanslı bir uygulama grubudur:

Facebook'un Artırılmış Trafik Denetimi

Hatta Facebook, 2G ile bağlananların ürünlerini nasıl kullandığını anlamak için 2G Salıları uygulamasını 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ım olsa da ücretsiz bir deneme sürümü mevcuttur.

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

codewithchris.com adresine giderek Charles ile ilgili daha fazla bilgi edinebilirsiniz.

Güvenilmez bağlantı ve "lie-fi" durumlarıyla başa çıkma

"Lie-fi" nedir?

lie-fi terimi en az 2008 yılına kadar geriye gidiyor (telefonlar bu şekilde göründüğü zaman) ve bağlantının göründüğü gibi olmadığını ifade ediyor. Her ne sebeple olursa olsun, tarayıcınız bağlantınız varmış gibi davranır.

Yanlış yorumlanan bağlantılar, kötü bir deneyime neden olabilir. Bunun nedeni, tarayıcının (veya JavaScript'in), vazgeçip mantıklı bir geri dönüş seçmek yerine kaynakları almayı denemeye devam etmesidir. Lie-fi, çevrimdışından daha kötü olabilir; en azından bir cihaz kesinlikle çevrimdışıysa JavaScript'iniz uygun bir kaçamak işlemi gerçekleştirebilir.

Giderek daha fazla kullanıcı mobil cihazlara geçip sabit geniş bant bağlantısından uzaklaştıkça, Lie-fi muhtemelen daha büyük bir sorun haline gelecek. Son ABD Nüfus Sayımı verileri, sabit geniş bant kullanımında bir değişiklik olduğunu gösteriyor. Aşağıdaki grafikte, 2013'e kıyasla 2015'te evde mobil internet kullanımı gösterilmektedir:

ABD nüfus sayımı verilerinde, özellikle düşük gelirli hanelerde sabit geniş bant yerine mobile geçişi gösteren grafik

Kesintili internet bağlantısı sorunu için zaman aşımlarını kullanma

Geçmişte, kesintili bağlantıyı test etmek için XHR kullanan bilgisayar korsanlığı yöntemleri kullanılırdı ancak Service Worker ağ zaman aşımlarının ayarlanmasında daha güvenilir yöntemler sağlar. Yalnızca birkaç satır kod girerek Workbox'ı kullanabilirsiniz:

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

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

Fetch API için zaman aşımı işlevselliği de geliştirilmektedir. Streams API, içerik teslimini 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