Niska przepustowość i duże opóźnienie

Warto zrozumieć, jak wygląda korzystanie z aplikacji lub witryny w przypadku słabego lub niestabilnego połączenia, i odpowiednio zaprojektować aplikację. Możesz skorzystać z różnych narzędzi.

Test z niską przepustowością i wysokim opóźnieniem

Wzrasta odsetek osób, które korzystają z internetu na urządzeniach mobilnych. Nawet w domu wiele osób rezygnuje z dostępu do internetu szerokopasmowego w domu na rzecz mobilnego dostępu do internetu.

W tym kontekście warto wiedzieć, jak się czuje podczas korzystania z aplikacji lub witryny, gdy połączenie z siecią jest słabe lub zawodne. Dostępne są różne narzędzia, które mogą Ci pomóc zasymulować niskie pasmo i wysoką opóźnienie.

Emuluj ograniczanie wykorzystania sieci

Podczas tworzenia lub aktualizowania witryny musisz zapewnić odpowiednią wydajność w różnych warunkach połączenia. Możesz użyć kilku narzędzi.

Narzędzia przeglądarki

Narzędzie deweloperskie w Chrome umożliwia testowanie witryny przy różnych prędkościach przesyłania/pobierania i czasie dwukierunkowym, korzystając z wstępnie ustawionych wartości lub niestandardowych ustawień w panelu Sieć. Aby poznać podstawy, zapoznaj się z artykułem Pierwsze kroki z narzędziem Analiza wydajności sieci.

Ograniczanie wykorzystania Narzędzi deweloperskich w Chrome

Narzędzia systemowe

Network Link Conditioner to panel ustawień dostępny na Macu, jeśli zainstalujesz narzędzia IO sprzętowe do Xcode:

Panel sterowania Kontrolerem połączenia sieciowego na Macu

Ustawienia rozszerzenia linków sieciowych na Macu

Ustawienia niestandardowe komponentu Network Link Conditioner na komputerach Mac

Emulacja urządzenia

Emulator Androida pozwala symulować różne warunki sieci podczas uruchamiania aplikacji (w tym przeglądarek internetowych i hybrydowych aplikacji internetowych) na Androidzie:

Android Emulator

Ustawienia emulatora Androida

W przypadku iPhone'a Network Link Conditioner może służyć do symulowania ograniczenia działania sieci (patrz wyżej).

Testowanie z różnych lokalizacji i sieci

Wydajność połączenia zależy od lokalizacji serwera oraz typu sieci.

WebPagetest to usługa internetowa, która umożliwia przeprowadzenie zestawu testów wydajności Twojej witryny przy użyciu różnych sieci i lokalizacji hosta. Możesz np. sprawdzić swoją witrynę z serwera w Indiach przez sieć 2G lub przez kabel w mieście w Stanach Zjednoczonych.

Ustawienia WebPagetest

Wybierz lokalizację, a w ustawieniach zaawansowanych określ typ połączenia. Możesz nawet zautomatyzować testowanie za pomocą skryptów (np. do logowania się w witrynie) lub interfejsów REST API. Pomaga to uwzględnić testowanie łączności w procesach kompilacji lub rejestrowaniu wydajności.

Fiddler obsługuje globalne serwery proxy za pomocą GeoEdge, a jego reguły niestandardowe można wykorzystać do symulowania prędkości modemu:

Serwer proxy Fiddler

Testowanie w sieci o ograniczonej przepustowości

Oprogramowanie i sprzętowe serwery proxy umożliwiają emulowanie problematycznych warunków w sieci komórkowej, takich jak ograniczanie przepustowości, opóźnienie pakietów i losowa utrata pakietów. Współdzielony serwer proxy lub uszkodzona sieć mogą umożliwić zespołowi deweloperów wdrożenie testowania sieci w rzeczywistych warunkach w ich procesie pracy.

Rozszerzony kontroler ruchu firmy Facebook (ATC) to zestaw aplikacji w licencjach BSD, które można wykorzystać do kształtowania ruchu i naśladowania niekorzystnych warunków sieciowych:

Zaawansowane zarządzanie ruchem w Facebooku

Facebook wprowadził nawet 2G Tuesdays, aby lepiej zrozumieć, jak użytkownicy korzystają z usługi w sieci 2G. We wtorki pracownicy otrzymują wyskakujące okienko z opcją symulacji połączenia 2G.

Serwer proxy HTTP/HTTPS Charles może służyć do dostosowania przepustowości i opóźnienia. To oprogramowanie komercyjne, ale jest dostępny bezpłatny okres próbny.

Ustawienia przepustowości i opóźnienia serwera proxy Charles

Więcej informacji o Charlesie znajdziesz na stronie codewithchris.com.

Obsługa niestabilnego połączenia i „lie-fi”

Co to jest lie-fi?

Termin lie-fi sięga co najmniej 2008 roku (kiedy telefony wyglądały tak tak) i odnosi się do łączności, która w rzeczywistości tak nie jest. Twoja przeglądarka zachowuje się tak, jakby miała połączenie, mimo że z jakiegoś powodu nie ma połączenia.

Nieprawidłowo zinterpretowane połączenie może spowodować problemy, ponieważ przeglądarka (lub JavaScript) będzie nadal próbować pobierać zasoby zamiast zrezygnować i wybrać rozsądne rozwiązanie alternatywne. Lie-Fi jest tak naprawdę gorsze niż bycie offline. Przynajmniej jeśli urządzenie jest offline, JavaScript może podjąć odpowiednie działania.

Lie-Fi może stać się jeszcze większym problemem, bo coraz więcej osób korzysta z urządzeń mobilnych i odchodzi od stałego łącza szerokopasmowego. Najnowsze dane ze spisu powszechnego w Stanach Zjednoczonych wskazują na odejście od korzystania z modemu łącza szerokopasmowego. Na wykresie poniżej widać, jak zmieniło się korzystanie z internetu mobilnego w domu w latach 2013–2015:

Wykres danych ze spisu ludności Stanów Zjednoczonych, który pokazuje odchodzenie od szerokopasmowych połączeń
mobilnych, zwłaszcza w gospodarstwach o niższych dochodach

Użycie czasu oczekiwania do obsługi zanikających połączeń

W przeszłości do testowania okresowego braku połączenia używano nieoficjalnych metod wykorzystujących XHR, ale usługa workera umożliwia stosowanie bardziej niezawodnych metod ustawiania limitów czasu sieci. Można to osiągnąć za pomocą Workboxa i kilku linii kodu:

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

Więcej informacji o Workbox znajdziesz w prezencie Jeffa Posnicka na konferencji Chrome Dev Summit Workbox: elastyczne biblioteki PWA.

Funkcja limitu czasu jest też opracowywana w przypadku interfejsu Fetch API, a interfejs Streams API powinien pomóc w optymalizacji dostarczania treści i unikaniu monolitycznych żądań. Więcej informacji o rozwiązywaniu problemów z połączeniami o niskiej jakości znajdziesz w artykule Wzmocnienie wczytywania strony.

Prześlij opinię