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

Ważne jest, aby wiedzieć, jak działa aplikacja lub strona, gdy połączenie jest słabe lub niestabilne, i odpowiednio do tego dostosować projekt. Możesz skorzystać z różnych narzędzi.

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 ważne jest, aby wiedzieć, jak działa aplikacja lub strona, gdy połączenie jest słabe lub niestabilne. Dostępne są różne narzędzia, które mogą Ci pomóc emulować i symulować niskie pasmo i wysoką opóźnienie.

Emulowanie ograniczania 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 w Narzędziach 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 Network Link Conditioner w systemie Mac

Ustawienia Link Conditioner w sieci Mac

Ustawienia niestandardowe usługi Network Link Conditioner na komputerze 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 możesz użyć narzędzia Network Link Conditioner, aby symulować niekorzystne warunki sieciowe (patrz wyżej).

Testowanie z różnych lokalizacji i sieci

Wydajność połączenia zależy od lokalizacji serwera i 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 wybierz 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

Proxy sprzętowe i programowe umożliwiają emulowanie problematycznych warunków sieci komórkowych, takich jak ograniczenie 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 regulowania przepustowości i opóźnienia. Charles to oprogramowanie komercyjne, ale dostępna jest jego bezpłatna wersja próbna.

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 pochodzi z co najmniej 2008 r. (kiedy telefony wyglądały tak: ) i odnosi się do połączeń, które nie są tym, czym się wydają. Twoja przeglądarka zachowuje się tak, jakby miała połączenie, mimo że z jakiegoś powodu nie ma połączenia.

Niewłaściwie 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” może być w rzeczywistości gorsze niż offline. Jeśli urządzenie jest offline, Twój kod JavaScript może podjąć odpowiednie działania obronne.

Lie-fi prawdopodobnie stanie się większym problemem, ponieważ coraz więcej osób przechodzi na urządzenia mobilne i rezygnuje z dostępu 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 na podstawie danych ze spisu powszechnego w Stanach Zjednoczonych przedstawiający przejście na urządzenia mobilne z sieci szerokopasmowej, zwłaszcza w gospodarstwach domowych o niższych dochodach

Używanie limitów czasu do obsługi przerwanych połączeń

W przeszłości do testowania okresowego braku połączenia używano nieoficjalnych metod za pomocą 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łączeniem typu „lie-fi” znajdziesz w artykule Wzmocnienie wczytywania strony.

Prześlij opinię