Poszukiwanie możliwości poprawy komfortu użytkowników dzięki narzędziom internetowym Chrome.
Dzisiaj omówimy nowe funkcje narzędzi Lighthouse, PageSpeed i Narzędzia deweloperskie, które pomogą Ci określić, jak witryna może poprawić wskaźniki internetowe.
Przypominam, że Lighthouse to zautomatyzowane narzędzie open source służące do poprawiania jakości stron internetowych. Możesz go znaleźć w pakiecie narzędzi do debugowania w Chrome DevTools i uruchomić go na dowolnej stronie internetowej, publicznej lub wymagającej uwierzytelniania. Znajdziesz ją też w PageSpeed Insights, CI i WebPageTest.
Lighthouse 7.x zawiera nowe funkcje, takie jak zrzuty ekranu elementów, ułatwiające wizualną kontrolę elementów interfejsu, które mają wpływ na wskaźniki obsługi (np. które węzły przyczyniają się do zmiany układu).
W narzędziu PageSpeed Insights dodaliśmy też obsługę zrzutów ekranu elementów, co ułatwia wykrywanie problemów przy jednorazowym wyświetlaniu stron z wydajnością.
Pomiar podstawowych wskaźników internetowych
Lighthouse może syntetycznie mierzyć dane dotyczące podstawowych wskaźników internetowych, w tym największe wyrenderowanie treści, skumulowane przesunięcie układu i całkowity czas blokowania (serwer proxy modułu do opóźnienia przy pierwszym działaniu). Te dane odzwierciedlają ładowanie, stabilność układu i gotowość do interakcji. Dostępne są też inne dane, np. Pierwsze wyrenderowanie treści, o którym wspominamy w przyszłości podstawowych wskaźników internetowych.
Sekcja „Dane” raportu Lighthouse zawiera wersje laboratoryjne tych danych. Możesz użyć tego widoku jako podsumowania działań, które wymagają Twojej uwagi.
Dane pól, np. w Raporcie na temat użytkowania Chrome lub RUM, nie mają tego ograniczenia i stanowią cenne uzupełnienie danych laboratoryjnych, ponieważ odzwierciedlają wrażenia rzeczywistych użytkowników. Nie zapewniają one danych diagnostycznych, które można uzyskać w laboratorium, dlatego obie usługi idą ze sobą w parze.
Dowiedz się, co możesz poprawić pod kątem wskaźników internetowych
Identyfikowanie elementu o największym wyrenderowaniu treści
LCP to miara postrzeganego wczytywania. Wskazuje miejsce podczas wczytywania strony, w którym załadowano główną – lub „największą” – treść i jest ona widoczna dla użytkownika.
Lighthouse przeprowadza audyt „Największy wyrenderowany element treści”, który wskazuje, który element był największą wyrenderowaną treścią. Najedź kursorem na ten element, aby podświetlić go w głównym oknie przeglądarki.
Jeśli ten element to obraz, ta informacja stanowi przydatne wskazówkę, że warto zoptymalizować wczytywanie obrazu. Lighthouse udostępnia wiele audytów optymalizacji obrazów. Pomagają one określić, czy obrazy można lepiej skompresować, zmienić ich rozmiar lub wyświetlić w bardziej optymalnym, nowoczesnym formacie.
Zakładka LCP Annie Sullivan może być przydatna do szybkiego identyfikowania elementu LCP za pomocą czerwonego prostokąta za pomocą jednego kliknięcia.
Aby poprawić LCP, wczytuj wstępnie obrazy wykryte późno
Aby ulepszyć największe wyrenderowanie treści, wczytuj wstępnie krytyczne obrazy banera powitalnego, jeśli użytkownik wykryje je zbyt późno. Późne wykrywanie może wystąpić, jeśli przed odnalezieniem obrazu trzeba wczytać pakiet JavaScript.
Oto kilka częstych pytań dotyczących wstępnego wczytywania obrazów LCP, którym warto się pokrótce przyjrzeć.
Czy można wstępnie wczytywać 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 dodaniu atrybutów imagesrcset i imagesizes do atrybutu link możemy wstępnie wczytywać obraz elastyczny, korzystając z tej samej logiki wyboru obrazów, którą stosują 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ż wyróżniać możliwości wstępnego wczytywania, jeśli obraz LCP jest zdefiniowany na tle CSS? Tak.
Każdy obraz oznaczony jako obraz LCP w tle CSS lub w elemencie <img> będzie kandydatem, jeśli zostanie znaleziony na głębokości co najmniej 3 w kaskadzie.
Leniwe ładowanie obrazów poza ekranem i unikanie tego w przypadku LCP
Obrazy spoza ekranu, które nie mają kluczowego znaczenia dla początkowego wrażenia użytkownika, mogą być ładowane leniwie. Jest to technika, która opóźnia pobranie obrazu, dopóki użytkownik nie przewinie w jego pobliżu, co może ograniczyć rywalizację sieci o krytyczne zasoby, a w niektórych przypadkach poprawić LCP. Audyt „Odrocz obrazy poza ekranem” może być pomocny w tych kwestiach:
Krytyczne obrazy w części strony widocznej na ekranie, takie jak obraz największego wyrenderowania treści, nie powinny być leniwie ładowane. Mogłoby to opóźnić wczytywanie obrazu LCP. Jeśli obraz LCP jest nieprawidłowo ładowany leniwie, zostanie wyświetlony komunikat z kontroli „Największy obraz wyrenderowania treści został leniwie wczytany”:
Określ wpływ CLS
Zbiorcze przesunięcie układu to miara stabilności wizualnej. Wskazuje, jak bardzo zmienia się wygląd treści strony. W Lighthouse dostępny jest audyt na potrzeby debugowania CLS o nazwie „Unikaj dużych zmian w układzie”.
Ten audyt wyróżnia elementy DOM, które w największym stopniu przyczyniają się do zmian 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 elementu Lighthouse możemy zarówno wyświetlić podgląd kluczowych elementów wymienionych w audycie, jak i kliknąć, aby powiększyć, aby uzyskać bardziej przejrzysty obraz:
W przypadku CLS po wczytaniu warto trwale wizualizować za pomocą prostokątów te elementy, które miały największy wpływ na CLS. Tę funkcję znajdziesz w narzędziach innych firm, na przykład w panelu podstawowych wskaźników internetowych w narzędziu SpeedCurve. Używam też generatora GIF-ów Defaced Layout Shift w przypadku:
Jeśli chodzi o problemy ze przesunięciem układu w całej witrynie, bardzo przydatna jest funkcja raportu dotyczącego podstawowych wskaźników internetowych w Search Console. Dzięki temu mogę zobaczyć rodzaje stron w witrynie o wysokim wskaźniku CLS (w tym przypadku pomaga mi to określić, na które części szablonu muszę poświęcić czas):
Rozpoznawanie CLS na obrazach bez wymiarów
Aby ograniczyć skumulowane przesunięcie układu spowodowane przez obrazy bez wymiarów, dodaj do obrazów i elementów wideo atrybuty szerokość i wysokość rozmiaru. To podejście daje gwarancję, że podczas wczytywania obrazu przeglądarka może przydzielić odpowiednią ilość miejsca w dokumencie.
Przeczytaj sekcję Ponowne ustawianie wysokości i szerokości obrazów, by dowiedzieć się, jak ważne jest uwzględnianie wymiarów i współczynnika proporcji obrazu.
Rozpoznawanie CLS na podstawie reklam
Publisher Ads for Lighthouse umożliwia znajdowanie sposobów na usprawnienie wczytywania reklam na stronie, w tym wkład w przesuwanie układu i długie zadania, które mogą przyspieszyć korzystanie z Twojej strony przez użytkowników. W Lighthouse możesz to włączyć za pomocą wtyczek społeczności.
Pamiętaj, że reklamy to jeden z największych czynników wpływających na zmiany układu w internecie. Ważne jest, aby:
- Zachowaj ostrożność przy umieszczaniu reklam nieprzyklejonych w górnej części widocznego obszaru
- Wyeliminuj przesunięcia, rezerwując dla boksu reklamowego największy możliwy rozmiar
Unikaj nieskomponowanych animacji
Nieskomponowane animacje mogą sprawiać wrażenie zaciętych na słabszych urządzeniach, jeśli ciężkie zadania JavaScriptu sprawiają, że wątek główny jest zajęty. Takie animacje mogą wprowadzać przesunięcia układu.
Jeśli Chrome wykryje, że animacji nie udało się skomponować, zgłasza ją w narzędziu DevTools odczytanych przez Lighthouse, co pozwala wskazać, które elementy z animacjami nie zostały skomponowane, i z jakiego powodu. Znajdziesz je w sekcji kontroli Unikanie nieskomponowanych animacji.
Debugowanie opóźnienia przy pierwszym działaniu / Całkowity czas blokowania / Długie zadania
Pierwsze wejście mierzy czas od pierwszej interakcji użytkownika ze stroną (np. od kliknięcia linku, kliknięcia przycisku lub użycia niestandardowego elementu sterującego JavaScript) do momentu, w którym przeglądarka może rozpocząć przetwarzanie modułów obsługi zdarzeń w odpowiedzi na tę interakcję. Długie zadania JavaScript mogą wpływać na ten wskaźnik i proxy dla tego wskaźnika – Całkowity czas blokowania.
Lighthouse obejmuje kontrolę Unikaj długich zadań w wątku głównym, która wyświetla najdłuższe zadania w wątku głównym. Pozwala to zidentyfikować czynniki o największym wpływie na opóźnienia danych. W lewej kolumnie widać adresy 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 wykonywane przez ponad 50 milisekund. Uznaje się, że blokuje to główny wątek na tyle długo, aby miał wpływ na liczbę klatek lub opóźnienie sygnału wejściowego.
Jeśli rozważasz korzystanie z usług innych firm do monitorowania, podoba mi się również wizualizacja osi czasu wykonywania wątku głównego do zwizualizowania tych kosztów, która wyróżnia zadania nadrzędne i podrzędne przyczyniające się do długich zadań wpływających na interaktywność.
Blokuj żądania sieciowe, aby zobaczyć w Lighthouse widoczne zmiany przed i po
Narzędzia deweloperskie w Chrome obsługują blokowanie żądań sieciowych, dzięki czemu można sprawdzić wpływ usunięcia lub niedostępności poszczególnych zasobów. Może pomóc w poznaniu kosztów poszczególnych skryptów (np.zewnętrznych lub zewnętrznych) powiązanych z danymi takimi jak całkowity czas blokowania (TBT) i czas do pełnej interaktywności.
Blokowanie żądań sieciowych działa też w Lighthouse. Przyjrzyjmy się pokrótce raportowi Lighthouse dla witryny. Wynik Perf to 63/100, a TB to 400 ms. Podczas sprawdzania kodu okazało się, że ta witryna wczytuje w Chrome zbędne pole polyfill Intersection Observer. Zablokujmy!
Możemy kliknąć prawym przyciskiem myszy skrypt w panelu DevTools i kliknąć Block Request URL, aby go zablokować. Wykorzystamy to w przypadku intersection Observer polyfill.
Teraz możemy ponownie uruchomić Lighthouse. Tym razem widzimy, że nasz wynik skuteczności poprawił się (70/100) wraz z całkowitym czasem blokowania (400 ms => 300 ms).
Zastąp kosztowne rozwiązania innych firm elementami fasadowymi
Do umieszczania filmów, postów w mediach społecznościowych i widżetów na stronach często można korzystać z zasobów innych firm. Domyślnie większość elementów umieszczanych na stronie szybko się wczytuje od razu i może zawierać kosztowne ładunki, które negatywnie wpływają na wygodę użytkowników. Jest to strata, jeśli nie jest to niezbędne (np. użytkownik musi przewinąć, aby zobaczyć ten komunikat).
Jednym ze wzorców poprawiających wydajność takich widżetów jest leniwe ładowanie ich podczas interakcji użytkownika. Można to zrobić przez wyrenderowanie lekkiego podglądu widżetu (fasadę) i wczytanie jego pełnej wersji tylko wtedy, gdy użytkownik wejdzie z nim w interakcję. Lighthouse przeprowadza audyt, który poleca zewnętrzne zasoby, które można leniwie ładować za pomocą komponentu fasadowego, np. umieszczone filmy z YouTube.
Przypominam, że Lighthouse wyróżnia kod zewnętrzny, który blokuje wątek główny przez ponad 250 ms. Może to ujawnić wszystkie rodzaje skryptów innych firm (w tym te utworzone przez Google), które warto odroczyć lub korzystać z leniwego ładowania, jeśli ich wyświetlenie wymaga przewijania.
Więcej niż podstawowe wskaźniki internetowe
Oprócz podkreślenia podstawowych wskaźników internetowych najnowsze wersje Lighthouse i PageSpeed Insights zawierają też konkretne wskazówki, które pomogą Ci poprawić szybkość wczytywania aplikacji internetowych z dużą ilością kodu JavaScript przy włączonej mapie źródeł.
Obejmują one coraz więcej audytów obniżających koszt kodu JavaScript na stronie, na przykład zmniejszając zależność od elementów polyfill i duplikatów, które mogą nie być niezbędne ze względu na wygodę użytkowników.
Więcej informacji o narzędziach związanych z podstawowymi wskaźnikami internetowymi znajdziesz na koncie zespołu Lighthouse na Twitterze i w sekcji Co nowego w Narzędziach deweloperskich.
Baner powitalny autorstwa Mercedes Mehling w serwisie Unsplash.