Wczytywanie adaptacyjne: poprawianie wydajności internetu na wolniejszych urządzeniach

Dowiedz się, jak zapewnić użytkownikom jak najlepsze wrażenia, optymalizując swoje witryny pod kątem określonych ograniczeń sprzętowych i sieciowych.

Możliwości urządzenia i połączenia sieciowe znacznie się różnią. Strony, które są przyjemne dla użytkowników na urządzeniach wysokiej klasy, mogą być nieużyteczne na urządzeniach niskiej klasy. Strony, które ładują się płynnie w szybkich sieciach, mogą się zacinać w wolnych. Każdy użytkownik może napotkać problemy z powolną stroną, dlatego tworzenie uniwersalnych rozwiązań może nie zawsze przynosić oczekiwane rezultaty.

W swojej prezentacji z Chrome Dev Summit, Addy Osmani z Google i Nate Schloss z Facebooka, omawiają rozwiązanie tego problemu – schemat tworzenia stron lepiej dostosowanych do różnych ograniczeń użytkowników. Nazywa się to ładowaniem adaptacyjnym.

Czym jest ładowanie adaptacyjne?

Wczytywanie adaptacyjne polega na dostarczaniu różnych treści różnym użytkownikom na podstawie ograniczeń sieci i sprzętu, w tym:

• Szybka praca podstawowych funkcji dla wszystkich użytkowników (w tym na urządzeniach niskiego poziomu).

• Stopniowe dodawanie funkcji wyłącznie z górnej półki, o ile tylko sieć i sprzęt użytkownika są w stanie to zrobić.

Dzięki optymalizacji pod kątem określonych ograniczeń sprzętowych i sieciowych możesz zapewnić każdemu użytkownikowi jak najlepsze wrażenia na jego urządzeniu. Dostosowywanie interfejsu do ograniczeń użytkowników może obejmować:

• wyświetlanie obrazów i filmów w niskiej jakości w wolnych sieciach;

• Ograniczanie liczby klatek w animacjach na słabszych urządzeniach.

• Unikaj operacji wymagających dużych zasobów obliczeniowych na urządzeniach niskiego poziomu.

• Blokowanie skryptów innych firm na wolniejszych urządzeniach.

• Wczytywanie nieistotnego kodu JavaScript w celu zapewnienia interakcji tylko na szybkich procesorach.

Obsługa przeglądarek i implementacja ładowania adaptacyjnego

Poniżej znajdziesz listę sygnałów, których możesz używać do ładowania adaptacyjnego. W przypadku każdego sygnału uwzględniono też obsługę przeglądarki:

Navigator.deviceMemory

Właściwość navigator.deviceMemory służy do ograniczania zużycia pamięci na mniej zaawansowanych urządzeniach.

Navigator.hardwareConcurrency

Właściwość navigator.hardwareConcurrency to liczba rdzeni procesora. Jest on używany do ograniczania kosztownego wykonywania kodu JavaScript i ograniczania logiki wymagającej dużej mocy obliczeniowej procesora, gdy urządzenie nie może sobie z nim dobrze poradzić.

NetworkInformation.effectiveType

Właściwość navigator.connection.effectiveType służy do dostosowania transferu danych tak, aby zużywać mniej przepustowości.

NetworkInformation.saveData

Właściwość navigator.connection.saveData służy do korzystania z preferencji użytkownika dotyczących Oszczędzania danych.

Decyzje dotyczące tego, co wyświetlać użytkownikom, możesz podejmować w 2 miejscach: na kliencie i na serwerze. Po stronie klienta masz interfejsy JavaScript API wymienione powyżej. Na serwerze możesz używać podpowiedzi klienta, aby uzyskać informacje o możliwościach urządzenia użytkownika i sieci, do której jest on podłączony.

Ładowanie adaptacyjne w React

React Adaptive load Hooks &utilities to pakiet narzędzi dla ekosystemu React, który ułatwia dostosowanie witryn do potrzeb słabszych urządzeń. Usługa ta obejmuje:

• Element useNetworkStatus() do dostosowywania na podstawie stanu sieci (slow-2g, 2g, 3g lub 4g).

• Haczyk useSaveData() służący do dostosowywania zawartości na podstawie ustawień Oszczędzania danych użytkownika.

• Hak useHardwareConcurrency() do dostosowywania na podstawie liczby logicznych rdzeni procesora na urządzeniu użytkownika.

• Hak useMemoryStatus() służący do adaptacji na podstawie pamięci RAM urządzenia użytkownika.

Każdy hak akceptuje opcjonalny argument do ustawiania wartości początkowej. Ta opcja jest przydatna w 2 przypadkach: gdy przeglądarka użytkownika nie obsługuje odpowiedniego interfejsu API oraz w przypadku renderowania po stronie serwera, gdzie można użyć danych ze wskazówek dla klienta, aby ustawić wartość początkową na serwerze. Na przykład element useNetworkStatus() może używać początkowej wartości przekazanej z podpowiedzenia klienta do renderowania po stronie serwera, a po wykonaniu na kliencie może się zaktualizować, jeśli zmieni się typ skuteczności sieci.

Zaczepy i narzędzia do obsługi adaptacyjnego wczytywania w React są implementowane za pomocą interfejsów API platformy internetowej (informacje o sieci, pamięć urządzenia i spójność sprzętowa). Możesz używać tych samych interfejsów API, aby stosować koncepcje ładowania adaptacyjnego w ramach innych frameworków i bibliotek, takich jak Angular, Vue i inne.

Ładowanie adaptacyjne w działaniu

W tej sekcji znajdziesz prezentacje pokazujące, jak korzystać z adaptacyjnego wczytywania, oraz przykłady z witryn takich jak Facebook, eBay, Tinder i inne.

Wersja demonstracyjna filmu z reakcją pokazuje, jak dostosowywać wyświetlanie multimediów do stanu sieci. To aplikacja do przeglądania filmów, która zawiera plakaty, podsumowania i listy obsady. Na podstawie typu połączenia użytkownika wyświetla plakaty wysokiej jakości w przypadku szybkich połączeń i plakaty niskiej jakości w przypadku połączeń wolniejszych.

Twitter ma tryb oszczędzania danych, który ma na celu zmniejszenie ilości zużywanych danych. W tym trybie obrazy podglądu wczytują się w niskiej rozdzielczości, a duże obrazy są ładowane tylko po kliknięciu. Dzięki tej opcji użytkownicy urządzeń z systemem iOS i Android oszczędzali 50% danych na zdjęciach, a użytkownicy w internecie oszczędzali 80%. Oto prezentacja demonstracyjna w ramach React, która używa haku Save Data do powielania osi czasu Twittera. Otwórz panel Sieć w Narzędziach dla programistów i porównaj ilość przesyłanych danych podczas przewijania, gdy opcja Zapisz dane jest wyłączona, z ilością przesyłanych danych, gdy jest włączona.

eBay warunkowo włącza i wyłącza funkcje, takie jak powiększanie, gdy sprzęt lub warunki sieciowe użytkownika nie są odpowiednie. Możesz to osiągnąć dzięki adaptacyjnemu code-splitting i wczytywaniu kodu, które umożliwiają warunkowe ładowanie bardziej interaktywnych komponentów lub wykonywanie większej liczby operacji obliczeniowych na zaawansowanych urządzeniach bez wysyłania tych skryptów do użytkowników korzystających z wolniejszych urządzeń. Obejrzyj 16-minutowy film, w którym Ady pokazuje ten wzorzec zaimplementowany za pomocą funkcji React.lazy() i Suspense na stronie demonstracyjnej strony produktu w eBay.

Tinder wykorzystuje wiele wzorców wczytywania adaptacyjnego w swojej internecie i aplikacji Lite, aby zapewnić szybkość działania. Jeśli użytkownik korzysta z wolnej sieci lub ma włączoną funkcję Oszczędzanie danych, automatyczne odtwarzanie filmów jest wyłączone, pobieranie danych jest ograniczone, a wczytywanie kolejnych obrazów w karuzeli jest ograniczone do pobierania po jednym obrazie naraz, gdy użytkownik przesuwa palcem po ekranie. Po wdrożeniu tych optymalizacji można zaobserwować znaczny wzrost średniej liczby przesuwania palcem w takich krajach jak Indonezja.

Ładowanie adaptacyjne na Facebooku

Jednym z problemów, które pojawiają się w przypadku wczytywania adaptacyjnego, jest grupowanie urządzeń do klas wysokiej i niskiej jakości na podstawie dostępnych sygnałów. Na urządzeniach mobilnych ciąg klienta użytkownika (UA) zawiera nazwę urządzenia, dzięki której Facebook może używać publicznie dostępnych danych o charakterze urządzenia do grupowania urządzeń mobilnych w klasy. Na komputerach natomiast UA udostępnia tylko jedną istotną informację: system operacyjny urządzenia.

W ramach monitorowania wydajności Facebook rejestruje dane o systemie operacyjnym, rdzeniach procesora (z navigator.hardwareConcurrency) i pamięci RAM (navigator.deviceMemory) w celu grupowania urządzeń stacjonarnych. Na podstawie relacji między różnymi typami sprzętu a wydajnością podzielili urządzenia na 5 kategorii. Dzięki zintegrowaniu klas sprzętowych z monitorowaniem wydajności mogą uzyskać pełny obraz tego, jak użytkownicy korzystają z usług Facebooka na różnych urządzeniach, i łatwiej wykrywać regresje.

Obejrzyj 24-minutowy film, w którym Nate omawia, w jaki sposób Facebook podchodzi do grupowania urządzeń oraz wykorzystuje ładowanie adaptacyjne na potrzeby animacji i wczytywania JavaScriptu.

Więcej informacji o ładowaniu adaptacyjnym

Elastyczne wczytywanie polega na projektowaniu witryn z myślą o obejmującymi rozwiązaniami. Utwórz podstawową wersję, która działa dobrze dla wszystkich, a potem dodaj funkcje, które sprawią, że będzie jeszcze lepsza, jeśli użytkownik ma wystarczającą ilość pamięci, procesora lub szybką sieć. Aby dowiedzieć się więcej o adaptatywnym wczytywaniu, obejrzyj dostępne prezentacje i wykład z Chrome Dev Summit: