Dowiedz się, jak zadbać o komfort każdego użytkownika, optymalizując witryny pod kątem konkretnych ograniczeń sprzętowych i sieciowych.
Możliwości urządzeń i połączenia sieciowe bardzo się różnią. Witryny atrakcyjne dla użytkowników zaawansowanych urządzeń mogą być nieodpowiednie na mniej zaawansowane urządzenia. Strony, które płynnie wczytują się w szybkich sieciach, mogą przestać działać w przypadku wolnych witryn. Witryna może działać wolno u każdego użytkownika, dlatego opracowanie „uniwersalnych rozwiązań” nie zawsze się sprawdza.
W swojej prezentacji na temat Chrome Dev Summit Ady Osmani z Google i Nate Schloss z Facebooka omawiają rozwiązanie tego problemu – schemat wyświetlania stron lepiej dostosowanych do różnych ograniczeń użytkowników. Nazywa się to ładowaniem adaptacyjnym.
Czym jest wczytywanie adaptacyjne?
Wczytywanie adaptacyjne obejmuje dostarczanie różnych treści różnym użytkownikom w zależności od ich ograniczeń sieciowych i sprzętowych, w szczególności:
Szybkie działanie dla wszystkich użytkowników (także urządzeń niskiej jakości).
Stopniowe dodawanie funkcji zaawansowanych, jeśli tylko sieć i sprzęt użytkownika pozwalają je obsługiwać.
Optymalizacja pod kątem określonego sprzętu i ograniczeń związanych z siecią pozwala każdemu użytkownikowi maksymalnie wykorzystać potencjał swojego urządzenia. Dostosowanie działania do ograniczeń użytkowników może obejmować:
wyświetlanie obrazów i filmów niskiej jakości w powolnych sieciach;
Ograniczanie liczby klatek w animacjach na słabszych urządzeniach.
Unikanie kosztownych operacji na słabszych urządzeniach.
Blokowanie skryptów innych firm na wolniejszych urządzeniach.
Ładowanie niekrytycznego kodu JavaScript w celu zapewnienia interaktywności tylko na szybkich procesorach.
Obsługa przeglądarek i implementacja ładowania adaptacyjnego
Poniżej znajdziesz sygnały, których możesz używać do wczytywania adaptacyjnego. Każdy sygnał obejmuje też obsługę przeglądarek:
Navigator.deviceMemory
Właściwość navigator.deviceMemory służy do ograniczania zużycia pamięci na słabszych urządzeniach.
Navigator.hardwareConcurrency
Właściwość navigator.hardwareConcurrency to liczba rdzeni procesora. Pozwala ograniczyć kosztowne wykonywanie kodu JavaScript i obniżyć wymagania logiczne obciążające procesor, gdy urządzenie nie jest w stanie dobrze go obsługiwać.
NetworkInformation.effectiveType
Właściwość navigator.connection.effectiveType służy do dostrajania przesyłania danych w celu zmniejszenia jego wykorzystania.
NetworkInformation.saveData
Właściwość navigator.connection.saveData służy do wykorzystywania ustawień Oszczędzania danych wybranych przez użytkownika.
Są 2 miejsca, w których możesz zdecydować, co wyświetlić użytkownikom: na poziomie klienta lub serwera. Po stronie klienta masz wymienione powyżej interfejsy API JavaScript. Na serwerze możesz korzystać ze wskazówek klienta, aby poznać możliwości urządzenia użytkownika oraz sieć, z którą jest połączone.
Wczytywanie adaptacyjne w aplikacji React
React Load Adaptive Loads & Utilities to pakiet narzędzi do ładowania aplikacji React, który ułatwia dostosowywanie witryn na słabsze urządzenia. Znajdziesz w nich m.in. te informacje:
Punkt zaczepienia
useNetworkStatus()służący do adaptacji na podstawie stanu sieci (slow-2g,2g,3glub4g).Punkt zaczepienia
useSaveData()służący do dostosowywania funkcji zgodnie z ustawieniami Oszczędzania danych użytkownika.Punkt zaczepienia
useHardwareConcurrency()służący do adaptacji na podstawie liczby rdzeni procesora logicznego w urządzeniu użytkownika.Punkt zaczepienia
useMemoryStatus()służący do adaptacji na podstawie pamięci RAM urządzenia użytkownika.
Każdy punkt zaczepienia przyjmuje opcjonalny argument umożliwiający ustawienie wartości początkowej. Ta opcja jest przydatna w 2 przypadkach: gdy przeglądarka użytkownika nie obsługuje odpowiedniego interfejsu API oraz gdy jest renderowana po stronie serwera, gdzie możesz użyć danych wskazówek dotyczących klienta, aby ustawić na serwerze wartość początkową. Na przykład punkt zaczepienia useNetworkStatus() może wykorzystywać wartość początkową przekazaną ze wskazówki klienta do renderowania po stronie serwera. Po wykonaniu na kliencie może się też aktualizować, gdy zmieni się efektywny typ sieci.
Punkty zaczepienia i narzędzia ładowania adaptacyjnego są wdrażane za pomocą interfejsów API platformy internetowej (informacji o sieci, pamięci urządzenia i równoczesności sprzętu). Za pomocą tych samych interfejsów API możesz stosować koncepcje wczytywania adaptacyjnego do innych platform i bibliotek, takich jak Angular, Vue i inne.
Wczytywanie adaptacyjne w działaniu
W tej sekcji znajdziesz prezentacje wykorzystania wczytywania adaptacyjnego i rzeczywiste przykłady z takich witryn jak Facebook, eBay, Tinder i innych.
Demonstracja Filmu reakcji pokazuje, jak dostosować wyświetlanie multimediów na podstawie stanu sieci. To aplikacja do przeglądania filmów, w której znajdziesz plakaty, podsumowania i listy obsady. W zależności od skutecznego typu połączenia użytkownika wyświetla ona plakaty wysokiej jakości przy szybkim połączeniu i niskiej jakości w przypadku powolnych połączeń.
Twitter ma tryb oszczędzania danych, który służy do ograniczania ilości przesyłanych danych. W tym trybie obrazy podglądu wczytują się w niskiej i dużej rozdzielczości tylko wtedy, gdy klikniesz podgląd. Po włączeniu tej opcji użytkownicy systemów iOS i Android zaoszczędzili o 50% na wykorzystaniu danych z obrazów, a użytkownicy internetu zaoszczędzili o 80%. Oto prezentacja React, która wykorzystuje punkt zaczepienia Zapisz dane do replikacji osi czasu Twittera. Otwórz panel Sieć w Narzędziach deweloperskich i sprawdź, jaka jest różnica w ilości danych przesyłanych podczas przewijania w czasie, gdy funkcja zapisywania danych jest wyłączona, a gdy ta funkcja jest włączona.
Serwis eBay warunkowo włącza i wyłącza takie funkcje jak powiększanie, gdy warunki sprzętowe lub sieciowe użytkownika nie są dobrze obsługiwane. Można to osiągnąć przez adaptacyjne dzielenie kodu i wczytywanie kodu. Pozwala to warunkowo wczytywać bardziej interaktywne komponenty lub wykonywać bardziej zaawansowane operacje obliczeniowe na urządzeniach zaawansowanych bez wysyłania tych skryptów do użytkowników korzystających z wolniejszych urządzeń. Obejrzyj 16 min filmu, w którym Addy pokazuje wzorzec zaimplementowany przy użyciu funkcji React.lazy() i Susense na stronie demonstracyjnej eBay.
Tinder stosuje szereg wzorców wczytywania adaptacyjnego na swojej stronie internetowej i w aplikacji Lite, aby zapewnić szybkie działanie wszystkim użytkownikom. Jeśli użytkownik korzysta z wolnej sieci lub ma włączone Oszczędzanie danych, wyłącza autoodtwarzanie filmów, ogranicza wstępne pobieranie tras i ogranicza wczytywanie kolejnych obrazów w karuzeli do kolejnych obrazów, gdy użytkownik je przesuwa. Po wdrożeniu tych optymalizacji zaobserwowali znaczny wzrost średniej liczby przesunięć w różnych krajach, np. w Indonezji.
Wczytywanie adaptacyjne na Facebooku
Jednym z problemów podczas wczytywania adaptacyjnego jest grupowanie urządzeń w klasy zaawansowane i niskiej klasy na podstawie dostępnych sygnałów. Na urządzeniach mobilnych ciąg klienta użytkownika (UA) zawiera nazwę urządzenia, dzięki któremu Facebook może używać dostępnych publicznie danych o charakterze urządzenia do grupowania urządzeń mobilnych w klasy. Jednak na komputerach jedyne istotne informacje podawane przez UA to informacje o systemie operacyjnym urządzenia.
Na potrzeby grupowania urządzeń stacjonarnych Facebook rejestruje dane o systemie operacyjnym, rdzeniach procesora (z navigator.hardwareConcurrency) i pamięci RAM (navigator.deviceMemory) w monitorowaniu wydajności. Biorąc pod uwagę zależności między różnymi typami sprzętu i wydajnością, podzielili je na 5 kategorii. Dzięki klasom sprzętu zintegrowanym z monitorowaniem wydajności uzyskują pełniejszy obraz tego, jak użytkownicy korzystają z usług Facebooka w zależności od urządzenia, i mogą łatwiej identyfikować regresje.
Obejrzyj film, który zawiera 24 min, w którym wyjaśnia, jak Facebook podchodzi do grupowania urządzeń, i wykorzystuje adaptacyjne ładowanie animacji oraz kodu JavaScript.
Więcej informacji o ładowaniu adaptacyjnym
Wczytywanie adaptacyjne polega na projektowaniu witryn z myślą o integracji społecznej. Stwórz aplikację, która sprawdzi się u wszystkich użytkowników, a następnie przełączaj i łącz funkcje, dzięki którym usługa będzie jeszcze bardziej efektywna, jeśli użytkownik ma odpowiednią ilość pamięci, CPU lub szybką sieć. Aby dowiedzieć się więcej o wczytywaniu adaptacyjnym, obejrzyj dostępne prezentacje i obejrzyj prezentację Chrome Dev Summit: