Wprowadzenie
Obecnie najważniejszą rzeczą, jaką możesz zrobić dla swojej witryny, jest zadbanie o to, aby działała ona prawidłowo na telefonach i tabletach. Przeczytaj ten artykuł, aby dowiedzieć 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?
Wydajność
Urządzenia mobilne mają coraz szybsze procesory, więcej pamięci RAM, szybsze GPU i szybszy dostęp do sieci, ponieważ przechodzimy z 2G i 3G na 4G. Mimo postępu technologicznego urządzenia mobilne mają mniejszą moc obliczeniową niż komputery. Mówiąc konkretniej, wczytywanie zasobów sieciowych, rozpakowywanie obrazów, renderowanie strony i wykonywanie skryptów trwa dłużej. Można bezpiecznie założyć, że strona działa od 5 do 10 razy wolniej na urządzeniu mobilnym.
Bateria
Urządzenia mobilne są zasilane wyłącznie bateryjnie. Użytkownicy urządzeń mobilnych chcą, aby bateria działała jak najdłużej. Nieoptymalna witryna będzie rozładowywać baterię znacznie szybciej, niż jest to konieczne. Zminimalizuj ruch w sieci i ogranicz renderowanie, aby zmniejszyć zużycie baterii. Podczas pobierania zasobu musi być włączone Wi-Fi lub nadajnik w telefonie, co powoduje rozładowywanie baterii. Gdy przeglądarka renderuje element, wykorzystanie procesora i GPU gwałtownie rośnie, co powoduje też szybsze rozładowywanie baterii.
Zaangażowanie
Skuteczność służy do zwiększania wartości danych, które są dla Ciebie najważniejsze. Na Facebooku zależy nam na przewijaniu. W teście A/B spowolniliśmy przewijanie z 60 kl./s do 30 kl./s. Zaangażowanie zostało zwinięte. Ustaliliśmy, że przewijanie ma znaczenie.
Facebook na konferencji Edge
Użytkownicy urządzeń mobilnych oczekują, że będą mogli szybko wejść na stronę i ją opuścić. Najszybsza witryna uzyska największe zaangażowanie.
Zarządzanie skutecznością
Chrome zawiera świetny zestaw narzędzi dla programistów. Z tego artykułu dowiesz się, jak używać tych narzędzi do profilowania witryny mobilnej. Jeśli znasz już Narzędzia deweloperskie w Chrome, świetnie. Jeśli nie, zapoznaj się z tymi samouczkami:
- Profilowanie długich czasów renderowania
- Porady i wskazówki dotyczące Narzędzi deweloperskich
- więcej…
Teraz, gdy już wiesz, o co chodzi, zobaczmy, jak przyspieszyć działanie witryny mobilnej za pomocą Narzędzi deweloperskich. Jeśli po raz pierwszy korzystasz z Narzędzi deweloperskich w Chrome na Androidzie, zapoznaj się z przewodnikiem dla początkujących na dole artykułu.
Zdalne korzystanie z Narzędzi deweloperskich w Chrome
gdy urządzenie z Androidem jest połączone z komputerem, W Chrome na komputerze otwórz stronę http://localhost:9222, a na urządzeniu z Androidem otwórz swoją witrynę. Przejdziesz do listy otwartych kart na urządzeniu z Androidem. Wybierz stronę z listy „Strony, które można sprawdzić”.
i zostaną otwarte Narzędzia deweloperskie w Chrome dla tej strony.
Aww… that familiar Chrome DevTools toolbar is right there. Najważniejsze, co trzeba wiedzieć o zdalnych Narzędziach deweloperskich w Chrome, to fakt, że są to te same narzędzia, których używasz obecnie na komputerze. Jedyna różnica polega na tym, że urządzenie z Androidem odpowiada tylko za stronę, a komputer – za Narzędzia deweloperskie. W obu przypadkach gromadzone są te same dane i dostępne są te same funkcje.
Na przykład na telefonie odwiedziłem stronę www.sfgate.com/movies. W Narzędziach deweloperskich w Chrome na komputerze najechałem kursorem na element div w narzędziu Elementy i podobnie jak na komputerze, element div został wizualnie wyróżniony na urządzeniu z Androidem.
Narzędzie Elementy może też służyć do włączania i wyłączania stylów, co przyda się podczas badania czasu renderowania.
Dostęp do sieci
Wydajność sieci jest ważna, a w przypadku internetu mobilnego ma jeszcze większe znaczenie. Urządzenia mobilne często korzystają z wolniejszych połączeń niż komputery stacjonarne i laptopy. Aby upewnić się, że robisz to prawidłowo, zrób zrzut sieci, przechodząc do narzędzia Sieć i naciskając przycisk nagrywania.
Zrzut ekranu przedstawia ruch w sieci wynikający z wyszukiwania w Google. Obserwuj żądania sieciowe wysyłane przez Twoją witrynę i znajdź sposoby na ich ograniczenie. Jeśli Twoja witryna wysyła do serwera żądania odpytywania, warto zwrócić uwagę na aktywność użytkownika i unikać odpytywania, gdy użytkownik jest nieaktywny. Narzędzie Sieć umożliwia wyświetlanie nieprzetworzonych nagłówków HTTP, co jest przydatne, gdy sieci komórkowe je zmieniają.
Optymalizacja czasu renderowania
Jednym z największych wąskich gardeł w przeglądarkach mobilnych jest renderowanie strony. Malowanie to proces rysowania elementu na stronie z określonym stylem. Jeśli jeden element wymaga dużo zasobów do wyrenderowania, spowalnia to renderowanie całej strony. Chrome próbuje zapisać wcześniej wyrenderowane elementy w pamięci podręcznej w buforze poza ekranem. Jednak na urządzeniach mobilnych ilość dostępnej pamięci RAM GPU jest ograniczona, co ogranicza liczbę elementów, które można zapisać w pamięci podręcznej poza ekranem. Efektem ubocznym jest więcej renderowań, a każde z nich jest wolniejsze niż na komputerze. Aby przewijanie było płynne, musisz zminimalizować czas renderowania.
Chrome 25 zawiera tryb ciągłego ponownego renderowania strony. W trybie ciągłego ponownego renderowania strony elementy renderowane nigdy nie są zapisywane w pamięci podręcznej, a zamiast tego wszystkie elementy są renderowane w każdej klatce. Wymuszając renderowanie wszystkich elementów w każdej klatce, można przeprowadzić testy A/B czasu renderowania, włączając i wyłączając elementy oraz style. Chociaż proces ten jest wykonywany ręcznie, jest to nieocenione narzędzie do śledzenia, jak kosztowne jest renderowanie każdego elementu na stronie. Pierwsza zasada optymalizacji to zmierzenie tego, co próbujesz zoptymalizować, aby uzyskać punkt odniesienia. Przeanalizujmy prosty przykład.
Najpierw włącz tryb ciągłego odświeżania strony:
Po włączeniu tej opcji w prawym górnym rogu urządzenia z Androidem pojawi się wykres. Oś X wykresu reprezentuje czas podzielony na klatki. Oś Y wykresu przedstawia czas renderowania w milisekundach. Jak widać, na moim urządzeniu wyrenderowanie strony zajmuje 14 milisekund. Wyświetlane są też minimalne i maksymalne czasy renderowania oraz wykorzystanie pamięci GPU.
W ramach eksperymentu ustawiam styl wybranego elementu na display: none. Zobaczmy, jak kosztowne jest teraz renderowanie strony.
Czas renderowania spadł z około 14 milisekund na klatkę do 4 milisekund na klatkę. Innymi słowy, namalowanie tego jednego elementu zajęło około 10 milisekund. Przez włączanie i wyłączanie elementów oraz stylów możesz szybko zawęzić obszar poszukiwań do kosztownych części strony. Pamiętaj, że szybsze renderowanie oznacza mniej zacięć, dłuższą żywotność baterii i większe zaangażowanie użytkowników. Jeśli chcesz dowiedzieć się więcej, przeczytaj ten świetny artykuł o trybie ciągłego odświeżania strony.
Funkcje zaawansowane
about:tracing
Wiele bardziej zaawansowanych funkcji dla deweloperów dostępnych w Chrome na komputery jest też dostępnych w Chrome na Androida. Dostępne są na przykład strony about:gpu-internals, about:appcache-internals i about:net-internals. Podczas badania szczególnie trudnego problemu czasami potrzebujesz więcej danych, aby ustalić jego przyczynę. Na komputerze możesz używać about:tracing. Jeśli nie znasz jeszcze narzędzia about:tracing, obejrzyj mój film o korzystaniu z narzędzia do profilowania about:tracing i jego funkcjach. Możesz przechwycić te same dane z Chrome na Androidzie. Aby rozpocząć, wykonaj te czynności:
- Pobierz plik adb_trace.py.
- Uruchamianie adb_trace.py z wiersza poleceń
- Korzystanie z Chrome na Androidzie
- Naciśnij Enter w wierszu poleceń, aby wyłączyć skrypt adb_trace.py.
Po zakończeniu działania skryptu adb_trace.py otrzymasz plik JSON, który możesz wczytać w about:tracing w Chrome na komputerze.
Przewodnik dla początkujących
Wiemy już, co potrafią zdalne Narzędzia deweloperskie w Chrome. Teraz zobaczmy, jak rozpocząć sesję zdalnego debugowania. Jeśli nie masz doświadczenia w korzystaniu z tych funkcji, przeczytaj szczegółowe instrukcje, jak zacząć. Jeśli już z nich korzystasz, ale nie pamiętasz dokładnie, jak to robić, znajdziesz tu też skrócone instrukcje.
1. Zainstaluj pakiet Android SDK
Możesz się zastanawiać, dlaczego musisz zainstalować pakiet Android SDK, skoro tworzysz aplikację internetową. Pakiet SDK zawiera narzędzie adb (Android Debug Bridge). Chrome na komputerze musi mieć możliwość komunikowania się z urządzeniem z Androidem. Chrome nie komunikuje się bezpośrednio z urządzeniem z Androidem, ale przekierowuje komunikację przez adb.
2. Włączanie debugowania USB na urządzeniu
Opcję włączenia debugowania USB znajdziesz w ustawieniach Androida. Włącz ją.
3. Połącz z urządzeniem
Jeśli nie zostało to jeszcze zrobione, połącz urządzenie z Androidem z komputerem przez USB. Jeśli używasz debugowania USB po raz pierwszy, zobaczysz ten komunikat:
Jeśli będziesz często przeprowadzać sesje zdalnego debugowania, zalecam zaznaczenie opcji „Zawsze zezwalaj z tego komputera”.
4. Sprawdzanie, czy urządzenie jest prawidłowo podłączone
W wierszu poleceń uruchom adb devices. Twoje urządzenie powinno być widoczne na liście.
5. Włączanie debugowania USB w Chrome
Otwórz Ustawienia > Zaawansowane > Narzędzia deweloperskie i zaznacz opcję Włącz debugowanie 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 a urządzeniem z Androidem za pomocą adb. Jeśli napotkasz jakieś problemy, zapoznaj się ze szczegółowymi instrukcjami konfiguracji tutaj.
7. Sprawdzanie, czy wszystko jest gotowe
Sprawdź, czy urządzenie jest prawidłowo połączone, otwierając Chrome na komputerze i wchodząc na stronę http://localhost:9222. Jeśli pojawi się błąd 404 lub inny błąd albo nie zobaczysz czegoś takiego:
Szczegółowe instrukcje konfiguracji znajdziesz tutaj.
Podsumowanie
Użytkownicy urządzeń mobilnych często się spieszą i chcą szybko znaleźć na Twojej stronie ważne informacje. Twoim obowiązkiem jako twórcy witryny mobilnej jest zadbanie o to, aby wczytanie strony było szybkie i dobrze działało na urządzeniach mobilnych. Jeśli nie, zaangażowanie użytkowników spadnie. Zdalne Narzędzia deweloperskie w Chrome są funkcjonalnie równoważne ich odpowiednikom na komputerze. Interfejs jest na tyle podobny, że nie musisz uczyć się obsługi nowego zestawu narzędzi. Innymi słowy, Twój przepływ pracy jest przenoszony. Pamiętaj, że Facebook nie jest odporny na problemy z wydajnością, podobnie jak Twoja witryna. Wydajne strony bardziej angażują użytkowników.