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ść.

Przegląd

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

W panelu Skuteczność możesz:

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

Kompleksowy przewodnik po zwiększaniu wydajności witryny znajdziesz w artykule Analizowanie wydajności w czasie działania.

Otwieranie panelu Wydajność

Aby otworzyć panel Skuteczność, otwórz Narzędzia deweloperskie i u góry wybierz Skuteczność.

Możesz też wykonać te czynności, aby otworzyć panel Wydajność z menu poleceń:

Otwórz Narzędzia deweloperskie.
Otwórz menu poleceń, naciskając:
macOS: Command+Shift+P
Windows, Linux, ChromeOS: Ctrl+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ść, od razu zarejestruje on i wyświetli lokalne wartości wskaźników największego wyrenderowania treści (LCP) i skumulowanego przesunięcia układu (CLS) oraz poinformuje Cię o ich wyniku (dobry, wymaga poprawy lub zły).

Jeśli wejdziesz w interakcję ze stroną, panel Wydajność zarejestruje też lokalny wskaźnik 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 przy użyciu połączenia sieciowego i urządzenia.

Pod 3 kartami danych na kartach Interakcje i Zmiany układu znajdziesz tabele z informacjami o zarejestrowanych interakcjach i zmianach układu, w tym o elementach, czasie, fazach (w przypadku interakcji) i wynikach (w przypadku zmian układu). Aby wyczyścić obie listy, kliknij Wyczyść.

Aby uzyskać podział wyniku danych, najedź kursorem na wartość danych, aby wyświetlić etykietkę.

Porównywanie własnych wrażeń z wrażeniami użytkowników

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

Aby dodać dane pola:

W sekcji Skuteczność > Następne kroki > Dane z terenu kliknij Skonfiguruj.
W oknie Skonfiguruj pobieranie danych z pola zapoznaj się z Informacjami o prywatności i kliknij OK.
Zaawansowane: skonfiguruj mapowanie między środowiskami programistycznym i produkcyjnym...

Opcjonalnie, aby automatycznie pobierać najbardziej odpowiednie dane o polach, możesz skonfigurować (wiele) mapowań między źródłami środowiska programistycznego i produkcyjnego:
1. W oknie rozwiń sekcję Zaawansowane i kliknij + Nowy.
2. W tabeli mapowania wpisz adresy URL środowiska deweloperskiego i produkcyjnego, a potem kliknij +.
  
  Na przykład zmapowanie http://localhost:8080 na https://example.com spowoduje wyświetlenie danych pola example.com/page1 po przejściu do localhost:8080/page1.
  
  Jeśli z jakiegoś powodu nie możesz automatycznie pobrać danych z pola, możesz włączyć opcję Zawsze pokazuj zgromadzone dane dla poniższego adresu URL i podać adres URL. Panel Wydajność najpierw spróbuje pobrać dane o polach dla tego adresu URL, a potem wyświetli te dane niezależnie od tego, na którą stronę przejdziesz.
  
  Aby zmienić ustawienia pobierania danych z pól po konfiguracji, kliknij Dane z pól > Skonfiguruj.
Po skonfigurowaniu pobierania danych z testów w terenie w panelu Skuteczność zobaczysz porównanie wyników danych lokalnych z wynikami, które uzyskują Twoi użytkownicy. Okres zbierania danych zobaczysz w sekcji Dane z pola po prawej stronie.

Aby uzyskać podział wyniku danych, najedź kursorem na wartość danych, aby wyświetlić etykietkę.

Skonfiguruj środowisko, aby lepiej dopasować je do środowiska użytkowników

Po skonfigurowaniu pobierania danych z testów w terenie zgodnie z opisem w poprzedniej sekcji panel Skuteczność zawiera rekomendacje dotyczące konfiguracji środowiska, aby lepiej dopasować je do wrażeń 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 zapoznaj się z rekomendacjami.

W tym przykładzie, aby lepiej dopasować się do wrażeń użytkowników, możesz użyć typowego rozmiaru ekranu komputera i ograniczyć wykorzystanie procesora oraz 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ć konkretne urządzenia i rozmiary ekranu, możesz użyć trybu urządzenia w panelu Elementy.
2. 82% użytkowników witryny w tym przykładzie korzysta z komputerów. Aby mieć pewność, że porównujesz lokalne wyniki danych z prawidłowymi danymi z terenu, możesz wybrać Komputery na liście Dane z terenu > Urządzenie.
3. W sekcji Ustawienia środowiska ustaw na liście Sieć na przykład Szybka sieć 4G, a w przypadku opcji CPU – na przykład 20-krotne spowolnienie. W tej samej sekcji możesz też zaznaczyć pole Wyłącz pamięć podręczną sieci.
Wskazówka: w menu ograniczania w sekcji Ustawienia środowiska panel Skuteczność może też rekomendować gotowe ustawienia ograniczania. Aby lepiej dopasować ustawienia do urządzeń mobilnych niskiej i średniej klasy, 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 załaduj ponownie stronę, wejdź z nią w interakcję, aby zarejestrować lokalny INP, i ponownie porównaj wyniki wskaźnika.

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

Możesz teraz zacząć poprawiać podstawowe wskaźniki internetowe swojej witryny:

Zapisywanie i analizowanie raportu o skuteczności

W kolejnych sekcjach znajdziesz wskazówki dotyczące rejestrowania profilu, zmiany ustawień rejestrowania i analizowania raportu.

Nagrywanie profilu wydajności

Gdy wszystko będzie gotowe do nagrywania, w panelu Wydajność pojawią się te opcje:

Zmienianie ustawień przechwytywania

Ustawienia rejestrowania umożliwiają zmianę sposobu rejestrowania przez Narzędzia deweloperskie nagrań dotyczących wydajności i mogą dostarczać dodatkowych informacji w raporcie. Kliknij Ustawienia przechwytywania , aby otworzyć menu Ustawienia przechwytywania.

W menu Ustawienia przechwytywania wybierz te opcje:

Wyłącz próbki JavaScriptu: wyłącza rejestrowanie stosów wywołań JavaScriptu wyświetlanych na ścieżce Główna, które są wywoływane podczas rejestrowania. Zmniejszy to obciążenie wydajności.
Pokaż zaawansowaną instrumentację renderowania (powolne): rejestruje zaawansowaną instrumentację renderowania. znacznie utrudniać działanie;
Włącz statystyki selektora CSS (powolne): przechwytuje statystyki selektora CSS. znacznie utrudniać działanie;
Ograniczanie wykorzystania procesora: symulowanie wolniejszej szybkości procesora.
Ograniczanie wykorzystania sieci: symulowanie mniejszej szybkości sieci.

Analizowanie raportu skuteczności

Pełny przewodnik po korzystaniu z panelu Wydajność znajdziesz w artykule Analizowanie nagrania wydajności.

Poniżej znajdziesz pogrupowane tematy z przewodnika oraz inne przydatne dokumenty:

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

Korzystaj z narzędzia Statystyki skuteczności, aby uzyskiwać przydatne statystyki dotyczące skuteczności witryny:

Statystyki wydajności

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

Więcej informacji o kartach Od dołu, Drzewo wywołań i Dziennik zdarzeń:

Wyświetlanie aktywności w tabeli

Aby dowiedzieć się, jak analizować raport:

Zwiększanie skuteczności za pomocą tych paneli

Poznaj inne panele, które pomogą Ci zwiększyć skuteczność witryny: