jak zmierzyć wydajność witryny za pomocą narzędzi programistycznych Google Chrome

w tym artykule opisano, jak korzystać z narzędzi programistycznych Google Chrome do pomiaru i monitorowania wydajności witryny.

Korzystanie z narzędzi programistycznych Chrome

przeglądarka internetowa Google Chrome zawiera narzędzia programistyczne, funkcję, która pomaga programistom w debugowaniu problemów z HTML, CSS i JavaScript:

• aby uzyskać dostęp do narzędzi dla programistów w systemie Microsoft Windows lub Linux, naciśnij Ctrl + Shift + I.
• aby uzyskać dostęp do narzędzi dla programistów w systemie Apple Mac OS X, naciśnij Option + Command+I.

poniższy obraz przedstawia narzędzia dla programistów otwarte na stronie głównej Google:

na karcie Sieć w panelu Narzędzia dla programistów Chrome wyświetla listę wszystkich połączeń dla bieżącej strony. Aby przetestować określoną stronę, Otwórz Narzędzia programistyczne i przejdź do strony, którą chcesz przetestować. Alternatywnie, jeśli chcesz przetestować bieżącą stronę, po prostu odśwież ją.

Chrome wyświetla informacje dla każdego Zasobu strony i jego żądania:

Nazwa: Nazwa lub adres URL żądanego zasobu.

Metoda: Metoda HTTP (GET lub POST).

Status: kod statusu HTTP zwracany przez serwer.

Type: typ MIME zasobu.

inicjator: referer wysłany do serwera; zwykle jest to adres URL strony, którą przeglądasz.

Rozmiar: Rozmiar zasobu odbieranego przez przeglądarkę (jeśli strona została skompresowana przez serwer, wartość ta jest mniejsza niż rzeczywisty rozmiar pliku).

Czas: całkowity czas pobierania zasobu, w tym czas wyszukiwania DNS i pobierania.

oś czasu: oś czasu to “wodospadowy” widok poklatkowy każdego żądania. Jeśli najedziesz kursorem myszy nad paskiem na wodospadie, pojawi się podpowiedź ze szczegółowym podziałem czasu pobierania:

• blokowanie: obejmuje to czas na wyszukiwanie DNS, SSL handshake i nawiązanie połączenia z serwerem.
• wysyłanie: Obejmuje to czas na wysłanie żądania ze wszystkimi danymi żądania do serwera i otrzymanie potwierdzenia od serwera, że otrzymał żądanie.
• oczekiwanie: obejmuje to czas renderowania przez serwer treści, które mają być serwowane, I rozpoczęcia wysyłania ich do przeglądarki.
• odbieranie: obejmuje to czas potrzebny na pobranie zawartości.

połączenie czasu oczekiwania i odbioru jest najważniejszym czynnikiem określającym Szybkość witryny. Jednak szybkość połączenia internetowego może również wpływać na wydajność, dlatego zawsze należy porównywać czasy z tej samej lokalizacji podczas ustanawiania benchmarków wydajności witryny.

na dole karty sieć znajduje się podsumowanie procesu ładowania strony. Podsumowanie to obejmuje całkowitą liczbę żądań, Całkowity rozmiar całej strony, w tym jej zasobów, oraz podział czasu spędzonego na renderowaniu strony w przeglądarce.

pierwsza wartość czasu to całkowity czas spędzony na ładowaniu całej zawartości na stronie. Wartość ta obejmuje zawartość załadowaną przez JavaScript po wyrenderowaniu strony; w rezultacie liczba ta może ulec zmianie, jeśli żądania pojawią się w tle.

dwie wartości czasu w nawiasach są zdarzeniami ważnymi dla optymalizacji witryny:

• załaduj: To zdarzenie oznacza czas załadowania strony, w tym wszystkich plików JavaScript, CSS i obrazów znajdujących się w oryginalnym dokumencie HTML. To zdarzenie zazwyczaj trwa dłużej niż Zdarzenie DOMContentLoaded.
• DOMContentLoaded: to zdarzenie przedstawia postrzegany czas załadowania strony przez użytkownika. Jest to czas, aby renderować stronę zgodnie z opisem w oryginalnym dokumencie, zanim JavaScript zażąda dodatkowych zasobów. Czas ten jest zapisywany, gdy przeglądarka uruchomi Zdarzenie DOMContentLoaded w JavaScript. (Przykładem zasobu żądanego poza DOM jest Google Analytics.)