Lighthouse to automatyczne narzędzie do poprawiania jakości witryny. Wystarczy, że podasz jej adres URL i będziesz w stanie znaleźć listę rekomendacji dotyczących m.in. zwiększenia wydajności stron i ułatwienia ich dostępu do stron oraz stosowania się do sprawdzonych metod. Można go uruchamiać z poziomu Narzędzi deweloperskich w Chrome, jako rozszerzenie do Chrome lub nawet jako moduł węzła, co jest przydatne w przypadku ciągłej integracji.
Od jakiegoś czasu znajdziesz w nich wiele wskazówek dotyczących przyspieszenia wczytywania stron, np. włączenie kompresji tekstu lub zmniejszenie liczby skryptów blokujących renderowanie. Zespół Lighthouse stale udostępnia nowe audyty, które przedstawiają jeszcze bardziej przydatne wskazówki dotyczące przyspieszania działania witryn. Ten post zawiera podsumowanie przydatnych audytów skuteczności, o których możesz nie wiedzieć, takich jak:
- Podział pracy w wątku głównym
- Wstępnie wczytuj żądania kluczy
- Długi czas uruchamiania JavaScriptu
- Unika przekierowań strony
- Nieużywany JavaScript
- Wykorzystuje nieefektywną zasadę pamięci podręcznej zasobów statycznych
- Unikaj kosztownych, wielokrotnych podróży w obie strony
- Używanie formatów wideo w treściach animowanych
- Cały tekst pozostaje widoczny podczas wczytywania czcionek internetowych
- Ujednolicony kod CSS i JavaScript
- Nieużywane reguły CSS
Zestawienie pracy w wątku głównym
Użytkownicy, którzy kiedykolwiek korzystali z panelu wydajności w Narzędziach deweloperskich, wie, że sprawdzanie, w jaki sposób czas procesora został spędzony przy ładowaniu strony, może być nie lada wyzwaniem. Z przyjemnością informujemy, że te informacje są teraz łatwo i wygodnie dostępne w ramach nowego audytu Podział pracy w wątku głównym.
Ta nowa diagnostyka oszacowuje, ile i jakiego rodzaju aktywność występuje podczas wczytywania strony. Dzięki temu można rozwiązać problemy z wydajnością wczytywania związane z układem, oceną skryptów, analizą i innymi działaniami.
Wstępnie wczytuj żądania kluczy
Gdy przeglądarki pobierają zasoby, robią to, gdy znajdują odwołania do nich w dokumencie i jego zasobach podrzędnych. Czasami może to nie być optymalne, ponieważ niektóre zasoby o znaczeniu krytycznym są wykrywane na późnym etapie wczytywania strony. Na szczęście rel=preload umożliwia programistom wskazywanie zgodnych przeglądarkom, które zasoby powinny zostać pobrane najszybciej, jak to możliwe. Nowy audyt Wstępnie wczytuj kluczowe żądania pozwala deweloperom zorientować się, które zasoby mogą skorzystać na wcześniejszym ładowaniu przez rel=preload.
Bardzo ważne jest testowanie i porównywanie zmian wydajności z elementem rel=preload i bez niego, ponieważ może to wpływać na wydajność wczytywania w sposób, którego możesz się nie spodziewać. Na przykład wstępne wczytywanie dużego obrazu może opóźnić pierwsze wyrenderowanie, ale w drugim przypadku to obraz szybciej pojawi się w układzie.
Zwracaj uwagę na uzyskane wyniki.
Długi czas uruchamiania JavaScript
Po wczytaniu się zbyt dużej ilości kodu JavaScript strona może przestać odpowiadać, ponieważ przeglądarka go analizuje, kompilowa i wykonuje. Skrypty i reklamy innych firm to szczególnie źródło nadmiernej aktywności związanej ze skryptami, które mogą powodować zasypywanie nawet potężnych urządzeń. Nowy audyt Czas uruchamiania JavaScriptu jest wysoki, a także pokazuje ilość czasu pracy procesora poświęcanego przez każdy skrypt na stronie, wraz z jego adresem URL:
Przeprowadzając ten audyt, możesz też włączyć w panelu sieci plakietki innych firm i przefiltrować listę, aby zidentyfikować zasoby skryptów innych firm. Dane z tego audytu pozwolą Ci lepiej wykrywać źródła nadmiernej aktywności w języku JavaScript, które powodują przewrócenie strony z chwytliwej na powolną. W przypadku skryptów związanych z Twoją aplikacją możesz użyć takich technik jak dzielenie kodu i potrząsanie drzewami, aby ograniczyć ilość kodu JavaScript na każdej stronie witryny.
Unika przekierowywania stron
Czasami, gdy przeglądarka wysyła żądanie adresu URL, serwer może odpowiedzieć, przekazując kod stanu poziomu 300. Powoduje to przekierowanie przeglądarki na inny adres URL. Chociaż przekierowania są niezbędne do celów SEO i wygodności, wydłużają czas oczekiwania na żądania. Dotyczy to zwłaszcza sytuacji, gdy przekierowują do innych źródeł, co może wiązać się z dodatkowym wyszukiwaniem DNS i czasem negocjowania połączenia/TLS.
Przekierowania są niepożądane w przypadku stron docelowych w Twojej witrynie. Aby pomóc Ci skrócić czasy oczekiwania i poprawić wydajność wczytywania, Lighthouse udostępnia teraz funkcję Unikanie przekierowań strony, która informuje, kiedy nawigacja wywołuje przekierowania.
Pamiętaj, że ten audyt jest trudny do przeprowadzenia w Lighthouse w wersji deweloperskiej, ponieważ analizuje bieżący adres URL w pasku adresu strony, który odzwierciedla rozwiązanie wszystkich przekierowań. Najprawdopodobniej ten audyt zostanie wypełniony w interfejsie wiersza poleceń węzła.
Nieużywany JavaScript
W aplikacjach z dużą ilością JavaScriptu martwy kod może być poważnym problemem. Chociaż nie wiąże się z żadnymi kosztami wykonania, niesie to ze sobą inne niepożądane efekty. Niedziałający kod jest nadal pobierany, analizowany i kompilowany przez przeglądarkę. Wpływa to na wydajność wczytywania i czas uruchamiania JavaScriptu. Podobnie jak w przypadku panelu pokrycia w Narzędziach deweloperskich, kontrola Unused JavaScript (Nieużywany kod JavaScript) pokazuje kod JavaScript pobrany przez bieżącą stronę, ale nigdy nie jest używany.
Dzięki temu audytowi możesz wykryć w aplikacjach martwy kod i go usunąć, aby poprawić wydajność wczytywania i ograniczyć wykorzystanie zasobów systemu. Wskazówka: aby znaleźć te informacje, możesz też skorzystać z panelu pokrycia kodu w Narzędziach deweloperskich w Chrome.
Wykorzystuje nieefektywną zasadę pamięci podręcznej zasobów statycznych
Chociaż większość porad dotyczących wydajności dotyczy zwykle przyspieszenia wczytywania witryny po raz pierwszy, warto też skorzystać z pamięci podręcznej, aby przyspieszyć wczytywanie w przypadku powracających użytkowników. Kontrola używanie mało wydajnej zasady pamięci podręcznej w zasobach statycznych sprawdza nagłówki buforowania zasobów sieciowych i informuje, czy zasady pamięci podręcznej dla zasobów statycznych nie spełniają standardów.
Dzięki audytowi możesz łatwo znaleźć i rozwiązać problemy z bieżącymi zasadami pamięci podręcznej. Spowoduje to znaczne zwiększenie wydajności powracających użytkowników, którzy docenią dodatkową szybkość.
Unikaj kosztownych, wielokrotnych przejazdów w obie strony
Gdy przeglądarki pobierają zasoby z serwera, wyszukiwanie DNS i nawiązanie połączenia z serwerem może zająć sporo czasu.
rel=preconnect umożliwia programistom maskowanie tego opóźnienia przez nawiązywanie połączeń z innymi serwerami, zanim przeglądarka będzie miała odpowiednie uprawnienia. Audyt Unikaj kosztownych, wielokrotnych
przejazdów w obie strony do dowolnego punktu początkowego pomoże Ci odkryć możliwości wykorzystania usługi rel=preconnect.
rel=preconnect w Lighthouse.Gdy czas oczekiwania w przypadku zasobów z innych domen jest krótszy, użytkownicy odczują, że wszystko idzie trochę szybciej. Dzięki nowemu audytowi Lighthouse poznasz nowe możliwości
wykorzystania rel=preconnect w tym celu.
Używanie formatów wideo w treściach animowanych
Animowane pliki GIF są ogromne i często zużywają co najmniej kilkaset kilobajtów danych, a nawet kilka megabajtów. Jeśli zależy Ci na szybkości wczytywania, warto skorzystać z funkcji przekonwertowania tych GIF-ów na filmy. Na szczęście możesz skorzystać z audytu Używanie formatów wideo w treściach animowanych.
Jeśli w Twojej witrynie znajdują się GIF-y o rozmiarze przekraczającym 100 KB, podczas audytu zostaną one automatycznie oznaczone i zapoznasz się ze wskazówkami dotyczącymi konwertowania ich na pliki wideo i umieszczania na stronach. Witryny takie jak Imgur znacznie usprawniają wczytywanie, konwertując GIF-y na filmy. Co więcej, jeśli Twoja witryna korzysta z hostingu z pomiarem przepustowości, same potencjalne oszczędności powinny Cię przekonać.
Cały tekst pozostaje widoczny podczas wczytywania czcionki internetowej
Gdy wczytujemy czcionki internetowe na potrzeby stron, przeglądarki często renderują niewidoczny tekst, dopóki czcionka się nie wczyta. Zjawisko to flash of Invisible Text (FOIT) może być dla Ciebie preferowane z punktu widzenia projektu, ale w rzeczywistości stanowi problem. Tekstu zablokowanego przed renderowaniem nie można odczytać, dopóki nie zostanie wyrenderowany i nie będzie widoczny. W przypadku połączeń o dużych opóźnieniach lub połączeniach o dużej przepustowości oznacza to, że brakuje istotnej części interfejsu użytkownika. Problem z wydajnością może również wynikać z tego, że strona nie wyświetla istotnych treści tak szybko, jak by to było możliwe. Na szczęście kontrola cały tekst pozostaje widoczny podczas wczytywania czcionki internetowej pomaga znaleźć sposoby naprawienia tego problemu w witrynie.
Jeśli Lighthouse znajdzie w Twojej aplikacji czcionki internetowe, które opóźniają renderowanie tekstu, jest kilka sposobów, by go rozwiązać. Renderowaniem tekstu możesz sterować za pomocą właściwości CSS font-display lub interfejsu Font Wczytuję API.
Jeśli chcesz dowiedzieć się więcej, przeczytaj A kompleksowy przewodnik po strategiach ładowania czcionek przygotowany przez Zach Leathermana. Znajdziesz w nim przydatne informacje o optymalnym ładowaniu czcionek.
Ujednolicony kod CSS i JavaScript
Minifikacja to sugerowana technika, ponieważ wydajność witryny jest rzeczą powszechnie – i to nie bez powodu. Znacznie zmniejsza rozmiar zasobów tekstowych, co z kolei zwiększa wydajność wczytywania. Łatwo jednak przeoczyć tę optymalizację, zwłaszcza wtedy, gdy nie korzystasz z procesów tworzenia. Podczas kontroli Minify CSS i Minify JavaScript lista zostanie skompilowana lista niezminimalizowanych zasobów znalezionych na bieżącej stronie. Następnie możesz ręcznie zmniejszyć te pliki lub ulepszyć system kompilacji.
Nieużywane reguły CSS
Gdy strona zagłębia się w zęb na długi czas, nie da się uniknąć skutków refaktoryzacji. Jednym z takich źródeł są nieużywane reguły CSS, które nie są już niezbędne do działania witryny, ale nadal wykorzystują przepustowość. Dla Twojej wygody audyt Unused CSS Rules pokazuje, które zasoby CSS na stronie zawierają nieużywane elementy CSS.
Jeśli Lighthouse znajdzie na stronie nieużywany kod CSS, możesz się go pozbyć. Jednym z narzędzi, które robi to automatycznie (chociaż należy używać go z rozwagą), jest UnCSS. Bardziej ręczna metoda wymaga korzystania z panelu pokrycia kodu w Narzędziach deweloperskich. Pamiętaj jednak, że nieużywany kod CSS na jednej stronie może być potrzebny na innej. Innym sposobem może być podzielenie CSS na pliki związane z szablonami, które są ładowane tylko wtedy, gdy jest to konieczne. Niezależnie od tego, co zdecydujesz się zrobić, Lighthouse poinformuje Cię, czy Twoje usługi porównywania cen słabo radzą sobie.
Wypróbuj Lighthouse
Jeśli nie interesują Cię te nowe audyty, zaktualizuj Lighthouse i spróbuj swoich sił.
- Rozszerzenie Lighthouse do Chrome powinno aktualizować się automatycznie, ale możesz to zrobić ręcznie na stronie
chrome://extensions. - W Narzędziach deweloperskich możesz uruchomić Lighthouse w panelu kontroli. Chrome aktualizuje się do nowej wersji co około 6 tygodni, więc niektóre nowsze kontrole mogą być niedostępne. Jeśli nie chcesz korzystać z najnowszych dostępnych audytów, możesz uruchomić najnowszy kod Chrome, pobierając Chrome Canary.
- Dla użytkowników węzłów: uruchom
npm update lighthouselubnpm update lighthouse -g, jeśli aplikacja Lighthouse została zainstalowana globalnie.
Specjalne podziękowania dla Kayce Basques, Patricka Hulce, Addy Osmani i Vinamrata Singal za ich cenne opinie, które znacząco podniosły jakość tego artykułu.