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, CI i WebPageTest.
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.
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ładu i cał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 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.
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.
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.
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.
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”:
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”:
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.
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ć:
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:
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ć):
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.
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.
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.
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.
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ść.
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.
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.
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.
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.
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.
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.