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

Za pomocą panelu Wydajność możesz:

zarejestrować profil wydajności;
zmienić ustawienia przechwytywania;
przeanalizować raport skuteczności.

Szczegółowy przewodnik dotyczący zwiększania skuteczności witryny znajdziesz w artykule Analizowanie wydajności w czasie działania.

Otwieranie panelu Wydajność

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

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

Otwórz Narzędzia deweloperskie.
Otwórz menu poleceń , naciskając:
macOS: Command+Shift+P
Windows, Linux, ChromeOS: Control+Shift+P
Zacznij wpisywać Performance panel, wybierz Show Performance panel (Pokaż panel Wydajność) i naciśnij Enter.

Obserwowanie Core Web Vitals na żywo

Gdy otworzysz panel Wydajność , od razu przechwyci on i wyświetli lokalne dane dotyczące największego wyrenderowania treści (LCP) i skumulowanego przesunięcia układu (CLS) oraz ich wyniki (dobre, wymagające poprawy lub złe).

Jeśli wejdziesz w interakcję ze stroną, panel Wydajność przechwyci też lokalne dane dotyczące interakcji do kolejnego wyrenderowania (INP) i ich wynik. Oprócz LCP i CLS daje to pełny obraz podstawowych wskaźników internetowych na stronie przy użyciu połączenia sieciowego i urządzenia. Przechwytuje też i raportuje Core Web Vitals w przypadku miękkich nawigacji po stronie klienta w aplikacjach jednostronicowych.

Pod 3 kartami danych w kartach Interakcje i Przesunięcia układu znajdziesz tabele z informacjami o przechwyconych interakcjach i przesunięciach układu, w tym o elementach, czasach, fazach (w przypadku interakcji) i wynikach (w przypadku przesunięć układu). Aby wyczyścić obie listy, kliknij Wyczyść.

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

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

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

Aby dodać dane z pól:

W sekcji Wydajność > Następne kroki > Dane z pól kliknij Skonfiguruj.
W oknie Konfiguracja pobierania danych z pól zapoznaj się z informacjami o prywatności i kliknij OK.
Zaawansowane: konfigurowanie mapowania między środowiskami programistycznym i produkcyjnym

Opcjonalnie, aby automatycznie pobierać najbardziej odpowiednie dane z pól, możesz skonfigurować (wiele) mapowań między źródłami środowisk programistycznego i produkcyjnego:
1. W oknie rozwiń sekcję Zaawansowane i kliknij + Nowy.
2. W tabeli mapowania wpisz adresy URL środowisk programistycznego i produkcyjnego i kliknij +.
  
  Na przykład mapowanie http://localhost:8080 na https://example.com spowoduje wyświetlenie danych z pól dla example.com/page1, gdy przejdziesz do localhost:8080/page1.
  
  Jeśli z jakiegoś powodu nie możesz automatycznie pobrać danych z pól, możesz też zaznaczyć pole wyboru Zawsze pokazuj dane z pól dla poniższego adresu URL i podać adres URL. Panel Wydajność spróbuje najpierw pobrać dane z 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 pól panel Wydajność wyświetla porównanie lokalnych wyników danych z wynikami uzyskiwanymi przez użytkowników. Okres zbierania danych możesz sprawdzić po prawej stronie w sekcji Dane z pól.

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

Konfigurowanie środowiska tak, aby lepiej odpowiadało środowisku użytkowników

Po skonfigurowaniu pobierania danych z pól zgodnie z opisem w poprzedniej sekcji panel Wydajność wyświetla rekomendacje dotyczące konfigurowania środowiska tak, aby lepiej odpowiadało środowisku 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 rekomendacje.

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 i sieci.
Aby dopasować konfigurację środowiska do tego przykładu:
1. Ustaw widoczny obszar na jeden z typowych 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 pól, możesz wybrać Komputer z listy Dane z pól > Urządzenie.
3. W sekcji Ustawienia środowiska ustaw na przykład listę Sieć na Szybkie 4G, a Procesor na 20-krotne spowolnienie. W tej samej sekcji możesz też zaznaczyć pole wyboru Wyłącz pamięć podręczną sieci.
Wskazówka: w menu ograniczania w sekcji Ustawienia środowiska panel Wydajność może też zalecać użycie ustawień wstępnych ograniczania. Aby lepiej dopasować się do urządzeń mobilnych niskiej i średniej jakości, możesz też skalibrować niestandardowe ustawienia wstępne ograniczania procesora na swoim urządzeniu. Aby to zrobić, wybierz Skalibruj w sekcji Procesor > Skalibrowane ustawienia wstępne.
Po skonfigurowaniu środowiska przeładuj stronę, wejdź z nią w interakcję, aby przechwycić lokalne dane INP, i ponownie porównaj wyniki danych.

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

Możesz teraz zacząć poprawiać Core Web Vitals swojej witryny:

Przechwytywanie i analizowanie raportu skuteczności

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

Rejestrowanie profilu wydajności

Gdy wszystko będzie gotowe do nagrywania, panel Wydajność udostępni Ci te opcje:

Zmienianie ustawień przechwytywania

Ustawienia przechwytywania umożliwiają zmianę sposobu przechwytywania nagrań wydajności przez Narzędzia deweloperskie 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 nagrywania. Zmniejszy to obciążenie wydajności.
Włącz zaawansowane instrumenty do pomiaru renderowania (powolne): przechwytuje zaawansowane instrumenty do pomiaru renderowania. Znacznie pogarsza wydajność.
Włącz statystyki selektora CSS (powolne): przechwytuje statystyki selektora CSS. Znacznie pogarsza wydajność.
Ograniczanie wykorzystania procesora: symuluje wolniejsze działanie procesora.
**Ograniczanie wykorzystania sieci**: symuluje wolniejsze działanie sieci.
Przechwytywanie zrzutów ekranu: gdy opcja Zrzuty ekranu jest włączona, wybierz ustawienie wstępne rozmiaru klatki zrzutu ekranu i limitu liczby klatek.

Analizowanie raportu skuteczności

Szczegółowy przewodnik dotyczący korzystania z panelu Wydajność znajdziesz w artykule Analizowanie nagrania wydajności.

Poniżej znajdziesz grupowanie tematów z przewodnika oraz inne przydatne dokumenty:

Jak poruszać się po raporcie:

Użyj statystyk skuteczności, aby uzyskać przydatne statystyki dotyczące skuteczności witryny:

Statystyki wydajności

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

Jak korzystać z kart Od dołu, Drzewo wywołań i Dziennik zdarzeń:

Wyświetlanie aktywności w tabeli

Jak analizować raport:

Zwiększanie skuteczności za pomocą tych paneli

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