Optymalizacja wskaźników internetowych za pomocą narzędzia Lighthouse

znajdowanie możliwości poprawy wygody użytkowników dzięki narzędziom internetowym w Chrome;

Data publikacji: 11 maja 2021 r.

Dzisiaj omówimy nowe funkcje narzędzi Lighthouse, PageSpeed i DevTools, które pomogą Ci określić, jak Twoja witryna może poprawić wskaźniki internetowe.

Przypominamy, że Lighthouse to automatyczne narzędzie typu open source służące do przeprowadzania audytów, dzięki któremu można poprawić jakość stron internetowych. Znajdziesz je w pakiecie narzędzi debugowania Narzędzia deweloperskie w Chrome. Możesz je uruchomić na dowolnej stronie internetowej, zarówno publicznej, jak i wymagającej uwierzytelnienia. Lighthouse znajdziesz też w PageSpeed Insights, CIWebPageTest.

Lighthouse 7.x zawiera nowe funkcje, takie jak zrzuty ekranu elementów, które ułatwiają wizualną kontrolę części interfejsu użytkownika wpływających na dane dotyczące wrażeń użytkowników (np. które węzły przyczyniają się do zmiany układu).

Wprowadziliśmy też obsługę zrzutów ekranu elementów w PageSpeed Insights, aby ułatwić wykrywanie problemów w przypadku jednorazowego skanowania wydajności stron.

Zrzuty ekranu elementów z wyróżnieniem węzła DOM, który przyczynia się do zmiany układu na stronie

Pomiar podstawowych wskaźników internetowych

Lighthouse może syntetycznie mierzyć podstawowe wskaźniki internetowe, w tym największe wyrenderowanie treści, skumulowane przesunięcie układucałkowity czas blokowania (zastępnik laboratoryjny dla opóźnienia przy pierwszym działaniu). Te dane odzwierciedlają wczytywanie, stabilność układu i gotowość do interakcji. Znajdziesz tam też inne dane, takie jak pierwsze wyrenderowanie treści, które zostało wyróżnione w przyszłości podstawowych wskaźników internetowych.

W sekcji „Dane” raportu Lighthouse znajdziesz wersje laboratoryjne tych danych. Możesz go używać jako podsumowania aspektów wrażeń użytkowników, które wymagają Twojej uwagi.

Dane o skuteczności Lighthouse
Pasek podstawowych wskaźników internetowych w panelu wydajności w Narzędziach deweloperskich
Nowa opcja Podstawowe wskaźniki internetowe w panelu Wydajność w narzędziach deweloperskich wyświetla ścieżkę, która wyróżnia momenty związane z danymi, np. przesunięcie układu (LS), jak pokazano powyżej.

Dane z pola, takie jak te zawarte w Raporcie na temat użytkowania Chrome lub RUM, nie mają tej wady i stanowią cenne uzupełnienie danych z testów laboratoryjnych, ponieważ odzwierciedlają wrażenia prawdziwych użytkowników. Dane z pola nie mogą zawierać takich informacji diagnostycznych jak dane z laboratorium, dlatego te dwa źródła informacji są ze sobą powiązane.

Określanie obszarów wymagających poprawy w przypadku podstawowych wskaźników internetowych

Identyfikowanie elementu największego wyrenderowania treści

LCP to pomiar postrzeganego czasu wczytywania. Oznacza na osi czasu wczytywania strony moment, w którym główna (czyli „największa”) zawartość została załadowana i jest widoczna dla użytkownika.

Lighthouse zawiera audyt „Element największego wyrenderowania treści”, który wskazuje, który element był największym wyrenderowaniem treści. Po najechaniu kursorem na element zostanie on wyróżniony w głównym oknie przeglądarki.

Element największego wyrenderowania treści

Jeśli elementem jest obraz, ta informacja może być przydatnym podpowiedzią, że warto zoptymalizować wczytywanie tego obrazu. Lighthouse zawiera kilka audytów optymalizacji obrazów, które pomogą Ci określić, czy obrazy można lepiej skompresować, zmienić ich rozmiar lub przesłać w bardziej nowoczesnym formacie.

Sprawdzanie prawidłowości rozmiarów obrazów

Możesz też skorzystać z bookmarkletu LCP autorstwa Annie Sullivan, który pozwala szybko zidentyfikować element LCP za pomocą czerwonego prostokąta – wystarczy jedno kliknięcie.

Podświetlanie elementu LCP za pomocą zakładki

Wstępne wczytywanie obrazów odkrytych później, aby poprawić LCP

Aby poprawić wartość Largest Contentful Paint, wstępnie wczytaj najważniejsze obrazy hero, jeśli przeglądarka późno je wykryje. Wyszukiwanie może być opóźnione, jeśli pakiet JavaScript musi zostać załadowany, zanim obraz będzie dostępny.

Wstępnie wczytaj obraz największego wyrenderowania treści

Poniżej znajdziesz kilka najczęstszych pytań dotyczących wstępnego wczytywania obrazów LCP, które warto krótko omówić.

Czy możesz wstępnie wczytać obrazy elastyczne? Tak. Załóżmy, że mamy obraz nagłówka w konfiguracji elastycznej, jak pokazano na rysunku poniżej:srcsetsizes

<img src="lighthouse.jpg"
         
srcset="lighthouse_400px.jpg 400w,
                  lighthouse_800px.jpg 800w,
                  lighthouse_1600px.jpg 1600w"
sizes="50vw" alt="A helpful
Lighthouse"
>

Dzięki atrybutom imagesrcset i imagesizes dodanym do atrybutu link możemy preloadować obraz elastyczny, używając tej samej logiki wyboru obrazu, która jest używana przez atrybuty srcset i sizes:

<link rel="preload" as="image" href="lighthouse.jpg"
           
imagesrcset="lighthouse_400px.jpg 400w,
                        lighthouse_800px.jpg 800w,
                        lighthouse_1600px.jpg 1600w"

imagesizes="50vw">

Czy audyt będzie również wskazywać możliwości wczesnego ładowania, jeśli obraz LCP jest zdefiniowany za pomocą tła CSS? Tak.

Każdy obraz oznaczony jako obraz LCP (czy to za pomocą tła CSS, czy za pomocą <img>) jest kandydatem, jeśli został znaleziony na poziomie co najmniej 3 poziomów kaskady.

Leniwe ładowanie obrazów poza ekranem i unikanie tego w przypadku LCP

Obrazy poza ekranem, które nie są kluczowe dla wrażeń użytkownika, mogą być wczytywane opóźnione. To technika, która opóźnia pobieranie obrazu do momentu, gdy użytkownik przewinie stronę w jego pobliżu. Może to zmniejszyć rywalizację w sieci o zasoby krytyczne i w niektórych przypadkach poprawić LCP. W tym przypadku może Ci pomóc audyt „Opóźnij wyświetlanie obrazów poza ekranem”:

Opóźnianie wyświetlania obrazów poza ekranem

Krytyczne obrazy w części strony widocznej na ekranie, takie jak obraz największego wyrenderowania treści, nie powinny być ładowane leniwie. Może to opóźnić wczytywanie obrazu LCP. Lighthouse wskaże, czy obraz LCP jest leniwie ładowany nieprawidłowo, za pomocą audytu „Obraz największego wyrenderowania treści został leniwie załadowany”:

Unikaj leniwego ładowania obrazów LCP

Identyfikowanie wpływu na CLS

Skumulowane przesunięcie układu to miara stabilności wizualnej. Mierzy on, jak bardzo zmienia się wygląd treści na stronie. Lighthouse zawiera audyt do debugowania CLS o nazwie „Unikaj dużych przesunięć układu”.

Ten audyt wskazuje elementy DOM, które mają największy wpływ na przesunięcia strony. W kolumnie Element po lewej stronie znajdziesz listę tych elementów DOM, a po prawej – ich ogólny udział w CLS.

Audyt „Unikaj dużych przesunięć układu” w Lighthouse, który wyróżnia odpowiednie węzły DOM przyczyniające się do CLS

Dzięki nowej funkcji Zrzuty ekranu elementów Lighthouse możemy zobaczyć wizualny podgląd kluczowych elementów wskazanych w audycie, a także kliknąć, aby powiększyć obraz i lepiej go zobaczyć:

Kliknięcie zrzutu ekranu elementu spowoduje jego rozwinięcie.

