Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

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 w aplikacjach internetowych. Analizuj profile, aby znajdować 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.

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

Otwórz panel 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 Core Web Vitals 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 wartość. Wraz z LCP i CLS daje to pełny przegląd podstawowych wskaźników internetowych 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ć zestawienie wyniku wskaźnika, najedź kursorem na wartość wskaźnika, 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 danymi lokalnymi.

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 z terenu, możesz skonfigurować (wiele) mapowań między źródłami środowiska programistycznego i produkcyjnego:
1. W oknie dialogowym rozwiń sekcję Zaawansowane i kliknij + Nowy.
2. W tabeli mapowania wpisz adresy URL środowiska deweloperskiego i produkcyjnego, a potem kliknij +.
  
  Na przykład mapowanie 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 terenu, możesz włączyć opcję 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 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 urządzeń w panelu Skuteczność zobaczysz porównanie wyników danych lokalnych z wynikami, które uzyskują Twoi użytkownicy. Okres zbierania danych możesz sprawdzić w sekcji Dane z pola po prawej stronie.

Aby uzyskać zestawienie wyniku wskaźnika, najedź kursorem na wartość wskaźnika, 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 Wydajność 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 wyniki lokalnych pomiarów z prawidłowymi danymi z terenu, na liście Dane z terenu > Urządzenie wybierz Komputer.
3. W sekcji Ustawienia środowiska ustaw na przykład w polu Sieć opcję Szybka sieć 4G, a w polu Procesor opcję 20-krotne spowolnienie. W tej samej sekcji możesz też wyłączyć 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.

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ć Core Web Vitals swojej witryny:

Rejestrowanie i analizowanie raportu 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. Aby otworzyć menu Ustawienia przechwytywania, kliknij 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.
Włącz zaawansowane instrumenty do malowania (wolne): rejestruje zaawansowane instrumenty do malowania. znacznie utrudniać działanie;
Włącz statystyki selektora CSS (powolne): przechwytuje statystyki selektora arkusza CSS. znacznie utrudniać działanie;
Ograniczanie wykorzystania procesora: symulowanie mniejszej 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 ze statystyk skuteczności, aby uzyskiwać przydatne informacje o wydajności witryny:

Analiza skuteczności

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

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

Wyświetlanie aktywności w tabeli

Aby dowiedzieć się, jak analizować raport:

Zwiększanie skuteczności dzięki tym panelom

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