Korzystaj z panelu Statystyki skuteczności, aby uzyskiwać przydatne informacje o skuteczności Twojej witryny, dostosowane do konkretnych przypadków użycia.
Dlaczego nowy panel?
Nowy panel Statystyki skuteczności jest eksperymentem mającym na celu rozwiązanie tych 3 problemów, które napotykają podczas pracy z obecnym panelem Skuteczność:
- Za dużo informacji. W nowym interfejsie panel Statystyki skuteczności upraszcza dane i wyświetla tylko istotne informacje.
- Trudno odróżnić przypadki użycia Panel Statystyki wydajności obsługuje analizę opartą na przypadku użycia. Obecnie obsługuje tylko przypadki użycia strony polegającej na wczytaniu strony, ale w przyszłości na podstawie Twoich opinii wprowadzimy kolejne, na przykład dotyczące interaktywności.
- Wymaga dogłębnej wiedzy o sposobach działania przeglądarek. Panel Statystyki skuteczności zawiera najważniejsze statystyki z panelu Statystyki oraz przydatne wskazówki dotyczące rozwiązywania problemów.
Wstęp
Z tego samouczka dowiesz się, jak mierzyć i analizować wydajność wczytywania strony za pomocą panelu Statystyki skuteczności. Czytaj dalej lub obejrzyj wersję wideo tego samouczka powyżej.
Otwieranie panelu Statystyki wydajności
- Otwórz Narzędzia deweloperskie.
Kliknij Więcej opcji > Więcej narzędzi > Statystyki skuteczności.
Możesz też skorzystać z menu poleceń, aby otworzyć panel Statystyki wydajności.
Rekordowa skuteczność
Panel Statystyki wydajności może rejestrować ogólną skuteczność i skuteczność kampanii na podstawie konkretnego przypadku użycia (np. wczytywania strony).
- Otwórz tę stronę demonstracyjną w nowej karcie, a następnie otwórz panel Statystyki wydajności.
Podczas nagrywania możesz ograniczyć wykorzystanie procesora i sieci. Na potrzeby tego samouczka zaznacz opcję Wyłącz pamięć podręczną i w menu ustaw opcję CPU na 4x spowolnienie:
Kliknij Zmierz wczytanie strony. Narzędzia deweloperskie rejestrują dane o skuteczności podczas ponownego ładowania strony i automatycznie zatrzymują nagrywanie kilka sekund po zakończeniu wczytywania strony.
Ponowne odtworzenie nagrania z występu
Użyj elementów sterujących na dole, aby sterować ponownym odtwarzaniem nagrania.
Oto przykład.
- Kliknij Odtwórz, aby odtworzyć nagranie.
- Kliknij Wstrzymaj, aby wstrzymać ponowne odtwarzanie.
- Dostosuj szybkość odtwarzania, korzystając z menu.
- Kliknij Przełącz podgląd wizualny, aby wyświetlić lub ukryć podgląd wizualny.
Poruszanie się po nagraniu z występem
Narzędzia deweloperskie automatycznie pomniejszają widok, aby wyświetlić pełną oś czasu nagrania. Możesz poruszać się po nagraniu, powiększając i przesuwając oś czasu.
Aby powiększyć lub przesunąć oś czasu w lewo lub w prawo, użyj odpowiednich przycisków nawigacji:
- Kliknij oś czasu, aby przesunąć suwak odtwarzania do wyświetlenia konkretnej klatki.
- Aby powiększyć, kliknij elementy sterujące Powiększ i Pomniejsz na dole. W takim przypadku powiększenie ustawia się na podstawie suwaka odtwarzania.
- Przeciągnij poziomy pasek przewijania u dołu, aby przesunąć oś czasu w lewo lub w prawo.
Możesz też użyć skrótów klawiszowych. Kliknij przycisk , aby wyświetlić skróty.
Podczas korzystania ze skrótów powiększenie odbywa się za pomocą kursora myszy.
Wyświetl statystyki skuteczności
Wyświetl listę statystyk wydajności w panelu Statystyki. Wykrywaj i eliminuj potencjalne problemy ze skutecznością.
Najedź kursorem na poszczególne statystyki, aby wyróżnić je na głównych ścieżkach.
Kliknij statystyki, np. żądanie blokujące renderowanie, aby otworzyć je w panelu Szczegóły. Aby lepiej zrozumieć, na czym polega problem, zapoznaj się z sekcjami Plik, Problem, Jak naprawić itp.
Wyświetlanie wskaźników wydajności
Wskaźniki internetowe to inicjatywa Google, która ma na celu dostarczanie ujednoliconych wskazówek dotyczących jakości sygnałów, które są niezbędne do zapewnienia użytkownikom doskonałych wrażeń w internecie.
Możesz wyświetlać te dane w panelu Oś czasu i Statystyki.
Aby dowiedzieć się więcej o tych danych, najedź kursorem na statystyki na Osi czasu.
Wykrywanie opóźnień największego wyrenderowania treści
Największe wyrenderowanie treści (LCP) to jeden z podstawowych wskaźników internetowych. Zgłasza czas renderowania największego obrazu lub bloku tekstowego widocznego w widocznym obszarze względem czasu rozpoczęcia wczytywania strony.
Dobry wynik LCP wynosi maksymalnie 2,5 sekundy.
Jeśli wyrenderowanie największego wyrenderowania treści na stronie trwa dłużej, na osi czasu pojawi się plakietka LCP z żółtym kwadratem lub czerwonym trójkątem.
Aby otworzyć panel Szczegóły, kliknij plakietkę LCP na osi czasu lub w panelu Statystyki po prawej stronie. Możesz w nim sprawdzić potencjalne przyczyny opóźnień i sugestie dotyczące ich rozwiązania.
W tym przykładzie żądanie blokuje renderowanie. Aby to naprawić, możesz zastosować najważniejsze style w tekście. Więcej informacji znajdziesz w artykule o eliminowaniu zasobów blokujących renderowanie.
Aby wyświetlić podelementy czasu renderowania LCP, przewiń w dół do sekcji Szczegóły > Zestawienie czasu.
Czas renderowania LCP składa się z następujących elementów:
| Część podrzędna LCP | Opis |
|---|---|
| Czas do pierwszego bajtu (TTFB) | Czas od inicjowania wczytywania strony przez użytkownika do chwili otrzymania przez przeglądarkę pierwszego bajtu odpowiedzi z dokumentu HTML. |
| Opóźnienie wczytywania zasobu | Różnica między TTFB a rozpoczęciem wczytywania zasobu LCP przez przeglądarkę. |
| Czas wczytywania zasobu | Czas potrzebny na wczytanie zasobu LCP. |
| Opóźnienie renderowania elementu | Różnica między zakończeniem wczytywania zasobu LCP do pełnego wyrenderowania elementu LCP. |
Jeśli element LCP nie wymaga wczytania zasobu do renderowania, opóźnienie i czas wczytywania zasobu są pomijane. Stanie się tak na przykład wtedy, gdy element jest węzłem tekstowym renderowanym z użyciem czcionki systemowej.
Wyświetl aktywność dotyczącą przesunięć układu
Aktywność związaną z przesunięciami układu możesz sprawdzić na ścieżce Przesunięcia układu.
Przesunięcia układu są zgrupowane w oknie sesji. W tym przykładzie są to 2 okna sesji. Okna sesji są oddzielone lukami.
Skumulowane przesunięcia układu (CLS) to jeden z podstawowych wskaźników internetowych. Aby zidentyfikować potencjalne problemy i przyczyny przesunięć układu, użyj ścieżki Przesunięcia układu.
Podczas ulepszania danych CLS zawsze zaczynaj od największego okna sesji. W naszym przykładzie okno sesji 1 jest największym oknem na podstawie koloru tła i poziomu tła.
Kliknij zrzut ekranu, aby wyświetlić szczegóły przesunięcia układu, zidentyfikować potencjalne główne przyczyny i określone elementy.
W naszym przykładzie potencjalną główną przyczyną są niewymiarowe multimedia. O tym, jak rozwiązać ten problem, dowiesz się z artykułu Optymalizacja skumulowanego przesunięcia układu.
Informacje o wyniku przesunięć układu
Aby dowiedzieć się, jak obliczamy wyniki, skorzystaj z sekcji Okno w panelu Szczegóły. Pole Okno pokazuje, do którego okna sesji należy bieżące przesunięcie układu.
Jeśli cała strona jest przesunięta, maksymalny wynik każdego przesunięcia układu wynosi 1. W naszym przykładzie pierwsze przesunięcie układu wyniosło 0.15. Drugie przesunięcie układu wyniosło 0.041.
Łączny wynik dla tego okna sesji to 0.19. Według progu CLS wymaga poprawy. Kolor tła okna sesji jest taki sam.
Wykres tła okna sesji zwiększa się z czasem. Łączny wynik przesunięcia układu odzwierciedla wzrost w wybranym momencie.
Wyświetl aktywność sieciową
Możesz wyświetlić aktywność sieci na ścieżce Sieć. Możesz rozwinąć ścieżkę sieci, aby wyświetlić wszystkie działania sieciowe, i klikać każdy element, aby wyświetlić szczegóły.
Wyświetl aktywność mechanizmu renderowania
Możesz wyświetlić aktywność związaną z renderowaniem na ścieżce mechanizmu renderowania. Możesz rozwinąć każdy mechanizm renderowania, aby wyświetlić działania, i klikać poszczególne elementy, aby wyświetlić szczegóły.
Wyświetl aktywność GPU
Wyświetl aktywność GPU na ścieżce GPU. Ścieżka GPU jest domyślnie ukryta. Aby ją włączyć, zaznacz GPU w Ustawieniach.
Wyświetlanie czasu użytkownika
Aby uzyskać niestandardowe wskaźniki skuteczności, możesz użyć Czasu działań użytkownika i wizualizować czasy za pomocą ścieżki Czas. Więcej informacji znajdziesz w artykule User time API.
Na tej stronie demonstracyjnej oblicza się czas wczytywania tekstu.
Aby wyświetlić czasy działań użytkownika:
- Oznacz miejsca w aplikacji znacznikiem
performance.mark(). - Zmierz czas między oznaczeniami za pomocą funkcji
performance.measure(). - Osiągać dobre wyniki.
- Wyświetl pomiary na ścieżce Czasy. Jeśli nie widzisz ścieżki, sprawdź Czasy działań użytkownika w Ustawieniach.
- Aby wyświetlić szczegóły, kliknij czas na ścieżce.
Dostosowywanie interfejsu użytkownika
Aby dostosować oś czasu i ścieżki, kliknij ikonę Ustawienia na panelu i zaznacz preferowane opcje.
Eksportowanie nagrania
Aby zapisać nagranie, kliknij Eksportuj .
Importuj nagranie
Aby wczytać nagranie, kliknij Importuj .
Usuwanie nagrania
Aby usunąć nagranie:
- Kliknij Usuń. Otworzy się okno z prośbą o potwierdzenie.
- W oknie dialogowym kliknij Usuń, aby potwierdzić usunięcie.