W przypadku CLS po załadowaniu może być przydatne stale wyświetlanie za pomocą prostokątów elementów, które najbardziej przyczyniły się do zwiększenia wartości CLS. Ta funkcja jest dostępna w narzędziach innych firm, takich jak panel podstawowych wskaźników internetowych SpeedCurve. Używam jej do generowania GIF-ów z przesunięciem układu w Defaced:

generator przesunięć układu, który wyróżnia przesunięcia

Aby uzyskać ogólny widok problemów z przesuwaniem układu, korzystam z raportu Search Console dotyczącego podstawowych wskaźników internetowych. Dzięki temu mogę zobaczyć, jakie strony w mojej witrynie mają wysoki wskaźnik CLS (w tym przypadku pomaga mi to samodzielnie określić, na których częściach szablonu muszę się skupić):

Search Console wyświetla problemy z CLS

Identyfikowanie CLS na podstawie obrazów bez wymiarów

Aby ograniczyć kumulatywny przesunięcie układu spowodowane przez obrazy bez wymiarów, dodaj atrybuty szerokości i wysokości do obrazów oraz elementów wideo. Dzięki temu przeglądarka może przydzielić odpowiednią ilość miejsca w dokumencie podczas wczytywania obrazu.

Sprawdzanie elementów graficznych bez wyraźnie określonej szerokości i wysokości

Więcej informacji o tym, jak ważne jest uwzględnianie wymiarów i formatu obrazu, znajdziesz w artykule Ustawianie wysokości i szerokości obrazów jest ważne.

Identyfikowanie CLS w reklamach

Reklamy wydawcy w Lighthouse umożliwiają znalezienie możliwości poprawy wczytywania reklam na stronie, w tym przyczyn zmian układu i długich zadań, które mogą opóźniać dostępność strony dla użytkowników. W Lighthouse możesz włączyć tę funkcję za pomocą wtyczek społeczności.

Audyt reklam wskazujący możliwości skrócenia czasu oczekiwania na żądanie i zmiana układu

Pamiętaj, że reklamy są jednym z największych czynników wpływających na zmiany układu w internecie. Ważne jest, aby:

  • Umieszczanie reklam nieprzyległych w górnej części widocznego obszaru
  • Zapobiegaj przesunięciom, rezerwując największy możliwy rozmiar dla boksu reklamowego.

Unikaj nieskomponowanych animacji

Nieskomponowane animacje mogą działać nieprawidłowo na urządzeniach niższych klas, jeśli obciążające zadania JavaScriptu będą zajmować wątki główne. Takie animacje mogą powodować zmiany układu.

Jeśli Chrome wykryje, że animacja nie została złożona, zgłasza to w śladzie w narzędziach dla programistów. Lighthouse odczytuje raport, aby określić, które elementy z animowanymi elementami nie zostały złożone i z jakiego powodu. Znajdziesz je w sprawozdaniu dotyczącym unikania nieskompilowanych animacji.

Sprawdzanie, czy nie ma nieskomponowanych animacji

Debugowanie opóźnienia przy pierwszym działaniu / łączny czas blokowania / długie zadania

Opóźnienie przy pierwszym działaniu mierzy czas od pierwszej interakcji użytkownika z witryną (np. kliknięcia linku, przycisku lub użycia niestandardowego elementu sterującego JavaScript) do chwili, gdy przeglądarka może rozpocząć przetwarzanie przetwarzaczy zdarzeń w odpowiedzi na tę interakcję. Długie zadania JavaScript mogą mieć wpływ na te dane i na ich odpowiednik w przypadku danych pośrednich, czyli na łączny czas blokowania.

Audyt dotyczący unikania długich zadań w wątku głównym

Lighthouse zawiera kontrolę Unikaj długich zadań w wątku głównym, która zawiera listę najdłuższych zadań w wątku głównym. Może to pomóc w identyfikacji czynników, które mają największy wpływ na opóźnienia działania. W kolumnie po lewej widzimy adres URL skryptów odpowiedzialnych za długie zadania w głównym wątku.

Po prawej stronie widać czas trwania tych zadań. Przypominamy, że długie zadania to zadania, które trwają dłużej niż 50 ms. Uważa się, że blokuje to wątek główny na tyle długo, że wpływa na częstotliwość wyświetlania klatek lub opóźnienie danych wejściowych.

