Panel skuteczności: analizowanie wyników witryny

Dale St. Marthe
Dale St. Marthe
LinkedIn

Do analizowania skuteczności witryny użyj panelu Skuteczność.

Omówienie

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

W panelu Skuteczność możesz:

  • Rejestrowanie profilu skuteczności.
  • Zmień ustawienia przechwytywania.
  • Analiza raportu skuteczności

Obszerny przewodnik po zwiększaniu wydajności witryny znajdziesz w artykule Analizowanie wydajności środowiska wykonawczego.

Otwieranie panelu Skuteczność

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

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

  1. Otwórz Narzędzia deweloperskie.
  2. Otwórz menu polecenia, naciskając:
  3. macOS: Command+Shift+P
  4. Windows, Linux i ChromeOS: Control + Shift + P Menu poleceń z
  5. Zacznij pisać Performance panel, wybierz Pokaż panel wydajności i naciśnij Enter.

Obserwuj podstawowe wskaźniki internetowe na żywo

Gdy otworzysz panel Skuteczność, od razu rejestruje on i pokazuje lokalne dane największe wyrenderowanie treści (LCP), a skumulowane przesunięcie układu (CLS) informują o ich wyniku (dobry, wymaga poprawy lub zły).

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, korzystając z połączenia z siecią i urządzenia.

Panel Skuteczność zawiera listę zarejestrowanych interakcji w ramach 3 kart danych. Aby wyczyścić listę, 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 pól:

  1. W sekcji Skuteczność > Następne kroki > Dane z pola kliknij Skonfiguruj.

    Kliknij przycisk „Skonfiguruj” w sekcji Dalsze kroki.

  2. W oknie Skonfiguruj pobieranie danych z pól zapoznaj się z sekcją Oświadczenie dotyczące prywatności i kliknij OK.

    Zaawansowane: skonfiguruj mapowanie między środowiskami programistycznymi i produkcyjnymi...

    Opcjonalnie, aby automatycznie pobierać najbardziej odpowiednie dane pól, możesz skonfigurować (wiele) mapowań między źródłami środowiska programistycznego a źródłami środowiska produkcyjnego:

    1. W oknie kliknij sekcję Zaawansowane i wybierz + Nowy.

    2. W tabeli mapowania wpisz adres URL wersji deweloperskiej i produkcyjnej, a potem kliknij +.

      Mapowanie między źródłami w środowisku deweloperskim a w środowisku produkcyjnym w sekcji zaawansowanej.

      Na przykład mapowanie wartości http://localhost:8080 na https://example.com spowoduje wyświetlenie danych pól example.com/page1, gdy przejdziesz do witryny 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 z pola dla tego adresu URL, a potem wyświetli dane z tego pola niezależnie od tego, jaką stronę wejdziesz na stronę.

      Aby po konfiguracji zmienić ustawienia pobierania danych pól, kliknij Dane pól > Skonfiguruj

    Po skonfigurowaniu pobierania danych z pól w panelu Skuteczność możesz teraz zobaczyć porównanie wyników danych lokalnych z wynikami użytkowników. Okres zbierania danych możesz sprawdzić w sekcji Dane pól po prawej stronie.

    Gromadzenie danych terenowych po ich pobraniu.

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

Konfigurowanie środowiska w sposób lepiej dopasowany do potrzeb użytkowników

Po skonfigurowaniu pobierania danych z pola w sposób opisany w poprzedniej sekcji w panelu Skuteczność znajdziesz zalecenia dotyczące skonfigurowania środowiska w taki sposób, aby lepiej odpowiadało potrzebom użytkowników.

Aby skonfigurować środowisko:

  1. Na każdej karcie danych rozwiń sekcję Sprawdź lokalne warunki testu (jeśli są dostępne) i przeczytaj zalecenia.

    Sekcja „Uwzględnij lokalne warunki testu” jest rozwijana na każdej karcie danych.

    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.

  2. Zgodnie z konfiguracją środowiska z 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 ekranów, możesz użyć trybu urządzenia w panelu Elementy.
    2. W tym przykładzie 82% użytkowników witryny korzysta z komputera stacjonarnego. Aby mieć pewność, że porównujesz wyniki danych lokalnych z odpowiednimi danymi polowymi, na liście Dane polowe > Urządzenie wybierz Komputer.
    3. W sekcji Ustawienia środowiska na liście Sieć wybierz np. Szybkie 4G, a CPU na przykład na 20-krotne spowolnienie. Możesz też zaznaczyć Wyłącz pamięć podręczną sieci w tej samej sekcji.

  3. Po skonfigurowaniu środowiska ponownie załaduj stronę, wejdź z nią w interakcję, aby zarejestrować lokalny INP, i ponownie porównaj wyniki danych.

    Środowisko jest skonfigurowane tak, aby odpowiadało rzeczywistemu środowisku użytkownika.

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

Dzięki temu możesz zacząć ulepszać podstawowe wskaźniki internetowe swojej witryny:

Generowanie i analizowanie raportu skuteczności

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

Rejestrowanie profilu wydajności

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

Zmień ustawienia przechwytywania

Ustawienia przechwytywania pozwalają zmienić sposób, w jaki Narzędzia deweloperskie rejestruje nagrania skuteczności, i udostępniać w raporcie dodatkowe informacje. Kliknij Ustawienia przechwytywania , aby otworzyć menu Ustawienia przechwytywania.

W menu Ustawienia rejestrowania wybierz te opcje:

Analizowanie raportu skuteczności

Pełną instrukcję korzystania z panelu Skuteczność znajdziesz w artykule Analizowanie 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 przepływie pracy:

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

Aby dowiedzieć się, jak analizować raport:

Zwiększ skuteczność dzięki tym panelom

Odkryj inne panele, które mogą pomóc Ci poprawić wydajność witryny: