Poszukiwanie możliwości poprawy komfortu użytkowania narzędzi internetowych Chrome.
Dziś omówimy nowe funkcje narzędzi w Lighthouse, PageSpeed i Narzędzia deweloperskie, by sprawdzić, jak można ulepszyć witrynę pod kątem wskaźników internetowych.
W ramach przypomnienia o narzędziach Lighthouse to zautomatyzowane narzędzie open source służące do poprawiania jakości stron internetowych. Znajdziesz go w pakiecie narzędzi do debugowania Chrome DevTools. Uruchamiasz go na dowolnej stronie internetowej, publicznej lub wymagającej uwierzytelnienia. Narzędzie Lighthouse znajdziesz też w narzędziach PageSpeed Insights, CI i WebPageTest.
Narzędzie Lighthouse w wersji 7.x zawiera nowe funkcje, takie jak zrzuty ekranu z elementami, które ułatwiają wizualną kontrolę elementów interfejsu, co wpływa na wskaźniki związane z wrażeniami użytkownika (np. które węzły przyczyniają się do przesunięcia układu).
Wprowadziliśmy też obsługę zrzutów ekranu elementów w PageSpeed Insights, co ułatwia wykrywanie problemów w przypadku jednorazowych uruchomień stron.
Mierzenie podstawowych wskaźników internetowych
Narzędzie 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 (błędny serwer proxy opóźnienia przy pierwszym działaniu). Te wskaźniki pokazują wczytywanie, stabilność układu i gotowość do interakcji. Dostępne są też inne dane, np. Pierwsze wyrenderowanie treści opisane w przyszłości podstawowych wskaźników internetowych.
Sekcja „Dane” w raporcie Lighthouse zawiera wersje laboratoryjne tych danych. Możesz w ten sposób zobaczyć, które aspekty wygody użytkowników wymagają Twojej uwagi.
Dane pól, np. te w Raporcie na temat użytkowania Chrome czy RUM, nie ograniczają tego ograniczenia i stanowią cenne uzupełnienie danych laboratoryjnych, ponieważ odzwierciedlają wrażenia rzeczywistych użytkowników. Dane terenowe nie mogą zapewnić tych informacji diagnostycznych, które otrzymujesz w laboratorium, więc oba te rozwiązania idą ze sobą.
Sprawdź, co możesz poprawić w przypadku wskaźników internetowych
Określ największe wyrenderowanie treści
LCP jest wskaźnikiem postrzeganego wczytywania. Wskazuje moment wczytywania strony, gdy główna – czyli „największa” – została wczytana i widoczna dla użytkownika.
Lighthouse przeprowadza audyt „Największe wyrenderowanie 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 ten element jest obrazem, ta informacja stanowi przydatną wskazówkę, że warto zoptymalizować wczytywanie tego obrazu. 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ępnie ładuj znalezione późno obrazy, aby poprawić LCP
Aby poprawić największe wyrenderowanie treści, wczytuj wstępnie najważniejsze obrazy banera powitalnego, jeśli zostaną wykryte późno przez przeglądarkę. Może się to zdarzyć, jeśli trzeba załadować pakiet JavaScript, zanim obraz będzie wykrywany.
Warto omówić kilka typowych pytań dotyczących wstępnego wczytywania obrazów LCP.
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 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żywają 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 wstępnego wczytywania, jeśli obraz LCP jest zdefiniowany w tle CSS? Tak.
Każdy obraz oznaczony jako obraz LCP zarówno za pomocą tła CSS, jak i elementu <img>, kwalifikuje się do wyświetlenia, jeśli zostanie odkryty na głębokości co najmniej 3.
Leniwe ładowanie obrazów poza ekranem i unikanie tego w przypadku LCP
Obrazy poza ekranem, które nie mają krytycznego znaczenia dla wygody użytkownika, mogą być wczytywane leniwie. Ta technika wstrzymuje pobranie obrazu, dopóki użytkownik nie przewinie strony w pobliżu. Może to zmniejszyć rywalizację o najważniejsze zasoby w sieci, a w niektórych przypadkach poprawić wskaźnik LCP. Audyt „Przekaż obrazy poza ekranem” może pomóc w tych kwestiach:
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. W audycie „Największe wyrenderowanie treści został wczytany leniwie największy obraz wyrenderowania treści” wskaż, czy obraz LCP jest nieprawidłowo leniwie ładowany:
Wskazanie wkładu w CLS
Skumulowane przesunięcie układu to wskaźnik stabilności wizualnej. Ten parametr określa, jak bardzo zmienia się wygląd treści na stronie. W Lighthouse jest kontrola debugowania CLS o nazwie „Unikaj dużych zmian 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 wczytaniu wartość może być trwała wizualizacja za pomocą prostokątów, które elementy miały największy wpływ na CLS. Tę funkcję znajdziesz w narzędziach innych firm, takich jak panel Podstawowe wskaźniki internetowe w firmie SpeedCurve. Uwielbiam ją używać generatora GIF-ów przesunięcia układu w Defaced na potrzeby:
Jeśli chodzi o problemy z przesunięciem układu w całej witrynie, korzystam z raportu dotyczącego podstawowych wskaźników internetowych w Search Console. Dzięki temu mogę zobaczyć rodzaje stron w mojej witrynie z wysokim CLS (w tym przypadku pomaga to określić, na których częściach szablonu muszę poświęcić czas):
Rozpoznawanie CLS na podstawie obrazów bez wymiarów
Aby ograniczyć skumulowane przesunięcie układu spowodowane przez obrazy bez wymiarów, uwzględnij atrybuty rozmiaru i szerokości obrazu w obrazach i elementach 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 na podstawie reklam
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. Możesz to włączyć w Lighthouse za pomocą wtyczek społeczności.
Pamiętaj, że reklamy mają największy udział w zmianach układu stron w internecie. Ważne:
- Zachowaj ostrożność, umieszczając reklamy nieprzyklejone w górnej części widocznego obszaru
- Wyeliminuj zmiany, rezerwując największy możliwy rozmiar dla boksu reklamowego
Unikaj nieskomponowanych animacji
Nieskomponowane animacje mogą wyświetlać się jako niezgrabne na urządzeniach z niższymi pakietami, jeśli główny wątek jest zajęty przez intensywne zadania JavaScriptu. Takie animacje mogą powodować przesunięcia układu.
Jeśli Chrome wykryje, że animacji nie można skomponować, zgłasza to w zrzucie danych w Narzędziach deweloperskich. Dzięki temu może wyświetlić listę elementów z animacjami, które nie zostały skomponowane i z jakiego powodu. Informacje o nich znajdziesz w audycie Unikaj nieskomponowanych 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, w którym przeglądarka może rozpocząć przetwarzanie modułów obsługi zdarzeń w odpowiedzi na tę interakcję. Długie zadania JavaScriptu mogą wpływać na ten wskaźnik oraz serwer proxy dla tego wskaźnika – łączny czas blokowania.
Lighthouse obejmuje kontrolę Unikaj długich zadań w wątku głównym, w ramach której wyświetlane są najdłuższe zadania w wątku głównym. Może to być pomocne przy identyfikowaniu najgorszych czynników wpływających na opóźnienia danych wejściowych. 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, które trwają dłużej niż 50 milisekund. Uznaje się, że blokuje on wątek główny na tyle długo, że może wpłynąć na liczbę klatek lub opóźnienie sygnału wejściowego.
Jeśli rozważam użycie usług innych firm do monitorowania, bardzo podoba mi się też wizualna oś czasu wykonywania wątków w Calibre do wizualizacji kosztów, która pokazuje zarówno zadania nadrzędne, jak i podrzędne, które są częścią 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 pomóc w poznaniu kosztów, jakie poszczególne skrypty (np.umieszczone przez inne firmy w witrynie lub trackery) ponoszą takie dane jak łączny czas blokowania (TBT) i czas do interakcji.
Blokowanie żądań sieciowych działa też z Lighthouse. Spójrzmy na raport Lighthouse dotyczący witryny. Wynik Perf to 63/100 przy czasie trwania 400 ms. Po przeanalizowaniu kodu okazuje się, że ta strona 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ć. Zrobimy to w przypadku kodu polyfill Intersection Observer.
Następnie możemy ponownie uruchomić Lighthouse. Tym razem widzimy, że nasz wynik wydajności poprawił się (70/100), ponieważ całkowity czas blokowania (400 ms => 300 ms).
Zastępowanie kosztownych elementów zewnętrznych komponentami fasadowymi
Często korzysta się z zasobów innych firm do umieszczania na stronach filmów, postów w mediach społecznościowych lub widżetów. 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 oprogramowanie firmy zewnętrznej nie jest kluczowe (np. gdy użytkownik musi przewinąć stronę, zanim ją zobaczy).
Jednym ze sposobów na poprawę wydajności takich widżetów jest leniwe ładowanie ich po interakcji z użytkownikiem. Można to zrobić przez wyrenderowanie lekkiego podglądu widżetu (elewację), a pełna wersja będzie ładowana tylko wtedy, gdy użytkownik wejdzie z nią w interakcję. W Lighthouse znajdziesz kontrolę nad zasobami zewnętrznymi, które można leniwie ładować za pomocą komponentu fasadowego, np. osadzonym filmem z YouTube.
Przypominamy, że Lighthouse wyróżnia kod spoza witryny, który blokuje wątek główny przez ponad 250 ms. Może to ujawnić wszelkiego rodzaju skrypty innych firm (w tym te stworzone przez Google), które mogą być w przypadku lepszego odroczenia lub leniwego ładowania, jeśli renderowanie wymaga przewijania.
Podstawowe wskaźniki internetowe
Oprócz podkreślania podstawowych wskaźników internetowych w najnowszych wersjach narzędzia Lighthouse i PageSpeed Insights możesz też podać konkretne wskazówki, dzięki którym poprawisz szybkość ładowania aplikacji internetowych wymagających dużej uwagi za pomocą JavaScriptu, jeśli masz włączone mapy źródłowe.
Obejmują one coraz większą liczbę audytów mających na celu zmniejszenie kosztów obsługi JavaScriptu na stronach, na przykład zmniejszenie zależności od kodu polyfill i duplikatów, które mogą nie być potrzebne ze względu na wygodę 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, autor: Mercedes Mehling na kanale Unsplash.