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 aplikacji internetowych. Analizuj profile, aby znajdować potencjalne wąskie gardła pod względem wydajności i sposoby optymalizacji wykorzystania zasobów.

W panelu Wydajność możesz:

  • Rejestrowanie profilu skuteczności.
  • Zmień ustawienia nagrywania.
  • Analizowanie 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ść.

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

  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.

Śledź podstawowe wskaźniki internetowe na żywo

Gdy otworzysz panel Skuteczność, natychmiast zostanie on zaktualizowany i zacznie wyświetlać lokalne dane największego wyrenderowania treści (LCP) i 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, korzystając z połączenia z siecią i urządzenia.

Panel Skuteczność zawiera listę zarejestrowanych interakcji na 3 kartach 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 pól z Raportu na temat użytkowania Chrome i porównać wrażenia użytkowników witryny z danymi lokalnymi.

Aby dodać dane pól:

  1. W sekcji Skuteczność > Dalsze kroki > Dane pól kliknij Skonfiguruj.

    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 rozwiń sekcję Zaawansowane i kliknij + 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 pól, możesz włączyć opcję Zawsze pokazuj dane pól dla poniższego adresu URL i podać adres URL. Panel Wydajność 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 teraz porównać wyniki danych lokalnych z tymi, które uzyskują użytkownicy. Okres zbierania danych możesz zobaczyć w sekcji Dane z pola 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ę Weź pod uwagę lokalne warunki testu (jeśli jest dostępna) i przeczytaj zalecenia.

    Strona „Sprawdź lokalne warunki testu” rozwinięte w sekcjach na każdej karcie danych.

    Wygląda na to, że w tym przykładzie, aby zwiększyć wygodę użytkowników, warto zastosować typowy rozmiar ekranu komputera, który pozwala ograniczyć wykorzystanie procesora i 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 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 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ć rzeczywistym wrażeniom użytkowników.

    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.

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

Generowanie i analizowanie raportu skuteczności

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

Rejestrowanie profilu wydajności

Gdy wszystko będzie gotowe, w panelu Skuteczność masz do wyboru 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. Aby otworzyć menu Ustawienia rejestrowania, kliknij Ustawienia rejestrowania .

Wybierz te opcje w menu Ustawienia przechwytywania:

Analizowanie raportu skuteczności

Pełną instrukcję korzystania z panelu Skuteczność znajdziesz w artykule Analizowanie nagrania skuteczności.

Poniżej przedstawiliśmy grupę tematów zawartych w przewodniku, a także inne przydatne dokumenty:

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

Aby dowiedzieć się, jak skupić się na tym, co jest ważne dla Twojego przepływu 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

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