Skorzystaj z panelu Statystyki wydajności, aby uzyskać przydatne statystyki dotyczące wydajności witryny.
Przegląd
Panel Statystyki wydajności umożliwia:
- Rejestrowanie i mierzenie wydajności wczytywania stron
- Wyświetlanie danych o skuteczności podstawowych wskaźników internetowych
- Wyświetlanie aktywności w sieci
- symulować mniejszą szybkość procesora i sieci;
- Importowanie i eksportowanie nagrań.
Dlaczego wprowadzamy nowy panel?
Nowy panel Statystyki wydajności to eksperyment, który ma rozwiązać te 3 problemy deweloperów podczas pracy z dotychczasowym panelem Wydajność:
- Za dużo informacji W przeprojektowanym 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 przypadkach użycia. Obecnie obsługuje tylko wczytywanie strony, ale w przyszłości, na podstawie Twoich opinii, dodamy kolejne funkcje, np. interaktywność.
- Aby skutecznie korzystać z tej funkcji, musisz dobrze znać działanie przeglądarek. Panel Statystyki skuteczności wyróżnia najważniejsze statystyki w panelu Statystyki i zawiera praktyczne wskazówki dotyczące rozwiązywania problemów.
Wprowadzenie
Z tego samouczka dowiesz się, jak mierzyć i interpretować szybkość wczytywania strony za pomocą panelu Statystyki wydajności. Kontynuuj czytanie lub obejrzyj powyżej wersję wideo tego samouczka.
Otwieranie panelu Statystyki wydajności
- Otwórz Narzędzia deweloperskie.
Kliknij Więcej opcji > Więcej narzędzi > Statystyki wydajności.
Możesz też otworzyć panel Statystyki dotyczące skuteczności za pomocą menu poleceń.
Rejestrowanie wydajności
Panel Statystyki wydajności może rejestrować ogólną wydajność i wydajność w określonych przypadkach użycia (np. wczytywanie strony).
- Otwórz tę stronę demonstracyjną w nowej karcie, a następnie otwórz na niej panel Statystyki skuteczności.
Podczas nagrywania możesz ograniczyć przepustowość sieci i wykorzystanie procesora. W tym samouczku zaznacz Disable cache (Wyłącz pamięć podręczną) i w menu CPU wybierz 4x slowdown (4-krotne spowolnienie):
Kliknij Zmierz szybkość wczytania strony. Narzędzia deweloperskie rejestrują dane o wydajności podczas ponownego ładowania strony, a potem automatycznie zatrzymują nagrywanie kilka sekund po zakończeniu ładowania.
Odtwarzanie nagrania występu
Użyj elementów sterujących u dołu, aby sterować odtwarzaniem nagrania.
Oto przykład, jak to zrobić.
- Aby odtworzyć nagranie, kliknij Odtwórz.
- Kliknij Wstrzymaj, aby wstrzymać odtwarzanie.
- Dostosuj szybkość odtwarzania za pomocą menu.
- Kliknij Przełącz podgląd wizualny, aby wyświetlić lub ukryć podgląd wizualny.
Poruszanie się po nagraniu wydajności
Narzędzia deweloperskie automatycznie oddalą 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ć i przesunąć oś czasu w lewo lub w prawo, użyj odpowiednich przycisków nawigacji:
- Kliknij Oś czasu, aby przesunąć suwak odtwarzania i wyświetlić konkretną klatkę.
- Aby powiększyć lub pomniejszyć widok, kliknij u dołu elementy sterujące Powiększ i Pomniejsz. W takim przypadku powiększasz widok na podstawie głowicy 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.
Gdy używasz skrótów, powiększasz obraz w miejscu, w którym znajduje się kursor myszy.
Wyświetlanie statystyk wydajności
Na panelu Statystyki znajdziesz listę statystyk wydajności. Identyfikowanie i naprawianie potencjalnych problemów ze skutecznością.
Najedź kursorem na poszczególne statystyki, aby wyróżnić je na głównych ścieżkach.
Kliknij statystykę, np. żądanie blokujące renderowanie, aby otworzyć ją w panelu Szczegóły. Aby lepiej zrozumieć problem, zapoznaj się z sekcjami Plik, Problem i Jak rozwiązać problem.
Wyświetlanie danych o skuteczności wskaźników internetowych
Wskaźniki internetowe to inicjatywa Google służąca zapewnieniu ujednoliconych wskazówek dotyczących mierników jakości, które gwarantują doskonałe wrażenia użytkownika w sieci.
Te dane możesz wyświetlać w panelach Oś czasu i Statystyki.
Najedź kursorem na statystyki na osi czasu, aby dowiedzieć się więcej o rodzajach danych.
Wykrywanie opóźnień największego wyrenderowania treści
Największe wyrenderowanie treści (LCP) to jeden z podstawowych wskaźników internetowych. Wartość LCP odpowiada czasowi renderowania największego obrazu lub bloku tekstu w widocznym obszarze w odniesieniu do czasu rozpoczęcia wczytywania strony.
Dobry wynik LCP to 2,5 sekundy lub mniej.
Jeśli największe wyrenderowanie treści na stronie trwa dłużej, na osi czasu zobaczysz plakietkę 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. W tym panelu znajdziesz potencjalne przyczyny opóźnień i sugestie dotyczące ich rozwiązania.
W tym przykładzie żądanie blokuje renderowanie, a aby to naprawić, możesz zastosować style krytyczne w wierszu. Więcej informacji znajdziesz w artykule Eliminowanie zasobów blokujących renderowanie.
Aby wyświetlić podział czasu renderowania LCP, przewiń w dół do sekcji Szczegóły > Podział czasów.
Czas renderowania LCP składa się z tych części:
| Podczęść LCP | Opis |
|---|---|
| Czas do pierwszego bajtu (TTFB) | Czas od momentu, w którym użytkownik rozpoczyna ładowanie strony, do momentu, w którym przeglądarka otrzymuje pierwszy bajt odpowiedzi w dokumencie HTML. |
| Opóźnienie ładowania zasobów | Różnica między TTFB a momentem, w którym przeglądarka zaczyna wczytywać zasób LCP. |
| Czas wczytywania zasobu | Czas potrzebny na załadowanie samego zasobu LCP. |
| Opóźnienie renderowania elementu | Różnica między momentem zakończenia wczytywania zasobu LCP a momentem pełnego wyrenderowania elementu LCP. |
Jeśli element LCP nie wymaga ładowania zasobów do renderowania, opóźnienie i czas ładowania zasobów są pomijane. Na przykład w przypadku, gdy element jest węzłem tekstowym renderowanym za pomocą czcionki systemowej.
Wyświetlanie aktywności związanej z przesunięciami układu
Wyświetl aktywność związaną ze zmianami układu na ścieżce Zmiany układu.
Przesunięcia układu są pogrupowane w oknie sesji. W tym przykładzie są 2 okna sesji. Okna sesji mają między sobą przerwy.
Skumulowane przesunięcia układu (CLS) to jeden z podstawowych wskaźników internetowych. Użyj ścieżki Przesunięcia układu, aby zidentyfikować potencjalne problemy i przyczyny przesunięć układu.
Podczas poprawiania wartości CLS zawsze zaczynaj od największego okna sesji. W naszym przykładzie okno sesji 1 jest największe ze względu na kolor tła i poziom.
Kliknij zrzut ekranu, aby wyświetlić szczegóły przesunięcia układu, zidentyfikować potencjalne główne przyczyny i elementy, których dotyczy problem.
W naszym przykładzie potencjalną główną przyczyną jest nieokreślony rozmiar kreacji. Aby dowiedzieć się, jak to naprawić, przeczytaj artykuł Optymalizacja łącznego przesunięcia układu.
Interpretowanie wyniku przesunięcia układu
Aby dowiedzieć się, jak obliczane są wyniki, skorzystaj z sekcji Okres w panelu Szczegóły. W sekcji Okno widać, do którego okna sesji należy bieżące przesunięcie układu.
Jeśli cała strona zostanie przesunięta, maksymalny wynik każdego przesunięcia układu wynosi 1. W naszym przykładzie pierwsze przesunięcie układu uzyskało wynik 0.15. Drugie przesunięcie układu uzyskało wynik 0.041.
Całkowity wynik w tym oknie sesji to 0.19. Na podstawie progu CLS wymaga poprawy. Kolor tła okna sesji odzwierciedla ten sam stan.
Wykres w tle okna sesji rośnie z czasem. Łączny wynik przesunięcia układu odzwierciedla wzrost w danym momencie.
Wyświetlanie aktywności sieciowej
Wyświetl aktywność sieci w ścieżce Sieć. Możesz rozwinąć ścieżkę sieci, aby wyświetlić wszystkie działania sieciowe, i kliknąć poszczególne elementy, aby zobaczyć szczegóły.
Wyświetlanie aktywności renderera
Wyświetl aktywność renderowania na ścieżce Renderer. Możesz rozwinąć każdy moduł renderujący, aby wyświetlić działania, a następnie kliknąć poszczególne elementy, aby zobaczyć szczegóły.
Wyświetlanie aktywności GPU
Wyświetl aktywność GPU na ścieżce GPU. Ścieżka GPU jest domyślnie ukryta. Aby ją włączyć, w Ustawieniach zaznacz GPU.
Wyświetlanie czasu działań użytkownika
Aby uzyskać niestandardowe miary skuteczności, możesz użyć czasu użytkownika i wizualizować czasy za pomocą ścieżki Czas. Więcej informacji znajdziesz w artykule User Timing API.
Sprawdź tę stronę demonstracyjną, która oblicza czas wczytywania tekstu.
Aby wyświetlić czas działań użytkownika:
- Oznacz miejsca w aplikacji symbolem
performance.mark(). - Mierz czas, który upłynął między znacznikami, za pomocą funkcji
performance.measure(). - Rejestrowanie wyników
- Wyświetl pomiary na ścieżce Czasy. Jeśli nie widzisz ścieżki, sprawdź Czasy użytkowników w Ustawieniach.
- Aby wyświetlić szczegóły, kliknij czas na ścieżce.
Dostosowywanie interfejsu
Aby dostosować Oś czasu i Ścieżki, kliknij ikonę Ustawienia w panelu i zaznacz wybrane opcje.
Eksportowanie nagrania
Aby zapisać nagranie, kliknij Eksportuj .
Importowanie nagrania
Aby wczytać nagranie, kliknij Importuj .
Usuwanie nagrania
Aby usunąć nagranie:
- Kliknij Usuń. Otworzy się okno potwierdzenia.
- W oknie kliknij Usuń, aby potwierdzić usunięcie.