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

Warto wiedzieć, jakie jest wrażenia użytkownika podczas korzystania z aplikacji lub witryny, gdy łączność jest niska lub niestabilna, i na tej podstawie należy tworzyć odpowiednie rozwiązania. Szeroki wybór narzędzi może Ci w tym pomóc.

Testowanie z niską przepustowością i dużym opóźnieniem

Rosnący odsetek użytkowników korzysta z internetu na urządzeniach mobilnych. Nawet w domu wiele osób rezygnuje ze stałego łącza szerokopasmowego na rzecz telefonów komórkowych.

W tym kontekście warto wiedzieć, jak wygląda korzystanie z aplikacji lub witryny przy słabym lub niestabilnym połączeniu. Szeroki wybór oprogramowania pomaga emulować i symulować niską przepustowość i duże opóźnienia.

Emuluj ograniczanie sieci

Gdy tworzysz lub aktualizujesz witrynę, musisz zadbać o odpowiednią wydajność w różnych warunkach połączenia. Pomóc w tym może kilka narzędzi.

Narzędzia przeglądarki

Narzędzia Chrome DevTools umożliwiają testowanie witryny przy różnych szybkościach przesyłania i pobierania oraz czasach przesyłania w obie strony za pomocą gotowych ustawień lub ustawień niestandardowych z panelu Sieć. Zapoznaj się z artykułem Pierwsze kroki z analizą wydajności sieci, aby poznać podstawy.

Ograniczanie wykorzystania w Narzędziach deweloperskich w Chrome

Narzędzia systemowe

Network Link Conditioner to panel preferencji dostępny na Macu, jeśli zainstalujesz sprzętowe narzędzia IO Tools dla Xcode:

Panel sterowania Mac Network Link Conditioner

Ustawienia narzędzia Mac Network Link Conditioner

Ustawienia niestandardowe narzędzia Mac Network Link Conditioner

Emulacja urządzenia

Emulator Androida umożliwia symulowanie różnych warunków sieciowych podczas uruchamiania aplikacji na Androida (w tym przeglądarek i hybrydowych aplikacji internetowych):

Android Emulator

Ustawienia emulatora Androida

W przypadku iPhone'a Network Link Conditioner może posłużyć do symulowania problemów z siecią (patrz wyżej).

Testowanie w różnych lokalizacjach i sieciach

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

WebPagetest to usługa online, która pozwala poddać witrynę szeregowi testów wydajności z użyciem różnych sieci i lokalizacji hostów. Możesz na przykład wypróbować witrynę na serwerze w Indiach, korzystając z sieci 2G, lub sieci kablowej z miasta w USA.

Ustawienia WebPagetest

Wybierz lokalizację, a w ustawieniach zaawansowanych określ typ połączenia. Możesz nawet zautomatyzować testowanie za pomocą skryptów (na przykład, aby zalogować się w witrynie) lub wykorzystać ich interfejsy API REST. Pomaga to uwzględnić testowanie połączeń w procesach kompilacji lub w dzienniku wydajności.

Fiddler obsługuje globalne serwery proxy za pomocą GeoEdge, a jego niestandardowe reguły mogą służyć do symulowania szybkości modemu:

Serwer proxy Fiddler

Przeprowadź test w zaburzonej sieci

Serwery proxy związane z oprogramowaniem i sprzętem pozwalają emulować problematyczne warunki sieci komórkowej, na przykład ograniczanie przepustowości, opóźnienie pakietów i ich losową utratę. Współdzielony serwer proxy lub ograniczona sieć mogą umożliwić zespołowi programistów uwzględnienie rzeczywistego testowania sieci w swoim przepływie pracy.

Przygotowane przez Facebook rozwiązanie Augmented Traffic Control (ATC) to zestaw aplikacji na licencji BSD, które można wykorzystać do kształtowania ruchu i emulowania ograniczonych sieci.

Kontrola rozszerzonego ruchu Facebooka

Facebook wprowadził nawet wtorki z 2G, aby lepiej zrozumieć, jak użytkownicy sieci 2G korzystają z jego produktu. We wtorki pracownicy zobaczą wyskakujące okienko z możliwością symulacji połączenia 2G.

Serwer proxy HTTP/HTTPS Charles można używać do dostosowywania przepustowości i opóźnienia. Charles to komercyjne oprogramowanie, ale dostępna jest jego bezpłatna wersja próbna.

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

Więcej informacji na temat Charles znajdziesz w witrynie codewithchris.com.

Obsługa niestabilnej łączności i sieci „lie-fi”

Co to jest lie-fi?

Termin lie-fi sięga co najmniej 2008 r. (kiedy telefony wyglądały tak) i odnosi się do łączności, która wygląda inaczej. Przeglądarka zachowuje się tak, jakby połączenie sieciowe było możliwe, gdy nie ma połączenia.

Błędne zinterpretowanie połączeń może obniżyć komfort korzystania z sieci, ponieważ przeglądarka (lub JavaScript) nadal próbuje pobrać zasoby, zamiast poddawać się i wybierać rozsądną metodę zastępczą. Lie-fi może być gorsze niż offline. Gdy urządzenie jest offline, JavaScript może przynajmniej podjąć odpowiednie działania.

W miarę jak coraz więcej osób odchodzi od stałego łącza szerokopasmowego, lie-fi może stać się większym problemem. Ostatnie dane amerykańskiej spisu ludności wskazują na odejście od stałego łącza szerokopasmowego. Na wykresie poniżej widać wykorzystanie internetu mobilnego w domu w 2015 roku w porównaniu z rokiem 2013:

Wykres z amerykańskiego spisu powszechnego
ukazuje odejście od stałego łącza szerokopasmowego
i korzystanie z telefonów komórkowych, zwłaszcza w gospodarstwach o niższych dochodach

Korzystanie z limitów czasu oczekiwania do obsługi zanikających połączeń

W przeszłości do testowania zanikającej łączności stosowane były metody hakerskie wykorzystujące XHR, jednak mechanizm Service Worker zapewnia bardziej niezawodne metody ustawiania limitów czasu oczekiwania sieci. Możesz to osiągnąć za pomocą Workbox za pomocą zaledwie kilku wierszy kodu:

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

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

W interfejsie Fetch API rozwijamy też funkcję limitu czasu. Streams API ma w tym pomóc optymalizację dostarczania treści i unikanie żądań monolitycznych. Więcej informacji o sposobach radzenia sobie z lie-fi znajdziesz w artykule Superładowanie strony Jake Archibald.

Prześlij opinię