Korzystaj z panelu Statystyki skuteczności, aby uzyskiwać przydatne informacje o skuteczności Twojej witryny, dostosowane do konkretnych przypadków użycia.
Omówienie
W panelu Statystyki wydajności możesz:
- Rejestruj i mierz wydajność wczytywania strony.
- Wyświetlanie danych dotyczących wydajności aplikacji internetowych
- Wyświetl aktywność sieci
- Symulowanie wolniejszej szybkości procesora i sieci.
- importować i eksportować nagrania,
Dlaczego nowy panel?
Nowy panel Statystyki wydajności to eksperyment mający na celu rozwiązanie 3 problemów, które występują u programistów podczas korzystania z obecnego panelu Wydajność:
- Za dużo informacji. W odnowionej wersji interfejsu panel Statystyki skuteczności porządkuje dane i wyświetla tylko istotne informacje.
- Trudno odróżnić przypadki użycia Panel Statystyki wydajności umożliwia analizę na podstawie przypadków użycia. Obecnie obsługuje tylko przypadki użycia związane z wczytywaniem stron, ale w przyszłości, na podstawie opinii użytkowników, dodamy więcej opcji, np. interaktywność.
- Wymaga dogłębnej wiedzy o sposobach działania przeglądarek. W panelu Statystyki skuteczności znajdziesz najważniejsze statystyki w panelu Statystyki wraz z informacjami o tym, jak rozwiązać problemy.
Wprowadzenie
Z tego samouczka dowiesz się, jak mierzyć i interpretować szybkość wczytywania stron za pomocą panelu Statystyki skuteczności. Kontynuuj czytanie lub obejrzyj wersję wideo tego samouczka powyżej.
Otwórz panel 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.
Rejestrowanie skuteczności
Panel Statystyki wydajności może rejestrować ogólną skuteczność i skuteczność na podstawie konkretnego przypadku użycia (np. wczytywania strony).
- Otwórz tę stronę demonstracyjną w nowej karcie i na niej otwórz panel Statystyki skuteczności.
Podczas nagrywania możesz ograniczyć działanie sieci i procesora. Na potrzeby tego samouczka zaznacz opcję Wyłącz pamięć podręczną i w menu ustaw opcję CPU na 4x spowolnienie:
Kliknij Zmierz szybkość wczytania strony. Narzędzie DevTools rejestruje dane o wydajności podczas ponownego wczytywania strony, a potem automatycznie zatrzymuje 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.
- Aby odtworzyć nagranie, kliknij Odtwórz.
- Kliknij Wstrzymaj, aby wstrzymać 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.
Gdy używasz skrótów, możesz powiększać obraz, kierując kursor myszy.
Wyświetlanie statystyk wydajności
W panelu Statystyki znajdziesz listę statystyk skuteczności. 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. prośbę blokującą renderowanie, aby otworzyć je w panelu Szczegóły. Aby lepiej zrozumieć problem, zapoznaj się z sekcjami Plik, Problem i Jak rozwiązać problem.
Wyświetlanie wskaźników wydajności
Wskaźniki internetowe to inicjatywa Google zapewniająca ujednolicone wskazówki dotyczące sygnałów związanych z jakością, które są niezbędne do zapewnienia doskonałych wrażeń użytkownika 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. 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 wyrenderowanie największego wyrenderowania 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. 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 Eliminowanie 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 tych części:
| Część podrzędna LCP | Opis |
|---|---|
| Czas do pierwszego bajtu (TTFB) | Czas od momentu, gdy użytkownik rozpoczyna wczytywanie strony, do chwili, gdy przeglądarka otrzymuje pierwszy bajt odpowiedzi dokumentu HTML. |
| Opóźnienie ładowania zasobów | Różnica między czasem TTFB a czasem, w którym przeglądarka zaczyna wczytywać zasób LCP. |
| Czas wczytywania zasobu | Czas potrzebny do załadowania samego 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. Dotyczy to na przykład sytuacji, gdy element jest węzłem tekstowym renderowanym z użyciem czcionki systemowej.
Wyświetlanie aktywności związanej z przesunięciem 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ą 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, a także zidentyfikować potencjalne główne przyczyny i elementy, na które miała wpływ.
W naszym przykładzie potencjalną główną przyczyną jest nierozmiarywany obraz. Aby dowiedzieć się, jak to naprawić, zapoznaj się z artykułem Optymalizowanie zbiorczego przesunięcia układu.
Informacje o wyniku przesunięć układu
Aby dowiedzieć się, jak obliczamy wyniki, skorzystaj w panelu Szczegóły w sekcji Okno. Okno wskazuje, 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. Druga zmiana układu uzyskała wynik 0.041.
Łączny wynik dla tego okna sesji to 0.19. Na podstawie progu CLS należy go poprawić. 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 sieci, i kliknąć poszczególne elementy, aby zobaczyć szczegóły.
Wyświetlanie aktywności renderera
Możesz wyświetlić aktywność związaną z renderowaniem na ścieżce mechanizmu renderowania. Możesz rozwinąć każdy procesor, aby wyświetlić działania, i kliknąć każdy element, aby wyświetlić szczegóły.
Wyświetlanie aktywności GPU
Wyświetl aktywność GPU na ścieżce GPU. Ścieżka GPU jest domyślnie ukryta. Aby go włączyć, zaznacz GPU w Ustawieniach.
Wyświetlanie czasu użytkownika
Aby uzyskać niestandardowe dane o skuteczności, możesz użyć czasu użytkownika i wizualizować czasy za pomocą ścieżki Czas. Więcej informacji znajdziesz w User Timing API.
Sprawdź tę stronę demonstracyjną, która oblicza upływ czasu wczytywania tekstu.
Aby wyświetlić czasy działań użytkownika:
- Zaznacz miejsca w aplikacji za pomocą
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
Aby dostosować oś czasu i ścieżki, kliknij ikonę Ustawienia na panelu i zaznacz odpowiednie 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 potwierdzenia.
- W oknie dialogowym kliknij Usuń, aby potwierdzić usunięcie.