Pomiar krytycznej ścieżki renderowania

Ilya Grigorik

Data publikacji: 31 marca 2014 r.

Podstawą każdej solidnej strategii skuteczności jest prawidłowy pomiar i instrumentacja. Nie możesz optymalizować tego, czego nie możesz mierzyć. Ten przewodnik i poznaj różne metody pomiaru skuteczności CRP.

  • Metoda Lighthouse przeprowadza na stronie serię zautomatyzowanych testów, a potem generuje raport dotyczący CRP strony. To podejście zapewnia szybki i ogólny przegląd skuteczności CRP wczytaną w przeglądarce konkretną stronę, co pozwala szybko sprawdzić, jego iteracji i zwiększać wydajność.
  • Interfejs Navigation Timing API rejestruje dane Real User Monitoring (RUM). Jak wskazuje nazwa, są to dane od rzeczywistych użytkowników. interakcji z witryną i zapewnić dokładny wgląd rzeczywistej skuteczności CRP, doświadczanej przez użytkowników w różnych urządzeń i stanu sieci.

Ogólnie rzecz biorąc, warto użyć narzędzia Lighthouse do identyfikacji oczywistego CRP. możliwości optymalizacji, a następnie dostosować kod Navigation Timing API monitorować, jak Twoja aplikacja radzi sobie bez zakłóceń.

Audytowanie strony za pomocą Lighthouse

Lighthouse to narzędzie do audytu aplikacji internetowych, które przeprowadza serię testów na danej stronie, a potem wyświetla wyniki w skonsolidowanym raporcie. Możesz uruchomić Lighthouse jako rozszerzenie Chrome lub moduł NPM, co jest przydatne do integracji Lighthouse z systemami ciągłej integracji.

Aby rozpocząć, przeczytaj artykuł Audyt aplikacji internetowych za pomocą Lighthouse.

Gdy uruchomisz Lighthouse jako rozszerzenie do Chrome, wyniki CRP strony będą wyglądać jak na zrzucie ekranu poniżej.

CRP w Lighthouse

Więcej informacji o wynikach tego audytu znajdziesz w sekcji Krytyczne łańcuchy żądań.

Kombinacja wygenerowanego interfejsu Navigation Timing API i innych zdarzeń przeglądarki podczas wczytywania strony umożliwia rejestrowanie i rejestrowanie rzeczywistego CRP. na dowolnej stronie.

Navigation Timing

Każda etykieta na poprzednim diagramie odpowiada sygnaturze czasowej o wysokiej rozdzielczości, którą przeglądarka rejestruje dla każdej wczytywanej strony. W tym konkretnym przypadku pokazujemy tylko część wszystkich różnych sygnatur czasowych – na razie pomijamy wszystkie sygnatury czasowe związane z siecią, ale wrócimy do nich w następnej lekcji.

Co oznaczają te sygnatury czasowe?

  • domLoading: to jest sygnatura czasowa całego procesu, przeglądarka rozpocznie analizę pierwszych odebranych bajtów kodu HTML dokument.
  • domInteractive: oznacza moment, w którym przeglądarka zakończyła analizę całego kodu HTML i utworzenie modelu DOM.
  • domContentLoaded: oznacza moment, w którym obydwa modele DOM są gotowe i nie ma arkuszy stylów, które blokują wykonywanie kodu JavaScript. Oznacza to, że możemy teraz (potencjalnie) utworzyć drzewo renderowania.
    • Wiele frameworków JavaScript czeka na to zdarzenie, zanim zacznie wykonywać własną logikę. Dlatego przeglądarka rejestruje sygnatury czasowe EventStart i EventEnd, by umożliwić nam prześledzenie czasu trwania tego wykonania.
  • domComplete: jak sama nazwa wskazuje, oznacza to, że wszystkie zasoby na stronie (np. obrazy) zostały przetworzone i pobrane – innymi słowy, wskaźnik ładowania przestał się obracać.
  • loadEvent: w ostatnim kroku podczas wczytywania każdej strony przeglądarka wysyła zdarzenie onload, które może wywołać dodatkową logikę aplikacji.

Specyfikacja HTML określa konkretne warunki dla każdego zdarzenia: kiedy ma być wywoływane, jakie warunki muszą zostać spełnione i jakie powinny być inne ważne kwestie. Na potrzeby tego procesu skupimy się na kilku kluczowych kamieniach milowych związanych z kryczną ścieżką renderowania:

  • domInteractive oznacza gotowość DOM.
  • domContentLoaded zwykle oznacza, że DOM i CSSOM są gotowe.
    • Jeśli nie ma żadnego kodu JavaScript blokującego parser, polecenie DOMContentLoaded uruchomi się natychmiast po domInteractive.
  • domComplete oznacza gotowość strony i wszystkich jej zasobów podrzędnych.
<!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <script>
      function measureCRP() {
        var t = window.performance.timing,
          interactive = t.domInteractive - t.domLoading,
          dcl = t.domContentLoadedEventStart - t.domLoading,
          complete = t.domComplete - t.domLoading;
        var stats = document.createElement('p');
        stats.textContent =
          'interactive: ' +
          interactive +
          'ms, ' +
          'dcl: ' +
          dcl +
          'ms, complete: ' +
          complete +
          'ms';
        document.body.appendChild(stats);
      }
    </script>
  </head>
  <body onload="measureCRP()">
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>

Wypróbuj

Poprzedni przykład może na pierwszy rzut oka wydawać się nieco przytłaczający, ale w rzeczywistości jest całkiem prosty. Interfejs API Czas trwania nawigacji rejestruje wszystkie odpowiednie sygnatury czasowe, a nasz kod czeka na wywołanie zdarzenia onload (pamiętaj, że zdarzenie onload jest wywoływane po zdarzeniach domInteractive, domContentLoaded i domComplete) i oblicza różnicę między różnymi sygnaturami czasowymi.

Wersja demonstracyjna NavTiming

Zostało już dobrane, ale mamy teraz kilka konkretnych etapów do śledzenia oraz podstawową funkcję wykonywania tych pomiarów. Pamiętaj, że zamiast drukowania tych danych na stronie możesz zmodyfikować kod, aby wysyłać je na serwer analityki (Google Analytics robi to automatycznie). Dzięki temu możesz sprawdzać skuteczność swoich stron i identyfikować te, które warto zoptymalizować.

A co z Narzędziami deweloperskimi?

Chociaż dokumenty te czasami korzystają z panelu Network (Sieć) w Narzędziach deweloperskich w Chrome, ilustrują koncepcje CRP, Narzędzia deweloperskie nie sprawdzają się w przypadku CRP. ponieważ nie ma wbudowanego mechanizmu izolacji o kluczowych zasobach. Aby je zidentyfikować, przeprowadź audyt Lighthouse.

Prześlij opinię