Poszukiwanie możliwości poprawy komfortu użytkowania narzędzi internetowych Chrome.
Dziś opowiem o nowych funkcjach w Lighthouse, PageSpeed i DevTools, które pomogą o tym, jak można poprawić jakość strony z wykorzystaniem wskaźników internetowych.
W ramach przypomnienia o narzędziach Lighthouse to zautomatyzowane narzędzie open source do poprawy jakości stron internetowych. Znajdziesz ją w Chrome pakietu narzędzi deweloperskich i wysyłaj ją do dowolnej strony internetowej, publicznej lub wymagającej uwierzytelnienia. Możesz też znaleźć Lighthouse w: PageSpeed Statystyki, CI oraz WebPageTest.
Lighthouse 7.x zawiera nowe funkcje, m.in. zrzuty ekranu elementów, które ułatwiają wizualne sprawdzenie elementów interfejsu wpływające na wskaźniki wygody użytkowników (np. które węzły przyczyniają się do układu Shift).
Dodaliśmy też obsługę zrzutów ekranu elementów w PageSpeed Insights, co pozwala łatwe wykrywanie problemów w przypadku jednorazowych uruchomień stron.
Mierzenie podstawowych wskaźników internetowych
Latarnia morska mierzyć syntetycznie Podstawowe wskaźniki internetowe, w tym największe wyrenderowanie treści, skumulowane wyrenderowanie treści Przesunięcie układu i Całkowity czas blokowania (serwer proxy modułu do Opóźnienie przy pierwszym działaniu). Te wskaźniki pokazują wczytywanie, stabilność układu i gotowość do interakcji. Inne dane, takie jak Pierwsze wyrenderowanie treści wyróżnione w przyszłości Dostępne są też podstawowe wskaźniki internetowe.
W sekcji „Dane” raportu Lighthouse znajdziesz w nim wersje laboratoryjne tych danych. Za pomocą by uzyskać ogólny obraz tego, na co należy zwrócić uwagę.
Dane pól, np. te z interfejsu Chrome UX Zgłoś lub RUM, nie mam tego i stanowią cenne uzupełnienie danych laboratoryjnych, ponieważ odzwierciedlają wrażenia rzeczywistych użytkowników użytkowników. Dane terenowe nie są w stanie udostępniać informacji diagnostycznych dostępnych w laboratorium, dlatego oba w dłoni.
Sprawdź, co możesz poprawić w przypadku wskaźników internetowych
Określ największe wyrenderowanie treści
LCP jest wskaźnikiem postrzeganego wczytywania. Zaznacza on moment wczytywania strony, w którym główna – lub „największa” – została wczytana i jest widoczna dla użytkownika.
Lighthouse ma „największy element wyrenderowania treści” w celu identyfikacji elementów, największego wyrenderowania treści. Najechanie kursorem na element spowoduje jego podświetlenie w głównym oknie przeglądarki.
Jeśli ten element jest obrazem, te informacje stanowią pożyteczną wskazówkę, że warto zoptymalizować wczytywanie tego obrazu. Lighthouse obejmuje wiele audytów optymalizacji obrazów, które pomogą Ci zrozumieć obraz, który można by lepiej skompresować, zmienić rozmiar lub wyświetlić w bardziej optymalnym, nowoczesnym obrazie .
Możesz też znaleźć LCP Bookmarklet autorstwa Annie Sullivan pozwala szybko zidentyfikować element LCP za pomocą czerwonego prostokąta jednym kliknięciem.
Wstępnie ładuj znalezione późno obrazy, aby poprawić LCP
Aby poprawić największe wyrenderowanie treści, wczytaj wstępnie bohatera krytycznego jeśli zostały odkryte z późno przez przeglądarkę. Późne wykrycie może nastąpić, jeśli Zanim obraz będzie wykrywalny, trzeba wczytać pakiet JavaScript.
Oto kilka często zadawanych pytań dotyczących wstępnego wczytywania obrazów LCP, które mogą być także wartościowe krótko mówiąc.
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 metody wyboru obrazu, która jest używana w elementach 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 wskaże też możliwości wstępnego wczytywania, jeśli obraz LCP jest zdefiniowany w usłudze porównywania cen? w tle? Tak.
Każdy obraz oznaczony jako obraz LCP zarówno za pomocą tła CSS, jak i <img>, jest kandydatem, jeśli jest
odkryte na głębokości co najmniej trzech wodospadów.
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. Narzędzie Lighthouse wskaże, że obraz LCP jest nieprawidłowo leniwie ładowany przez informację „Największe wyrenderowanie treści zostało wczytane leniwie”. audyt:
Wskazanie wkładu w CLS
Skumulowane przesunięcie układu to wskaźnik stabilności wizualnej. Wskazuje on stopień elementy wizualne się zmieniają. W Lighthouse jest audyt debugowania CLS o nazwie „Unikaj dużych zmian” „przesunięcia układu”.
Ten audyt wskazuje elementy DOM, które mają największy wpływ na zmiany na stronie. W elemencie po lewej stronie zobaczysz listę tych elementów DOM, a po prawej – ich ogólny CLS. darowiznę.
Dzięki nowej funkcji zrzutów ekranu w Lighthouse można zobaczyć podgląd kluczowych elementów ujętych w audycie, jak również funkcji „kliknij, aby powiększyć” w celu uzyskania bardziej przejrzystego widoku:
W przypadku CLS po wczytaniu można określić wartość w trwałym wizualizowaniu treści 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 Podstawowych wskaźników internetowych w SpeedCurve i które uwielbiam GIF-y z przesunięciem układu Defaced Generator:
Jeśli chodzi o problemy z przesunięciem układu w całej witrynie, korzystam z podstawowych funkcji Search Console Raport Wskaźniki internetowe Dzięki temu mogę zobaczyć, rodzaje stron w mojej witrynie z wysokim CLS (w tym przypadku pomagając w zidentyfikowaniu szablonu, części, którymi muszę się zająć):
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 szerokości i wysokości rozmiaru w elementach graficznych i wideo. Dzięki temu przeglądarka może przydzielić odpowiednią ilość miejsca w dokumencie podczas wczytywania obrazu.
Zobacz Ustawianie wysokości i szerokości zdjęć jest ważne. jeszcze raz dla dobrych artykułów na temat tego, jak ważne jest, aby wziąć pod uwagę wymiary i współczynnik proporcji obrazu.
Identyfikowanie CLS na podstawie reklam
Publisher Ads for Lighthouse umożliwia znajdowanie możliwości ulepszenia wczytywania reklam na stronie, w tym darowizn do przesunięcia układu i długich zadań, które mogą negatywnie wpłynąć na to, jak szybko strona będzie przydatna dla użytkowników. W Lighthouse, możesz to włączyć za pomocą wtyczek społeczności.
Pamiętaj, że reklamy są jednym największe czynniki mające wpływ na przesunięcia układu. 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 niższych urządzeniach, jeśli są obszerne. Zadania JavaScriptu zajmują się wątekem głównym. Takie animacje mogą powodować przesunięcia układu.
Jeśli Chrome wykryje, że animacji nie można skomponować, zgłosi ją w śledzeniu w Narzędziach deweloperskich. odczyty Lighthouse, umożliwiając wyświetlenie listy elementów z animacjami, które nie zostały skomponowane, oraz jaki jest powód. Możesz je znaleźć w sekcji Unikaj nieskomponowanych danych animacje.
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. od kliknięcia kliknij link, dotknij przycisku lub użyj własnego elementu sterującego opartego na JavaScripcie) może w odpowiedzi na tę interakcję rozpocząć przetwarzanie modułów obsługi zdarzeń. Długi JavaScript Zadania mogą mieć wpływ 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, która wskazuje najdłuższe zadania w wątku głównym. Może to pomóc w znalezieniu najgorszych czynników opóźnienie sygnału wejściowego. W lewej kolumnie widać adres URL skryptów odpowiedzialnych za długi wątek główny zadania.
Po prawej stronie widać czas trwania tych zadań. Przypominamy, że długie zadania to zadania, które i trwać dłużej niż 50 milisekund. Blokuje to wątek główny na tyle długo, wpływa na liczbę klatek i opóźnienie sygnału wejściowego.
Jeśli rozważam użycie usług innych firm do monitorowania, podoba mi się też wykonywanie wątku głównego oś czasu, wizualnej Calibre w celu zwizualizowania tych kosztów, co pokazuje zarówno działania nadrzędne, jak i podrzędne odpowiedzialne które wpływają na interaktywność.
Blokuj żądania sieciowe, aby sprawdzić wpływ w Lighthouse przed/po
Narzędzia deweloperskie w Chrome obsługują blokowanie sieci prośby aby sprawdzić wpływ usunięcia lub niedostępności poszczególnych zasobów. To może Ci się przydać co pozwoli Ci poznać koszty poszczególnych skryptów (np. elementów zewnętrznych umieszczonych na stronie lub śledzących). takimi jak Łączny czas blokowania (TBT) i Czas do interakcji.
Blokowanie żądań sieciowych działa też z Lighthouse. Przyjrzyjmy się Raport Lighthouse dotyczący witryny. Wynik Perf to 63/100 przy czasie trwania 400 ms. Analiza kodu Zauważyliśmy, że ta strona wczytuje w Chrome kod polyfill Intersection Observer, co nie jest konieczne. Zacznijmy zablokuj to!
Możemy kliknąć prawym przyciskiem myszy skrypt w panelu Network (Sieć) w Narzędziach deweloperskich i wybrać Block Request URL, aby zablokować
. Zrobimy to w przypadku kodu polyfill Intersection Observer.
Następnie możemy ponownie uruchomić Lighthouse. Tym razem widzimy, że nasz wynik skuteczności poprawił się (70/100), ponieważ ma 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 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 mieć kosztowne ładunki, co negatywnie wpływa na wygodę użytkowników. Nie warto tego robić, jeśli dane zewnętrzne nie są kluczowe (np. użytkownik musi przewinąć stronę, zanim je zobaczy).
Jednym ze sposobów na poprawę wydajności takich widżetów jest leniwe ładowanie ich u użytkownika interakcji. Można to zrobić przez renderowanie pliku lekki podgląd widżetu (fasada) i ładowanie pełnej wersji tylko po interakcji użytkownika. z nim. W Lighthouse jest audyt, który poleca zasoby zewnętrzne, które można leniwe ładowanie z fasadą, np. z osadzonymi filmami 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 podstawowych wskaźników internetowych w najnowszych wersjach narzędzia Lighthouse i PageSpeed Insights pojawiły podać konkretne wskazówki, które pomogą poprawić szybkość działania stron internetowych wymagających JavaScriptu jeśli masz włączone mapy źródeł, aplikacje mogą się ładować.
Obejmują one coraz większą liczbę audytów mających na celu zmniejszenie kosztów obsługi języka JavaScript na stronach, takich jak jak zmniejszyć zależność 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 w Lighthouse zespół konto na Twitterze i Co nowego w Narzędzia deweloperskie.
Baner powitalny – autor: Mercedes Mehling w sekcji Unsplash.