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, publicznej lub 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 wskaźniki wrażeń użytkownika (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 pól, 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 pod kątem 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ć czas wyrenderowania największej części treści, przeładuj najważniejsze obrazy hero, jeśli są one późno wykrywane przez przeglądarkę. Wyszukiwanie może być opóźnione, jeśli pakiet JavaScript musi zostać załadowany, zanim obraz będzie dostępny.
Poniżej znajdziesz kilka często zadawanych 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 też 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 <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, w ramach 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 treści na stronie zmieniają swoje położenie. 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 zobaczysz 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 wyświetlić wizualny podgląd kluczowych elementów wskazanych w audycie oraz kliknąć, aby powiększyć obraz i uzyskać wyraźniejszy widok:
W przypadku CLS po załadowaniu może być przydatne stale wyświetlanie za pomocą prostokątów elementów, które mają największy wpływ na 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 narzędziu 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 w przypadku zmian układu i długich zadań, które mogą opóźnić udostępnienie strony użytkownikom. 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 weryfikacji Unikaj nieskompilowanych animacji.
Debugowanie opóźnienia przy pierwszym działaniu / łączny czas blokowania / długie zadania
First Input mierzy czas, jaki upływa od pierwszej interakcji użytkownika ze stroną (np. kliknięcia linku, przycisku lub użycia niestandardowego elementu sterującego JavaScript) do chwili, w której przeglądarka może rozpocząć przetwarzanie modułów obsługi 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 stronie znajduje się adres URL skryptów odpowiedzialnych za długie zadania w wątku głównym.
Po prawej stronie widać czas trwania tych zadań. Przypominamy, że długie zadania to zadania, które są wykonywane przez ponad 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, aby sprawdzić wpływ na Lighthouse przed i po zmianie
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 wpływu poszczególnych skryptów (np.wbudowanych skryptów lub skryptów śledzących innych firm) na dane takie jak łączny czas blokowania (TBT) i czas do interakcji.
Blokowanie żądań sieciowych działa też z Lighthouse. Przyjrzyjmy się raportowi Lighthouse dotyczącemu witryny. Wynik skuteczności to 63/100, a czas oczekiwania na odpowiedź 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żemy 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 drogich 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 zewnętrznych. Domyślnie większość elementów do wklejania jest wczytywana od razu 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. Można to zrobić, renderując uproszczoną podglądową wersję widżetu (fasadę) i wczytując pełną wersję tylko wtedy, gdy użytkownik z nią wejdzie w interakcję. Lighthouse zawiera audyt, który zaleca zasoby innych firm, które można leniwie wczytywać z użyciem komponentu fasadowego, np. wbudowane filmy w YouTube.
Przypominamy, że Lighthouse wyróżnia kod zewnętrzny, który blokuje wątek główny przez ponad 250 ms. Może to ujawnić wszelkie skrypty innych firm (w tym skrypty Google), które warto lepiej opóźnić 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 Twittera Lighthouse team oraz w artykule Co nowego w DevTools.
Baner powitalny autorstwa Mercedes Mehling na Unsplash.