znajdowanie możliwości poprawy wygody użytkowników dzięki narzędziom internetowym w Chrome;
Opublikowano: 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ę elementów 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.
Mierzenie 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 wskaźniki pokazują 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.
Sekcja „Dane” w raporcie Lighthouse zawiera wersje laboratoryjne tych danych. Możesz go używać jako podsumowania aspektów wrażeń użytkownika, 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 pod kątem podstawowych wskaźników internetowych
Określ największe wyrenderowanie 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. Najechanie kursorem na element spowoduje jego podświetlenie w głównym oknie przeglądarki.
Jeśli jest to obraz, ta informacja może być przydatnym podpowiedzią, że warto zoptymalizować jego wczytywanie. Lighthouse obejmuje liczne audyty optymalizacji obrazów, które pomagają określić, czy można lepiej skompresować i zmienić rozmiar obrazów albo wyświetlić je w bardziej optymalnym, nowoczesnym formacie.
Może Ci się też przydać Bookmarklet od Annie Sullivan, która pomoże Ci szybko zidentyfikować element LCP za pomocą czerwonego prostokąta – wystarczy jedno kliknięcie.
Wstępne wczytywanie obrazów odkrytych późno, 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 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 elastyczny baner powitalny określony za pomocą atrybutów srcset i sizes poniżej:
<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 wstępnie wczytywać obrazy elastyczne, korzystając z tej samej logiki wyboru obrazu, której używa 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 największe wyrenderowanie 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 wskaźnik 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 zmiany na stronie. 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 zrzutów ekranu w Lighthouse można zobaczyć podgląd kluczowych elementów uwzględnionych w audycie oraz opcję powiększenia w celu uzyskania bardziej przejrzystego widoku:
W przypadku CLS po załadowaniu może być przydatne trwałe 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 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.
Przeczytaj artykuł Ustawianie wysokości i szerokości obrazów jeszcze raz, aby dowiedzieć się, jak ważne są wymiary i współczynnik proporcji obrazu.
Identyfikowanie CLS w reklamach
Narzędzie Publisher Ads for Lighthouse określa możliwości usprawnienia wczytywania reklam na stronie, m.in. uwzględnia wpływ na zmiany układu i długie zadania, które mogą wpłynąć na to, jak szybko strona będzie przydatna dla użytkowników. W Lighthouse możesz włączyć tę funkcję za pomocą wtyczek społeczności.
Pamiętaj, że reklamy mają największy udział w zmianach układu stron w internecie. Ważne jest, aby:
- Umieszczanie reklam nieprzyległych w górnej części widocznego obszaru
- Wyeliminuj przesunięcia, 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 zajmują 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 te informacje, co pozwoli mu określić, które elementy z animacjami 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
Pierwsze dane wejściowe to czas od pierwszej interakcji użytkownika ze stroną (np. kliknięcia linku, przycisku lub użycia niestandardowej opcji opartej na języku JavaScript) do momentu, gdy przeglądarka może zacząć przetwarzać moduły obsługi zdarzeń w odpowiedzi na tę interakcję. Długie zadania JavaScript mogą wpływać na ten wskaźnik oraz serwer proxy dla tego wskaźnika – łą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 zewnętrznych 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ść.
Blokuj żądania sieciowe, aby sprawdzić wpływ w Lighthouse przed/po
Narzędzia deweloperskie w Chrome obsługują blokowanie żądań sieciowych, dzięki czemu można sprawdzić wpływ usuwania 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 (TTI) 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 przeanalizowaniu kodu okazuje się, że ta witryna wczytuje w Chrome kod polyfill w obszarze Intersection Observer, który nie jest wymagany. Zablokujmy to.
Możemy kliknąć prawym przyciskiem myszy skrypt w panelu Network (Sieć) w Narzędziach deweloperskich i wybrać Block Request URL, aby go zablokować. W tym przypadku zrobimy to w przypadku polyfilla Intersection Observer.
Następnie możesz ponownie uruchomić Lighthouse. Tym razem nasz wynik skuteczności jest lepszy (70/100), ponieważ całkowity czas blokowania (400 ms) jest krótszy niż 300 ms.
Zastępowanie kosztownych wstawień z innych witryn 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ść osadzonych elementów od razu wczytuje się od razu i może wiązać się z kosztownymi ładunkami, które negatywnie wpływają na wrażenia użytkownika. Nie warto tego robić, jeśli dane firmy zewnętrznej nie są niezbędne (np. gdy użytkownik musi przewinąć stronę, zanim 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.
Przypominamy, że Lighthouse wyróżnia kod spoza witryny, 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 odłożyć na później lub wczytywać 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 do podstawowych wskaźników internetowych znajdziesz na kontach zespołu Lighthouse na Twitterze i w sekcji Co nowego w Narzędziach deweloperskich.
Baner powitalny autorstwa Mercedes Mehling na Unsplash.