Opublikowano: 17 września 2024 r.
W poprzednim poście omawialiśmy 3 nowe funkcje, które ułatwiają dostosowywanie przepływów pracy związanych z efektywnością w Narzędziach deweloperskich. Te ulepszenia ergonomii były tylko początkiem naszych wieloletnich działań, których celem było ułatwienie korzystania z DevTools i zoptymalizowanie podstawowych wskaźników internetowych. Dzisiaj wprowadzamy kolejną grupę funkcji: całkowicie przeprojektowaną stronę docelową w panelu Wydajność, która zawiera podgląd na żywo wydajności podstawowych wskaźników internetowych w Twojej witrynie.
W tym poście przyjrzymy się bliżej poszczególnym nowym funkcjom:
- Lokalne wyniki Core Web Vitals w czasie rzeczywistym
- Dane o doświadczeniach prawdziwych użytkowników
- Rekomendacje dotyczące konfigurowania środowiska lokalnego
- Informacje ułatwiające odtworzenie problemów
Lokalne wyniki podstawowych wskaźników internetowych w czasie rzeczywistym
Umiejętność pomiaru wydajności lokalnych wersji witryn jest kluczowym elementem procesu debugowania podstawowych wskaźników internetowych. Może to mieć wpływ na to, czy problemy są odtwarzane w taki sam sposób jak w przypadku prawdziwego użytkownika. Jednak mierzenie skuteczności na poziomie lokalnym nie zawsze było takie proste.
Do tej pory panel Wydajność w DevTools wyświetlał szczegółowy harmonogram żądań sieciowych i aktywności procesora, co było bardzo przydatnym narzędziem do debugowania wydajności. Jednak odtworzenie problemów z wydajnością może być trudne, ponieważ nie wiesz, czy wydajność jest niska, dopóki nie zakończy się nagrywanie. Jak wynika z doświadczeń z rozszerzeniem Web Vitals, dostęp do lokalnych danych o wydajności podstawowych wskaźników internetowych w DevTools może zmienić wszystko. Dlatego wykorzystaliśmy wszystkie informacje, które uzyskaliśmy dzięki temu rozszerzeniu, i postanowiliśmy wbudować te funkcje bezpośrednio w panelu „Wydajność”.
Po raz pierwszy wszystkie dane dotyczące podstawowych wskaźników internetowych są dostępne w panelu Wydajność. Otwórz panel Wydajność, aby natychmiast sprawdzić, jak działa Twoja aplikacja lokalna. Nie musisz jej nagrywać. W ogóle nie musisz nawet otwierać DevTools. Dane są zbierane w tle i są dostępne, gdy ich potrzebujesz. Ta funkcja przydaje się w każdej sytuacji, gdy nie próbujesz aktywnie debugować konkretnego problemu, ale coś działa wolno i chcesz się dowiedzieć, dlaczego.
W sekcji Dane lokalne panelu znajdziesz na żywo dane podstawowe wskaźniki internetowe: największe wyrenderowanie treści, skumulowane przesunięcie układu i czas od interakcji do kolejnego wyrenderowania. Te dane będą się aktualizować w czasie rzeczywistym, gdy będziesz wczytywać stronę i z nią wchodzić w interakcje. Są one też oznaczone kolorami według odpowiednich progresji dla dobrej i złej skuteczności, co ułatwia wykrywanie problemów ze skutecznością w miarę ich występowania.
Dane o zachowaniu rzeczywistych użytkowników
Optymalizowanie problemów z wydajnością, których większość użytkowników nigdy nie doświadcza, może nie być najlepszym sposobem na wykorzystanie czasu. Podobnie, jeśli lokalna wersja jest nierealistycznie szybka, prawdopodobnie pomijasz niektóre rzeczywiste problemy. Aby podjąć świadomą decyzję o tym, jak wykorzystać swój czas, porównaj wydajność lokalną z danymi o wrażeniach prawdziwych użytkowników.
Panel Skuteczność umożliwia teraz wyświetlanie danych o prawdziwych użytkownikach obok informacji o doświadczeniach lokalnych. Dane te są generowane przez publiczny interfejs CrUX API, który jest agregacją danych dotyczących wygody korzystania z danej strony internetowej i jej źródła przez rzeczywistych użytkowników w ciągu 28 dni. Aby go włączyć, w sekcji Dane pól kliknij Skonfiguruj i postępuj zgodnie z instrukcjami w oknie konfiguracji.
Pamiętaj, że poszczególne adresy URL i pochodzące z nich strony (czyli całe witryny) muszą spełniać określone kryteria kwalifikacji, aby mogły zostać uwzględnione w zbiorze danych CrUX. Wrażenia użytkowników są również agregowane według typów komputerów i urządzeń mobilnych, jeśli tylko jest wystarczająca ilość danych. Narzędzia deweloperskie zrobią, co w ich mocy, aby automatycznie wyświetlać najbardziej odpowiednie dane do Twojego lokalnego środowiska. Domyślnie będą używać tego samego adresu URL i typu urządzenia, jeśli są dostępne. Jeśli nie ma wystarczającej ilości danych na poziomie komputerów PC lub urządzeń mobilnych, spróbuje wyświetlić dane zagregowane na wszystkich typach urządzeń.
Oprócz wartości 75. percentyla możesz najechać kursorem na dowolne dane, aby zobaczyć proporcje wrażeń prawdziwych użytkowników w ramach poszczególnych ocen. W tym przykładzie lokalny pomiar Largest Contentful Paint jest wyjątkowo wolny, co odpowiada tylko 12% wrażeń prawdziwych użytkowników.
Dzięki tym danym uzyskasz znacznie wyraźniejszy obraz tego, jak bardzo wrażenia użytkowników są zbliżone do rzeczywistych, i będziesz mieć możliwość ich dostosowania, aby lepiej odzwierciedlały wrażenia typowego użytkownika.
Rekomendacje dotyczące konfigurowania środowiska lokalnego
Istnieje wiele różnic między danymi z testów laboratoryjnych a danymi z testów w warunkach rzeczywistych, które są wzmacniane przez wszystkie sposoby uzyskiwania dostępu do strony i interakcji z nią. Możesz uwzględnić niektóre z tych różnic i ulepszyć wrażenia użytkowników, dostosowując środowisko.
Gdy dane z pola są włączone i dostępne, w sekcji Ustawienia nagrywania pojawi się sugestia emulacji najpopularniejszego typu urządzenia używanego przez prawdziwych użytkowników. Po włączeniu trybu urządzenia możesz emulować rozmiar widocznego obszaru na urządzeniu mobilnym. Interfejsy responsywne mogą zmieniać element przypisany do największego wyrenderowania treści i mieć bardzo różne parametry wydajności. Układ mobilny może też wyświetlać określone elementy, np. menu nawigacyjne, z którym mogą wchodzić w interakcje tylko użytkownicy mobilni, lub powodować nietypowe zmiany układu, których nie ma na większych ekranach.
W tej sekcji możesz też znaleźć zalecaną konfigurację ograniczania przepustowości sieci, np. Wolne 4G. Rekomendacje sieci są oparte na czasie podróży (75. percentyl), który jest obliczany na podstawie danych o doświadczeniach prawdziwych użytkowników na danej stronie lub w danej witrynie. Wolniejsze prędkości sieci mogą sprawić, że parametry wczytywania strony będą bardziej realistyczne – zarówno w przypadku użytkowników komputerów, jak i urządzeń mobilnych – co może ułatwić znalezienie możliwości poprawy. Pamiętaj też, że przesunięcia układu są uwzględniane w danych dotyczących zbiorczego przesunięcia układu tylko wtedy, gdy nie wystąpią w ciągu 500 ms od interakcji. Jeśli przesunięcie układu inicjowane przez użytkownika jest wynikiem żądania sieci, ograniczenie przepustowości sieci może być jedynym sposobem na wyświetlenie go lokalnie.
Ograniczenie procesora to kolejny sposób na to, aby urządzenie lokalne działało jak prawdziwi użytkownicy. Ograniczanie procesora lepiej emuluje stosunkowo wolniejsze działanie urządzeń mobilnych, a szybsze maszyny wymagają jeszcze większego ograniczania. W niedawno wprowadzonej wersji Narzędzi deweloperskich można ograniczać obciążenie procesora o 20 razy. Jest to szczególnie przydatne w przypadku wydajnych komputerów stacjonarnych, z których często korzystają deweloperzy. Ograniczenie procesora spowoduje, że skrypty będą działać wolniej, co zwiększy prawdopodobieństwo, że staną się długimi zadaniami, które powodują problemy z czasem od interakcji do kolejnego wyrenderowania. Z tego samego powodu na inne wskaźniki Core Web Vitals może mieć wpływ wolniejsze wykonywanie skryptu, zwłaszcza jeśli blokuje on renderowanie największego fragmentu treści lub elementów, które zmieniają układ.
Skonfigurowanie środowiska lokalnego z bardziej realistycznymi ustawieniami widoku, sieci i procesora powinno ujawnić więcej problemów ze skutecznością, o których istnieniu użytkownik mógłby nie wiedzieć. Dzięki rekomendacjom opartym na danych o prawdziwych użytkownikach, które eliminują konieczność zgadywania, możesz się bardziej skupić na znajdowaniu i rozwiązywaniu tych problemów.
Informacje, które pomogą Ci odtworzyć problemy
Skuteczność lokalna zależy w dużej mierze od konfiguracji środowiska i od sposobu interakcji z tą stroną. Na przykład na typowej stronie internetowej element największego wyrenderowania treści nie jest zwykle obrazem w przypadku rozmiarów widocznego obszaru na urządzeniach mobilnych. Wpisywanie pojedynczego znaku w polu tekstowym może być szybkie, ale wpisywanie wielu znaków w szybkiej kolejności może spowodować słabe działanie funkcji Interakcja do następnego malowania. Aby ułatwić interpretację tych danych i ułatwić ich odtwarzanie, udostępniamy dodatkowe informacje.
Element LCP powiązany z danymi największego wyrenderowania treści zawiera link do samego elementu. Najechanie kursorem na link wyróżnia element na stronie. Kliknięcie linku spowoduje przejście do panelu Elementy, w którym możesz zobaczyć element w całym kontekście dokumentu.
Sekcja Interakcje to dziennik w czasie rzeczywistym wszystkich kwalifikujących się interakcji, które występują, gdy Narzędzia deweloperskie są otwarte. Gdy wpisujesz, klikasz lub stukasz, każda interakcja jest dodawana do dziennika wraz z dodatkowymi informacjami, które ułatwiają zrozumienie, co się stało i jak to odtworzyć.
Oprócz typu interakcji, który jest zdarzeniem związanym z wskaźnikiem lub klawiaturą, zobaczysz też odwołanie do celu interakcji. Podobnie jak element LCP, sam element docelowy jest interaktywny. Możesz najechać na niego kursorem, aby wyróżnić go na stronie, lub kliknąć, aby wyświetlić go w panelu Elementy. Wyświetlana jest też opóźnienie interakcji, które jest oznaczane tym samym kolorem co wartości progowe danych interakcji do kolejnego wyrenderowania, co ułatwia znalezienie najwolniejszych wartości.
Gdy uda Ci się odtworzyć problem z wydajnością, który próbujesz debugować, możesz rozpocząć profilowanie. W sekcji Kolejne kroki kliknij przycisk Nagraj i ponownie załaduj, aby debugować problemy z wydajnością wczytywania, takie jak największe wyrenderowanie treści i skumulowane przesunięcie układu w czasie wczytywania. Aby debugować problemy występujące w wyniku interakcji z użytkownikiem, użyj przycisku Rejestrowanie, aby przeprowadzić profilowanie strony podczas ręcznego odtwarzania powolnych interakcji lub przesunięcia układu po załadowaniu.
Co dalej?
Opieranie procesów związanych ze skutecznością na danych lokalnych w czasie rzeczywistym i danych o prawdziwych użytkownikach może pomóc Ci w podejmowaniu decyzji, czy warto poświęcić więcej wysiłku na debugowanie i optymalizowanie danych. Użyj tych danych, aby dostosować środowisko lokalne, tak aby bardziej realistycznie emulować typy urządzeń użytkowników, szybkość procesora lub konfiguracje sieci i w ten sposób lepiej odwzorowywać problemy z wydajnością.
Jeśli używasz rozszerzenia Web Vitals, prawdopodobnie znasz wiele z tych funkcji i możesz się zastanawiać, co to oznacza dla tego rozszerzenia. W najbliższych tygodniach udostępnimy więcej informacji o tym, jak te zmiany wpłyną na rozszerzenie.
Wprowadzamy dopiero pierwsze ulepszenia panelu Skuteczność, a jeszcze wiele przed nami. Wkrótce opublikujemy kolejne informacje, ale do tego czasu zachęcamy do wypróbowania wszystkich nowych funkcji w panelu „Wydajność” i podzielenia się z nami opinią. Jeśli masz jakieś uwagi, chętnie przeczytamy je w publicznym wątku.