Wstęp
Dzisiaj najważniejszą rzeczą, jaką możesz zrobić, jest zadbanie o to, aby witryna działała prawidłowo na telefonie i tablecie. Przeczytaj ten artykuł i dowiedz się, jak zoptymalizować witrynę pod kątem przeglądarki mobilnej za pomocą Narzędzi deweloperskich w Chrome i urządzenia z Androidem.
Dlaczego optymalizacja pod kątem internetu mobilnego jest tak ważna?
Występy
Po przejściu z 2G i 3G na 4G urządzenia mobilne mają szybsze procesory, więcej pamięci RAM, szybsze układy GPU i szybszy dostęp do sieci. Pomimo coraz dynamiki urządzenia mobilne mają słabą wydajność w porównaniu z komputerami. Mówiąc bardziej konkretnie, wczytywanie zasobów sieciowych trwa dłużej, rozpakowywanie obrazów trwa dłużej, malowanie strony dłużej, a wykonywanie skryptów dłużej. Możesz przyjąć, że na urządzeniu mobilnym strona działa 5–10 razy wolniej.
Bateria
Urządzenia mobilne są zasilane wyłącznie z baterii. Użytkownicy urządzeń mobilnych oczekują, że bateria będzie działać jak najdłużej. W nieoptymalnej lokalizacji bateria wyczerpuje się znacznie szybciej, niż jest to konieczne. Aby zmniejszyć obciążenie baterii, zminimalizuj ruch w sieci i zmniejszysz kolory. Podczas pobierania zasobu musi być włączone połączenie Wi-Fi lub radio komórkowe, co zużywa baterię. Gdy przeglądarka wyświetla jakiś element, zwiększa się wykorzystanie procesora i karty graficznej, co prowadzi do rozładowywania baterii.
Zaangażowanie
Skuteczność ma na celu zwiększenie wskaźników, które mają dla Ciebie największe znaczenie. Na Facebooku zależy nam na przewijaniu. W teście A/B zwolniliśmy przewijanie z 60 kl./s do 30 kl./s. Zwinięto sekcję Zaangażowanie. Powiedzieliśmy „OK”, więc przewijanie spraw.
Facebook at Edge Conference
Użytkownicy urządzeń mobilnych oczekują możliwości szybkiego rozpoczęcia działalności. Najszybsza strona wzbudzi największe zaangażowanie.
Zarządzanie wynikami
Chrome zawiera świetny zestaw narzędzi dla programistów. Z tego artykułu dowiesz się, jak korzystać z tych narzędzi do profilowania witryny mobilnej. Jeśli znasz już Narzędzia deweloperskie w Chrome, świetnie. Jeśli nie, skorzystaj z tych przydatnych samouczków:
- Profilowanie długiego czasu malowania
- Porady i wskazówki dotyczące Narzędzi deweloperskich
- więcej...
Teraz, gdy wiesz już wszystko, zobaczmy, jak przyspieszyć stronę mobilną za pomocą Narzędzi deweloperskich. Jeśli po raz pierwszy używasz Narzędzi deweloperskich w Chrome na Androida, zapoznaj się z przewodnikiem dla początkujących na końcu artykułu.
Zdalne korzystanie z Narzędzi deweloperskich w Chrome
Mieć urządzenie z Androidem połączone z komputerem. W Chrome na komputerze wejdź na http://localhost:9222 i na urządzeniu z Androidem otwórz witrynę. Na urządzeniu z Androidem wyświetli się lista kart otwartych. Wybierz stronę z listy „Strony możliwe do sprawdzenia”.
i otworzy się strona Chrome DevTools.
Ach... ten dobrze Ci znany pasek narzędzi Chrome DevTools jest właśnie tam. Przede wszystkim musisz wiedzieć, że Narzędzia deweloperskie w Chrome to te same narzędzia deweloperskie, których używasz obecnie na komputerze. Jedyną różnicą jest to, że to urządzenie z Androidem odpowiada tylko za stronę, a komputer – za Narzędzia deweloperskie. Te same dane są zbierane i dostępne są te same funkcje.
Przykład: wszedłem na www.sfgate.com/movies na telefonie. Podczas używania Narzędzi deweloperskich w Chrome na komputerze najechałem kursorem na element div w narzędziu Elementy. Na urządzeniu z Androidem element div (jak na komputerze) jest wyróżniony.
Za pomocą narzędzia Elementy można też włączać i wyłączać style, co może być przydatne przy sprawdzaniu czasów renderowania.
Światło przy dostępie do sieci
Wydajność sieci jest importowana, a w przypadku internetu mobilnego jest jeszcze ważniejsza. Urządzenia mobilne są często łączone wolniej niż komputery stacjonarne czy laptopy. Aby mieć pewność, że wszystko działa, zrób zrzut ekranu. W tym celu otwórz narzędzie sieciowe i naciśnij przycisk nagrywania.
Zrzut ekranu przedstawia ruch w sieci pochodzący z wyszukiwarki Google. Obserwuj żądania sieciowe wysyłane przez Twoją witrynę i znajdź sposoby na ich zminimalizowanie. Jeśli Twoja witryna wysyła do serwera żądania odpytywania, warto zwracać uwagę na aktywność użytkowników i unikać odpytywania, gdy użytkownik był nieaktywny. Narzędzie do sieci pozwala wyświetlić nieprzetworzone nagłówki HTTP, które mogą być przydatne, jeśli sieci komórkowe w ogóle je zmieniają.
Optymalizowanie czasów renderowania
Jednym z największych wąskich gardła w przeglądarkach mobilnych jest malowanie stron. Malowanie to proces rysowania elementów strony o określonym stylu. Jeśli jeden element jest kosztowny, spowalnia on renderowanie całej strony. Chrome próbuje buforować wcześniej namalowane elementy w buforze pozaekranowym. Jednak na urządzeniach mobilnych dostępna ilość pamięci RAM GPU jest ograniczona, co ogranicza liczbę elementów, które można buforować poza ekranem. Efektem ubocznym jest więcej wyrenderowań, a każda z nich trwa wolniej niż na komputerze. Jeśli chcesz, aby przewijanie było responsywne, musisz zminimalizować czas renderowania strony.
Chrome 25 udostępnia tryb ciągłego ponownego renderowania strony. Tryb ciągłego ponownego malowania strony nigdy nie zapisuje w pamięci podręcznej wyrenderowanych elementów, a zamiast tego maluje wszystkie elementy w każdej klatce. Wymuszając malowanie wszystkich elementów każdej klatki, można przeprowadzić testy A/B czasów renderowania poprzez włączanie i wyłączanie elementów, a także włączanie i wyłączanie stylów. Choć proces jest wykonywany ręcznie, jest to nieocenione narzędzie do śledzenia, jak kosztowne jest malowanie poszczególnych elementów na stronie. Pierwszą zasadą optymalizacji jest zmierzenie, co chcesz zoptymalizować. Przeanalizujmy prosty przykład.
Najpierw włącz tryb ciągłego ponownego renderowania strony:
Gdy włączysz tę funkcję, w prawym górnym rogu urządzenia z Androidem pojawi się wykres. Oś X na wykresie przedstawia czas podzielony na ramki. Oś Y wykresu pokazuje czas renderowania w milisekundach. Jak widać, renderowanie strony na moim urządzeniu zajmuje 14 milisekund. Widoczne są też minimalne i maksymalne czasy renderowania wraz z użytą pamięcią GPU.
W ramach eksperymentu ustawiłem styl wybranego elementu na display: none. Zobaczmy, ile kosztuje teraz
pomalowanie strony.
Czas renderowania został skrócony z około 14 milisekund na klatkę do 4 milisekund na klatkę. Innymi słowy, malowanie tego elementu trwało około 10 milisekund. Proces włączania i wyłączania elementów oraz ich stylów pozwala szybko znaleźć kosztowne elementy strony. Pamiętaj, że szybsze malowanie oznacza krótszy czas wczytywania, dłuższy czas pracy na baterii i większe zaangażowanie użytkowników. Jeśli chcesz dowiedzieć się więcej, przeczytaj ten artykuł na temat trybu ciągłego ponownego malowania.
Funkcje zaawansowane
informacje:śledzenie
Wiele bardziej zaawansowanych funkcji dla programistów dostępnych w Chrome na komputery jest też dostępnych w Chrome na Androida. Dostępne są na przykład about:gpu-internals, about:appcache-internals i about:net-internals. Podczas badania szczególnie trudnego problemu czasami potrzebujesz więcej danych, aby znaleźć jego przyczynę. Na komputerze możesz używać adresu about:tracing. Jeśli nie wiesz, czym jest about:tracing, obejrzyj mój film o korzystaniu z narzędzia do profilowania about:tracing. Te same dane można przechwycić z Androida Chrome. Aby rozpocząć, wykonaj te czynności:
- Pobierz plik adb_trace.py
- Uruchom plik adb_trace.py z poziomu wiersza poleceń
- Korzystanie z Chrome na Androidzie
- Naciśnij Enter w wierszu poleceń, aby wyłączyć skrypt adb_trace.py.
Po zakończeniu operacji adb_trace.py uzyskasz plik JSON, który możesz załadować w przeglądarce Chrome about:tracing na komputerze.
Przewodnik dla początkujących
Po omówieniu funkcji zdalnych Narzędzi deweloperskich w Chrome przejdźmy do tego, jak rozpocząć sesję debugowania zdalnego. Jeśli jeszcze z nich nie korzystasz,przeczytaj szczegółowe instrukcje na początek. Jeśli już z nich korzystałeś, ale nie pamiętasz dokładnie, jak z nich korzystać, możesz też skorzystać z tych skróconych instrukcji.
1. Zainstaluj pakiet SDK na Androida
Być może zastanawiasz się, dlaczego musisz zainstalować pakiet SDK do Androida podczas tworzenia aplikacji w internecie. Pakiet SDK zawiera narzędzie adb (Android Debug Bridge). Komputer musi mieć możliwość komunikacji z urządzeniem z Androidem. Chrome nie komunikuje się bezpośrednio z urządzeniem z Androidem, tylko kieruje komunikację przez adb.
2. Włącz debugowanie USB na urządzeniu
Opcję debugowania USB znajdziesz w Ustawieniach Androida. Włącz je.
3. Połącz z urządzeniem
Podłącz swoje urządzenie z Androidem do pulpitu przez USB (o ile nie zostało to jeszcze zrobione). Jeśli używasz debugowania USB po raz pierwszy, zobaczysz następujący komunikat:
Jeśli często przeprowadzasz zdalne sesje debugowania, polecamy opcję „Zawsze zezwalaj z tego komputera”.
4. Sprawdź, czy urządzenie jest prawidłowo połączone
Uruchom polecenie adb devices w wierszu poleceń. Urządzenie powinno być widoczne na liście.
5. Włączanie debugowania USB w Chrome
Otwórz Settings > Advanced > DevTools (Ustawienia > Zaawansowane > Narzędzia deweloperskie) i zaznacz opcję Włącz debugowanie sieci USB, jak pokazano poniżej:
6. Tworzenie połączenia Narzędzi deweloperskich z urządzeniem z Androidem
Uruchom to polecenie:
adb forward tcp:9222 localabstract:chrome_devtools_remote
tworzy most między komputerem stacjonarnym a urządzeniem z Androidem za pomocą narzędzia adb. Jeśli na tym etapie napotkasz jakieś problemy, zapoznaj się ze szczegółowymi instrukcjami konfiguracji tutaj.
7. Potwierdzam, że wszystko jest w porządku
Sprawdź, czy urządzenie jest prawidłowo połączone, otwierając Chrome na komputerze i przechodząc pod adres http://localhost:9222. Jeśli pojawi się błąd 404, inny błąd lub coś takiego:
Szczegółowe instrukcje konfiguracji znajdziesz tutaj.
Podsumowanie
Użytkownicy urządzeń mobilnych często się spieszą i muszą szybko uzyskać ważne informacje z Twojej strony. Jako twórca witryn mobilnych musisz zadbać o to, by strona wczytywała się szybko i działała dobrze na urządzeniach mobilnych. W przeciwnym razie zaangażowanie użytkowników spadnie. Zdalne Narzędzia deweloperskie w Chrome mają funkcjonalne odpowiedniki z komputerów. Interfejs jest na tyle podobny, że nie musisz uczyć się korzystania z nowego zestawu narzędzi. Innymi słowy, Twoja praca zostanie przeniesiona na inne. Pamiętaj, że problemy z wydajnością Facebooka nie są ograniczane, podobnie jak Twoja witryna. Skuteczne strony zwiększają zaangażowanie użytkowników.