Jeśli rozważasz korzystanie z usług innych firm do monitorowania, możesz też wykorzystać wizualizację harmonogramu wykonania głównego wątku w programie Calibre, która pozwala zobaczyć, które zadania nadrzędne i podrzędne przyczyniają się do długich zadań wpływających na interaktywność.

Wątek główny w Kaliberze ma na osi czasu

Blokowanie żądań sieciowych w celu sprawdzenia wpływu przed i po w Lighthouse

Narzędzia deweloperskie w Chrome umożliwiają blokowanie żądań sieciowych, aby sprawdzić wpływ usunięcia lub niedostępności poszczególnych zasobów. Może to być przydatne do zrozumienia, jaki wpływ na dane takie jak łączny czas blokowania (TBT) i czas do interakcji mają poszczególne skrypty (np.wbudowane elementy lub śledzenie innych firm).

Blokowanie żądań sieciowych działa też z Lighthouse. Przyjrzyjmy się raportowi Lighthouse dotyczącemu witryny. Wynik skuteczności to 63/100, a czas ładowania strony to 400 ms. Po zapoznaniu się z kodem stwierdziliśmy, że ta witryna wczytuje w Chrome niepotrzebną implementację Intersection Observer. Zablokujmy to.

Blokowanie żądań sieciowych

Aby zablokować skrypt, kliknij go prawym przyciskiem myszy w panelu Sieć w Narzędziach deweloperskich i kliknij Block Request URL. W tym przypadku zrobimy to w przypadku polyfilla Intersection Observer.

Blokowanie adresów URL żądań w Narzędziach deweloperskich

Następnie możesz ponownie uruchomić Lighthouse. Tym razem nasz wynik skuteczności się poprawił (70/100), ponieważ całkowity czas blokowania (400 ms) jest krótszy niż 300 ms.

Wyświetlanie po blokowaniu kosztownych żądań sieciowych

Zastępowanie kosztownych elementów zewnętrznych za pomocą komponentu fasadowego

Często do umieszczania na stronach filmów, postów w mediach społecznościowych lub widżetów używa się zasobów innych firm. Domyślnie większość elementów do wklejania jest wczytywana natychmiast i może zawierać kosztowne dane, które mogą negatywnie wpływać na wygodę użytkowników. Jest to nieefektywne, jeśli usługa zewnętrzna nie jest niezbędna (np. użytkownik musi przewinąć stronę, aby ją zobaczyć).

Jednym ze sposobów na poprawę wydajności takich widżetów jest opóźnione wczytywanie ich po interakcji z użytkownikiem. Aby to zrobić, możesz wyrenderować lekki podgląd widżetu (fasadę) i wczytać pełną wersję tylko wtedy, gdy użytkownik z nim wejdzie w interakcję. Lighthouse zawiera audyt, który zaleca zasoby z innych witryn, które można leniwie wczytywać z użyciem komponentu fasadowego, np. wbudowane filmy w YouTube.

kontrola wskazująca, że niektóre kosztowne zasoby zewnętrzne można zastąpić

Lighthouse podświetla kod zewnętrzny, który blokuje wątek główny przez ponad 250 ms. Może to ujawnić wszelkie skrypty innych firm (w tym te pochodzące od Google), które warto odłożyć na później lub wczytać z opóźnieniem, jeśli ich renderowanie wymaga przewijania.

Obniż koszty kontroli kodu JavaScript przeprowadzanej przez firmę zewnętrzną

Podstawowe wskaźniki internetowe i inne kwestie

Oprócz wskazywania podstawowych wskaźników internetowych najnowsze wersje Lighthouse i PageSpeed Insights zawierają też konkretne wskazówki, które możesz wykorzystać do przyspieszenia wczytywania aplikacji internetowych obciążonych JavaScriptem, jeśli masz włączone mapy źródeł.

Obejmują one stale rosnącą kolekcję audytów, które mają na celu zmniejszenie kosztów kodu JavaScript na stronie, np. ograniczenie korzystania z polyfilli i duplikatów, które mogą nie być potrzebne do zapewnienia wygody użytkowników.

Więcej informacji o narzędziach Core Web Vitals znajdziesz na koncie Twitter Lighthouse team oraz w artykule Co nowego w DevTools.

Baner powitalny autorstwa Mercedes Mehling na Unsplash.