W panelu Statystyki skuteczności znajdziesz przydatne statystyki dotyczące wydajności witryny oparte na konkretnym przypadku użycia.
Dlaczego nowy panel?
Nowy panel Statystyki skuteczności to eksperyment, który rozwiązuje 3 problemy deweloperów dotyczące korzystania z obecnego panelu Skuteczność:
- Za dużo informacji. W odnowionym interfejsie panel Statystyki skuteczności upraszcza przeglądanie danych i wyświetla tylko istotne informacje.
- Trudno rozróżnić przypadki użycia. Panel Statystyki skuteczności obsługuje analizę na podstawie przypadku użycia. Obsługuje ona tylko wczytywanie strony, a w przyszłości pojawi się więcej funkcji, na przykład interaktywność, na podstawie Twoich opinii.
- Do efektywnego korzystania z przeglądarki wymagana jest dogłębna znajomość zasad działania przeglądarek. Panel Statystyki skuteczności zawiera najważniejsze statystyki w panelu Statystyki wraz z przydatnymi wskazówkami dotyczącymi rozwiązywania problemów.
Wstęp
Z tego samouczka dowiesz się, jak mierzyć i analizować szybkość wczytywania strony za pomocą panelu Statystyki wydajności. Czytaj dalej lub obejrzyj wersję wideo tego samouczka powyżej.
Otwieranie panelu Statystyki skuteczności
- Otwórz Narzędzia deweloperskie.
Kliknij Więcej opcji > Więcej narzędzi > Statystyki skuteczności.
Możesz też użyć menu poleceń, aby otworzyć panel Statystyki wydajności.
Rejestruj występy
Panel Statystyki wydajności może rejestrować wydajność ogólną oraz zależnie od przypadku użycia (np. wczytywania strony).
- Otwórz tę stronę demonstracyjną w nowej karcie, a następnie na niej otwórz panel Statystyki skuteczności.
Podczas nagrywania możesz ograniczać szybkość sieci i CPU. Na potrzeby tego samouczka zaznacz opcję Wyłącz pamięć podręczną i w menu wybierz opcję Procesor na 4x spowolnienie:
Kliknij Zmierz wczytanie strony. Narzędzia deweloperskie rejestrują dane o wydajności podczas ponownego wczytywania strony, a następnie automatycznie zatrzymują nagrywanie kilka sekund po zakończeniu wczytywania strony.
Odtwórz ponownie nagranie występu
Użyj elementów sterujących na dole ekranu, aby włączyć ponowne odtwarzanie nagrania.
Oto przykład, jak to zrobić.
- Kliknij Odtwórz, aby odtworzyć nagranie.
- 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 występu
Narzędzia deweloperskie automatycznie pomniejszają widok, aby pokazać pełną oś czasu nagrywania. Możesz poruszać się po nagraniu za pomocą powiększenia i przesuwać oś czasu.
Aby powiększyć i przesunąć oś czasu w lewo i w prawo, użyj odpowiednich przycisków nawigacyjnych:
- Kliknij oś czasu, aby przesunąć suwak odtwarzania do wyświetlenia konkretnej klatki.
- Kliknij elementy sterujące Powiększanie i Pomniejsz u dołu, aby powiększyć. W takim przypadku ustawisz powiększenie na podstawie suwaka odtwarzania.
- Aby przesunąć oś czasu w lewo i w prawo, przeciągnij poziomy pasek przewijania u dołu.
Możesz też użyć skrótów klawiszowych. Kliknij przycisk , aby wyświetlić skróty.
Korzystając ze skrótów, powiększasz obraz zależnie od ruchu kursora myszy.
Wyświetlanie statystyk skuteczności
Zobacz listę statystyk dotyczących skuteczności w panelu Statystyki. Wykrywaj i eliminuj potencjalne problemy z wydajnością.
Najeżdżaj kursorem na poszczególne statystyki, aby wyróżnić je na głównych ścieżkach.
Kliknij statystykę, na przykład żądanie blokowania renderowania, aby otworzyć je w panelu Szczegóły. Aby lepiej zrozumieć problem, zapoznaj się z sekcjami Plik, Problem, Jak rozwiązać i inne informacje.
Wyświetlanie danych o wydajności wskaźników internetowych
Wskaźniki internetowe to inicjatywa Google mająca na celu dostarczanie ujednoliconych wskazówek dotyczących sygnałów dotyczących jakości, które są niezbędne do zapewnienia użytkownikom pozytywnych wrażeń podczas korzystania z internetu.
Dane te są widoczne w panelach Oś czasu i Statystyki.
Aby dowiedzieć się więcej o danych, najedź kursorem na oś czasu.
Poznaj opóźnienia największego wyrenderowania treści
Największe wyrenderowanie treści (LCP) to jeden z podstawowych wskaźników internetowych. Raportuje czas renderowania największego obrazu lub bloku tekstowego widocznego w widocznym obszarze w stosunku do czasu, w którym rozpoczęło się wczytywanie strony.
Dobry wynik LCP to maksymalnie 2,5 sekundy.
Jeśli renderowanie 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. Znajdziesz w nim potencjalne przyczyny opóźnień i sugestie, jak je rozwiązać.
W tym przykładzie żądanie blokuje renderowanie i możesz zastosować w nim najważniejsze style, aby rozwiązać ten problem. Więcej informacji znajdziesz w artykule Eliminowanie zasobów blokujących renderowanie.
Aby wyświetlić podsekcje czasu renderowania LCP, przewiń w dół do sekcji Szczegóły > Zestawienie czasu.
Na czas renderowania LCP składają się następujące elementy:
| Podczęść LCP | Opis |
|---|---|
| Czas do pierwszego bajtu (TTFB) | Czas od rozpoczęcia wczytywania strony przez użytkownika do chwili, gdy przeglądarka otrzyma pierwszy bajt odpowiedzi dokumentu HTML. |
| Opóźnienie wczytywania zasobu | Różnica między TTFB a datą rozpoczęcia ładowania zasobu LCP przez przeglądarkę. |
| Czas wczytywania zasobu | Czas potrzebny na wczytanie samego zasobu LCP. |
| Opóźnienie renderowania elementu | Różnica między zakończeniem ładowania zasobu LCP do pełnego wyrenderowania elementu LCP. |
Jeśli do renderowania element LCP nie wymaga wczytania zasobu, opóźnienie i czas wczytywania zasobu są pomijane. Na przykład element ten jest węzłem tekstowym renderowanym za pomocą czcionki systemowej.
Wyświetl aktywność związaną z przesunięciami układu
Wyświetl aktywność związaną z przesunięciami układu na ścieżce Przesunięcia układu.
Przesunięcia układu są grupowane w oknie sesji. W tym przykładzie są 2 przedziały czasu sesji. Między oknami sesji są luki.
Skumulowane przesunięcia układu (CLS) to jeden z podstawowych wskaźników internetowych. Korzystając ze ścieżki Przesunięcia układu, możesz wykrywać potencjalne problemy i przyczyny przesunięć układu.
Przy poprawianiu wskaźnika CLS zawsze zaczynaj od największego okna sesji. W naszym przykładzie okno sesji 1 jest największym oknem pod względem koloru i poziomu tła.
Kliknij zrzut ekranu, aby zobaczyć szczegóły przesunięcia układu, poznać potencjalne przyczyny i elementy, których dotyczy zmiana.
W naszym przykładzie potencjalną główną przyczyną są nieodpowiednie multimedia. Aby dowiedzieć się, jak to naprawić, przeczytaj artykuł Optymalizowanie skumulowanego przesunięcia układu.
Informacje o wyniku przesunięć układu
Aby dowiedzieć się, jak obliczamy wyniki, otwórz sekcję Okno w panelu Szczegóły. 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 dało wynik 0.15. Drugie przesunięcie układu dało wynik 0.041.
Łączny wynik dla tego okna sesji wynosi 0.19. Ze względu na wartość progową CLS wymaga poprawy. Taki sam kolor tła okna sesji.
Wykres w tle okna sesji zwiększa się z czasem. Łączny wynik przesunięcia układu odzwierciedla wzrost w tym momencie.
Wyświetlanie aktywności w sieci
Możesz wyświetlać aktywność w sieci na ścieżce Sieć. Możesz rozwinąć ścieżkę sieci, aby zobaczyć wszystkie aktywności sieciowe, a następnie kliknąć każdy element, aby zobaczyć szczegóły.
Wyświetl aktywność mechanizmu renderowania
Możesz zobaczyć aktywność renderowania na ścieżce mechanizmu renderowania. Możesz rozwinąć każdy mechanizm renderowania, aby wyświetlić działania, i kliknąć każdy element, aby zobaczyć szczegóły.
Wyświetl aktywność GPU
Aktywność GPU możesz wyświetlić na ścieżce GPU. Ścieżka GPU jest domyślnie ukryta. Aby ją włączyć, kliknij GPU w Ustawieniach.
Wyświetl czasy działań użytkowników
Aby uzyskać niestandardowe wskaźniki skuteczności, możesz skorzystać z Czasu działań użytkownika i wizualizować czasy za pomocą ścieżki Czas trwania. Więcej informacji znajdziesz w artykule o interfejsie User Timing API.
Zapoznaj się z tą stroną demonstracyjną, która oblicza czas wczytywania tekstu.
Aby wyświetlić czasy działań użytkowników:
- Oznacz miejsca w aplikacji za pomocą narzędzia
performance.mark(). - Mierz czas, który upływa między oznaczeniami, za pomocą funkcji
performance.measure(). - Nagrywanie występów.
- Wyświetl pomiary na ścieżce Czas realizacji. Jeśli nie widzisz ścieżki, sprawdź Czasy użytkownika w Ustawieniach.
- Aby wyświetlić szczegóły, kliknij czas na bieżni.
Dostosowywanie interfejsu
Aby dostosować oś czasu i ścieżki, kliknij ikonę Ustawienia w panelu i sprawdź preferowane opcje.
Eksportowanie nagrania
Aby zapisać nagranie, kliknij Eksportuj .
Zaimportuj nagranie
Aby wczytać nagranie, wybierz Importuj .
Usuwanie nagrania
Aby usunąć nagranie:
- Kliknij Usuń. Otworzy się okno potwierdzenia.
- W oknie dialogowym kliknij Usuń, aby potwierdzić tę czynność.