Ta strona została przetłumaczona przez Cloud Translation API.

Panel skuteczności: analizowanie wyników witryny

Dale St. Marthe

Sofia Emelianova

Aby przeanalizować wydajność witryny, użyj panelu Wydajność.

Ten zasób może być niedostępny w Twoim regionie.

Omówienie

Panel Wydajność umożliwia rejestrowanie profili wydajności procesora Twoich aplikacji internetowych. Analizuj profile, aby znajdować potencjalne wąskie gardła i sposoby optymalizacji wykorzystania zasobów.

W panelu Wydajność możesz:

Rejestrowanie profilu wydajności.
zmieniać ustawienia przechwytywania.
Analizowanie raportu skuteczności.

Pełny przewodnik dotyczący zwiększania wydajności witryny znajdziesz w artykule Analiza wydajności w czasie wykonywania.

Otwórz panel Wydajność

Aby otworzyć panel Skuteczność, otwórz DevTools i na górze kliknij Skuteczność.

Aby otworzyć panel Skuteczność za pomocą menu Polecenia, wykonaj te czynności:

Otwórz Narzędzia deweloperskie.
Otwórz menu polecenia, naciskając:
macOS: Command + Shift + P.
Windows, Linux i ChromeOS: Control + Shift + P
Zacznij pisać Performance panel, wybierz Pokaż panel Skuteczność i naciśnij Enter.

Obserwowanie podstawowych wskaźników internetowych na żywo

Gdy otworzysz panel Wydajność, natychmiast zostanie on zaktualizowany i zacznie wyświetlać lokalne dane największego wyrenderowania treści (LCP) oraz skumulowanego przesunięcia układu (CLS), a także ich oceny (dobra, wymaga poprawy lub zła).

Jeśli wchodzisz w interakcję ze stroną, panel Wydajność rejestruje też lokalny czas od interakcji do kolejnego wyrenderowania (INP) i jego wynik, który wraz z LCP i CLS daje pełny przegląd podstawowych wskaźników internetowych Twojej strony na podstawie połączenia sieciowego i urządzenia.

Na kartach z danymi na kartach Interakcje i Zmiany układu znajdziesz tabele z informacjami o zapisanych interakcjach i zmianach układu, w tym o elementach, czasie trwania i fazach (w przypadku interakcji) oraz o wynikach (w przypadku zmian układu). Aby wyczyścić obie listy, kliknij Wyczyść.

Aby uzyskać szczegółowe informacje o wyniku danych, najedź kursorem na ich wartość, aby wyświetlić etykietkę.

Porównaj swoje wrażenia z wrażeniami użytkowników

Możesz też pobrać dane z pól w raporcie na temat użytkowania Chrome i porównać wrażenia użytkowników Twojej witryny z danymi lokalnymi.

Aby dodać dane pola:

W sekcji Skuteczność > Następne kroki > Dane z pola kliknij Skonfiguruj.
W oknie Konfigurowanie pobierania danych z pola zapoznaj się z Informacją o prywatności i kliknij OK.
Zaawansowane: skonfiguruj mapowanie między środowiskiem deweloperskim a produkcyjnym...

Opcjonalnie, aby automatycznie pobierać najbardziej odpowiednie dane z pola, możesz skonfigurować (wiele) mapowania między źródłami środowiska programistycznego a źródłami produkcyjnymi:
1. W oknie kliknij sekcję Zaawansowane i wybierz + Nowy.
2. W tabeli mapowania wpisz adresy URL wersji testowej i produkcyjnej, a potem kliknij +.
  
  Na przykład zmapowanie http://localhost:8080 na https://example.com spowoduje wyświetlenie danych polowych dla example.com/page1, gdy przejdziesz do localhost:8080/page1.
  
  Jeśli z jakiegoś powodu nie możesz automatycznie pobrać danych z pola, możesz włączyć Zawsze pokazuj zgromadzone dane dla poniższego adresu URL i podać adres URL. Panel Skuteczność najpierw spróbuje pobrać dane pól dla tego adresu URL, a potem wyświetli je niezależnie od tego, na którą stronę się przejdziesz.
  
  Aby zmienić ustawienia pobierania danych z pól po konfiguracji, kliknij Dane z pól > Skonfiguruj.
Po skonfigurowaniu pobierania danych z pól w panelu Skuteczność możesz porównać wyniki danych lokalnych z danymi dotyczącymi wrażeń użytkowników. Okres zbierania danych możesz zobaczyć w sekcji Dane z pola po prawej stronie.

Aby uzyskać szczegółowe informacje o wyniku danych, najedź kursorem na ich wartość, aby wyświetlić etykietkę.

Konfigurowanie środowiska w celu lepszego dopasowania do potrzeb użytkowników

Po skonfigurowaniu pobierania danych o polach zgodnie z opisem w poprzedniej sekcji w panelu Skuteczność znajdziesz rekomendacje dotyczące konfiguracji środowiska, które pozwolą lepiej dostosować je do potrzeb użytkowników.

Aby skonfigurować środowisko:

Na każdej karcie danych rozwiń sekcję Weź pod uwagę lokalne warunki testu (jeśli jest dostępna) i przeczytaj zalecenia.

Wygląda na to, że w tym przykładzie, aby lepiej dopasować działanie aplikacji do potrzeb użytkowników, warto użyć typowego rozmiaru ekranu komputera i ograniczyć moc procesora oraz przepustowość sieci.
Aby dopasować konfigurację środowiska do tego przykładu:
1. Ustaw widoczny obszar na jeden z popularnych rozmiarów ekranu (np. 720p lub 1080p). Aby emulować określone urządzenia i rozmiary ekranu, możesz użyć Trybu urządzenia w panelu Elementy.
2. W tym przykładzie 82% użytkowników witryny korzysta z komputera. Aby mieć pewność, że porównujesz wyniki lokalnych danych z odpowiednimi danymi polowymi, na liście Dane polowe > Urządzenie wybierz Komputer.
3. W sekcji Ustawienia środowiska na liście Sieć wybierz na przykład Szybka sieć 4G, a w sekcji Procesor wybierz na przykład 20-krotne spowolnienie. W tej samej sekcji możesz też Disable network cache (Wyłącz pamięć podręczną sieci).
Wskazówka: w menu ograniczania w sekcji Ustawienia środowiska panel Skuteczność może też zalecać użycie wstępnie skonfigurowanych ustawień ograniczania. Aby lepiej dopasować się do urządzeń mobilnych niskiej i średniej jakości, możesz skalibrować niestandardowe ustawienia wstępne ograniczania procesora na swoim urządzeniu. Aby to zrobić, wybierz Skalibruj w sekcji Procesor > Skalibrowane gotowe ustawienia.
Po skonfigurowaniu środowiska ponownie załaduj stronę, wejdź z nią w interakcję, aby zarejestrować lokalny INP, i ponownie porównaj wyniki danych.

Wygląda na to, że wyniki danych są teraz bardziej zbliżone do tych, które widzą użytkownicy. W związku z tym sekcje Weź pod uwagę lokalne warunki testu zniknęły z kart danych.

Teraz możesz zacząć ulepszać podstawowe wskaźniki internetowe w swojej witrynie:

Tworzenie i analizowanie raportu skuteczności

W kolejnych sekcjach znajdziesz instrukcje nagrywania profilu, zmiany ustawień rejestrowania i analizowania raportu.

Ten zasób może być niedostępny w Twoim regionie.

Rejestrowanie profilu wydajności

Gdy wszystko będzie gotowe, w panelu Skuteczność masz do wyboru te opcje:

Zmień ustawienia nagrywania

Ustawienia rejestrowania umożliwiają zmianę sposobu rejestrowania przez Narzędzia programistyczne nagrań dotyczących wydajności i uzyskiwanie dodatkowych informacji w raporcie. Aby otworzyć menu Ustawienia rejestrowania, kliknij Ustawienia rejestrowania .

W menu Ustawienia rejestrowania wybierz te opcje:

Wyłącz próbki JavaScriptu: wyłącza zapisywanie stosów wywołań JavaScriptu wyświetlanych w ścieżce Główna, które są wywoływane podczas nagrywania. Zmniejszą obciążenie procesora.
Włącz zaawansowaną instrumentację renderowania (powolne): rejestruje zaawansowaną instrumentację renderowania. znacząco utrudnia działanie;
Włącz statystyki selektora arkusza CSS (powolne): rejestruje statystyki selektora arkusza CSS. znacząco utrudnia działanie;
Ograniczanie wykorzystania procesora: symuluje wolniejsze prędkości procesora.
Ograniczanie wykorzystania sieci: symuluje wolniejsze prędkości sieci.

Analizowanie raportu skuteczności

Pełny przewodnik po korzystaniu z panelu Skuteczność znajdziesz w artykule Analiza nagrania skuteczności.

Poniżej znajdziesz tematy z poradnika oraz inne przydatne dokumenty:

Aby dowiedzieć się, jak poruszać się po raporcie:

Aby dowiedzieć się, jak skupić się na tym, co jest ważne w Twoim procesie pracy:

Aby dowiedzieć się więcej o kartach Od dołu do góry, Drzewo wywołań i Dziennik zdarzeń:

Wyświetlanie działań w tabeli

Aby dowiedzieć się, jak analizować raport:

Zwiększanie skuteczności dzięki tym panelom

Poznaj inne panele, które mogą pomóc Ci w zwiększaniu skuteczności witryny: