Analiza wydajności za pomocą WebPageTest

Opublikowany: 2021-05-19

Szybka strona internetowa jest teraz absolutną koniecznością. W epoce mobilnej i wśród niecierpliwych konsumentów powolna strona internetowa może być różnicą między prosperowaniem a upadkiem Twojej firmy. Jak więc dokładnie testujesz swoją witrynę pod kątem szybkości i jak możesz zidentyfikować problemy, które mogą ją spowolnić?

W tym artykule przyjrzymy się popularnemu narzędziu o nazwie WebPageTest. To narzędzie pomiarowe zapewnia mnóstwo szczegółowych statystyk i danych, które można wykorzystać do wskazania obszarów witryny, które można by ulepszyć z punktu widzenia wydajności. Jednak sama ilość dostarczonych informacji może być nieco przytłaczająca. Nie martw się… opiszemy krok po kroku, jak korzystać z WebPageTest, aby stało się jasne, jak najlepiej wykorzystać to bezpłatne narzędzie.

Pierwsze kroki z WebPageTest

Po pierwsze, przejdź na stronę webpagetest.org, aby rozpocząć. Układ jest bardzo przejrzysty i od razu zobaczysz pole, w którym możesz wpisać adres URL swojej witryny.

Na początku masz wybór… czy korzystasz z domyślnej zakładki „Testowanie zaawansowane” czy przechodzisz do zakładki „Testowanie proste”? Cóż, funkcja prostego testowania doskonale nadaje się do szybkiego przeglądu witryny, ale w tym artykule przyjrzymy się karcie Testowanie zaawansowane.

Zaawansowane ustawienia testowania

Przewiń stronę w dół, a zobaczysz menu rozwijane Lokalizacja testowa. To dość oczywiste. Lokalizacja, którą chcesz wybrać, to ta najbliższa lokalizacji docelowej. Jeśli mają siedzibę w Australii, to testowanie z Londynu w Wielkiej Brytanii nie ma większego sensu. Celem tego ćwiczenia jest sprawdzenie, jak nasza strona internetowa działa dla naszych użytkowników.

Istnieje mnóstwo lokalizacji, ale niektóre lokalizacje oferują więcej opcji testowych niż inne w postaci przeglądarki używanej do testowania. Ponownie, chcesz spróbować i wybrać taki, który prawdopodobnie będzie używany przez twoją grupę docelową. Aby wyświetlić statystyki dotyczące przeglądarek, z których odwiedzana jest Twoja witryna, możesz skorzystać z narzędzi takich jak Google Analytics.

Inne naprawdę fajne ustawienia, które możesz wybrać, to takie jak połączenie. W ten sposób urządzenie użytkownika końcowego jest połączone z Internetem. Kliknij menu rozwijane obok „Połączenie”, a zobaczysz opcje obejmujące połączenie 3G (wolne lub szybkie). To naprawdę fajne, ponieważ daje poczucie rzeczywistego świata, w jaki sposób Twoi odbiorcy będą postrzegać Twoją witrynę.

Innym bardzo przydatnym ustawieniem jest opcja „Powtórz widok”. Ta opcja, gdy jest włączona, oznacza, że witryna zostanie ponownie przetestowana po pierwszym załadowaniu, co pomoże pokazać wpływ buforowania, który włączono w witrynie.

Istnieje wiele innych zaawansowanych opcji, które warto poznać. Dla większości z nas, o ile nie zagłębiasz się w testowanie swojej witryny, ustawienia opisane powyżej będą wystarczające. Dla tych, którzy chcą dowiedzieć się więcej o dostępnych ustawieniach, zapoznaj się z dokumentacją WebPageTest.

Zanotuj dowolne zmienione ustawienia. Ważne jest, aby podczas fazy testowania, a następnie optymalizacji, powtarzać testy przy użyciu tych samych ustawień, w przeciwnym razie wyniki, które otrzymujesz, mogą być zniekształcone. Gdy będziesz gotowy, naciśnij przycisk „Rozpocznij test”, a następnie usiądź wygodnie i poczekaj na wyniki (zwykle zajmuje to około minuty).

Pierwszy ekran

W tym przykładzie wykorzystaliśmy witrynę Apple (apple.com) i przetestowaliśmy ją przez szybkie połączenie 3G z Londynu w Wielkiej Brytanii. Wstępne wyniki przedstawiono poniżej:

Spójrz na prawy górny róg, a zobaczysz 7 kolorowych pól, które zapewniają wstępny przegląd wyników strony. Przyjrzyjmy się każdemu z nich.

Ramka 1 – Ocena bezpieczeństwa

Jest to najnowsza funkcja udostępniona przez WebPageTest, która w rzeczywistości jest integracją ze Snykiem i zapewnia wgląd w bezpieczeństwo strony internetowej. Jeśli klikniesz na kolorowe pole, zostaniesz przeniesiony na stronę synk.io, która zawiera szczegółową analizę danej strony internetowej z punktu widzenia bezpieczeństwa. Na szczególną uwagę zasługują nagłówki bezpieczeństwa HTTP, które są wymieniane między klientem a serwerem w celu zdefiniowania szczegółów bezpieczeństwa komunikacji. Najważniejsze z nich to Strict-Transport-Security, Content-Security-Policy, X-Frame-Options.

Jeśli w Twojej witrynie brakuje jakiegokolwiek ważnego nagłówka bezpieczeństwa, zostaniesz o tym poinformowany na stronie Synk.

Ramka 2 – Czas pierwszego bajtu

Drugie pole zawiera czas pierwszego bajtu (znany również jako czas do pierwszego bajtu lub TTFB). Jest to czas, po którym serwer odpowie pierwszym bajtem danych z powrotem na żądanie klienta. Najlepiej byłoby, gdybyś dążył do liczby poniżej 300 ms. Ta wartość jest bardziej związana z serwerem i nie ma znaczenia dla czasu poświęconego na renderowanie plików witryny. Może to mieć wpływ na przykład na powolny serwer DNS lub niewystarczające buforowanie.

W tym momencie należy pamiętać, że jeśli masz włączoną pamięć podręczną, powinieneś ponownie uruchomić test strony internetowej, aby zmierzyć zawartość pamięci podręcznej. W rzeczywistości zaleca się przeprowadzenie testu co najmniej 3 razy, aby upewnić się, że wyniki w pełni odzwierciedlają zawartość pamięci podręcznej witryny.

Czas pierwszego bajtu to suma trzech wartości: czas potrzebny na wysłanie żądania HTTP, czas przetworzenia przez serwer oraz czas potrzebny serwerowi na odesłanie pierwszego bajtu do klienta. Możesz uzyskać więcej informacji na ten temat, klikając pole:

Jak widać, witryna Apple nie wypadła zbyt dobrze w tej konkretnej części testu.

Po nawiązaniu tego połączenia zasoby mogą zacząć być dostarczane. Najczęstszymi przyczynami wolnego TTFB są problemy z siecią, konfiguracja serwera WWW, możliwe problemy z wejściem/wyjściem dysku serwera i pamięcią RAM.

Ramka 3 – Utrzymaj przy życiu

Pole „Keep-alive Enabled” pokazuje stan utrzymywania aktywności nagłówka HTTP. Gdy ten nagłówek jest włączony, dane będą przesyłane przy użyciu tego samego połączenia, w przeciwnym razie dla każdego pliku, który ma zostać przesłany, należy utworzyć nowe połączenie. W większości przypadków funkcja Keep-alive jest domyślnie włączona i ogólnie jest to ustawienie po stronie serwera. jeśli chcesz to włączyć samodzielnie, możesz edytować plik .htaccess i wstawić poniższy kod

 <ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

Ramka 4 – Transfer kompresyjny

Wartość Compress Transfer reprezentuje stan kompresji Gzip. Jest to technika używana do kompresji i późniejszej dekompresji plików statycznych w czasie rzeczywistym. W ten sposób skraca się czas przesyłania, ponieważ zmniejsza się rozmiar pliku. Jeśli Twój dostawca serwera domyślnie nie stosuje tej technologii, możesz to zrobić samodzielnie, określając odpowiednią regułę dla każdego typu pliku w następujący sposób:

 AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html

Ponownie kliknięcie odpowiedniego kolorowego pola przeniesie Cię do sekcji szczegółowego przeglądu, dzięki czemu możesz zobaczyć, co dokładnie dzieje się w Twojej witrynie.

Ramka 5 – Kompresuj obrazy

Pole Kompresuj obrazy jest dość oczywiste. Kliknij na niego, a pokaże Ci, jakie obrazy można lepiej skompresować.

W tym przypadku WebPageTest zidentyfikował trzy obrazy, które, jego zdaniem, można z powodzeniem skompresować, dodatkowo oszczędzając 54 KB danych, które nie muszą być przesyłane. To może nie brzmieć dużo, ale na telefonie komórkowym każdy kb, który możesz zapisać, robi różnicę.

Obrazy to najbardziej zajmujący miejsce aspekt zawartości statycznej. Kompresowanie ich to absolutna konieczność. Analiza WebPageTest ułatwia określenie, które obrazy mogą spowalniać Twoją witrynę i dlatego wymagają uwagi.

Ramka 6 – Zawartość statyczna pamięci podręcznej

Jeśli klikniesz pole „Przechowuj zawartość statyczną w pamięci podręcznej”, zostaniesz przeniesiony do szczegółowej sekcji zatytułowanej „Wykorzystywanie pamięci podręcznej zasobów statycznych w przeglądarce”.

Buforowanie przeglądarki może być wykorzystywane przez programistę lub administratora, instruując przeglądarkę internetową, kiedy buforować zasób, a kiedy nie i jak długo, przy użyciu poprawnych nagłówków HTTP. Bardziej szczegółowe informacje na temat pamięci podręcznej przeglądarki można znaleźć w naszym artykule „Jak działa pamięć podręczna przeglądarki?”. Możesz również dowiedzieć się, jak Pressidium wdraża buforowanie przeglądarki tutaj.

Ramka 7 – Efektywne wykorzystanie CDN

Warto korzystać z CDN (lub Content Delivery Network), jeśli masz rozłożoną geograficznie bazę użytkowników. Jeśli na przykład wszyscy Twoi klienci mają siedzibę w Londynie, a serwer hosta również znajduje się w Londynie, prawdopodobnie nie ma sensu korzystać z CDN. Jeśli jednak Twoi użytkownicy są bardziej zróżnicowani geograficznie, CDN może mieć ogromny wpływ na wydajność Twojej witryny dla tych użytkowników, umieszczając kopię Twojej witryny na serwerze znajdującym się bliżej nich.

Jeśli używasz CDN, WebPageTest sprawdzi, jak skutecznie to działa.

Wyniki wydajności

Przejdźmy dalej i spójrzmy na więcej danych, zaczynając od wyników wydajności, które zobaczysz u góry karty Podsumowanie.

W wynikach wydajności możemy zobaczyć najważniejsze przeglądy takich rzeczy, jak czas pierwszego bajtu, indeks prędkości, czyli średni czas, w którym wyświetlane są widoczne części strony, skumulowane przesunięcie układu (CLS) do pomiaru stabilności wizualnej, czas poświęcony aż dokument zostanie załadowany w pełni i dalej.

Widok na wodospad

Tuż pod wynikami wydajności możemy zobaczyć widok kaskadowy dla każdego z Twoich biegów. Jeśli klikniesz na którykolwiek z nich zostaniesz przekierowany na stronę zawierającą pełne szczegóły biegu w formacie wodospadu.

Otrzymasz wszystkie statystyki wydajności dla każdego pojedynczego zasobu Twojej witryny. Są one w innym kolorze, co ułatwia ich rozróżnienie. Jeśli klikniesz na którekolwiek z nich, otworzy się wyskakujące okienko, które zawiera jeszcze więcej szczegółów.

Widok wodospadu to wizualna reprezentacja strony i sposobu wczytywania się komponentów. Dzięki temu możemy łatwo zidentyfikować wszelkie komponenty, które mogą spowolnić działanie. Możliwość sprawdzenia, gdzie są wąskie gardła, jest bardzo pomocna i oznacza, że możemy rozwiązać problemy z precyzyjną dokładnością, zamiast zgadywać.

Widok połączenia

Tablica Connection View jest również bardzo przydatną funkcją, ponieważ pozwala bardzo łatwo zidentyfikować problemy z wydajnością sieci poprzez wizualne podsumowanie pomiarów połączeń między przeglądarką a serwerem.

Możesz zobaczyć stan połączenia bezpośrednio od DNS, połączenia początkowego, negocjacji SSL aż do takich rzeczy, jak zasoby wideo. Poniżej znajduje się również wykres przedstawiający wykorzystanie procesora na urządzeniu, które ładuje witrynę. Istnieje również wskaźnik przepustowości pokazujący poziomy używane podczas renderowania danych.

Szczegóły wniosków

Wreszcie, poniżej widoku połączenia, dostępne są dwie kolejne tablice analiz — szczegóły żądania i nagłówki żądania.

Tablica szczegółów żądania jest bardzo pomocna i zawiera listę wszystkich żądanych zasobów wraz z danymi dotyczącymi tego żądania, takimi jak typ treści, czas rozpoczęcia żądania, liczba pobranych bajtów i wiele innych. Ta tabela jest w rzeczywistości sortowalna… wystarczy kliknąć nagłówki kolumn, aby uporządkować według tej konkretnej kolumny.

Tablica nagłówków żądań zawiera (tak, zgadłeś) listę zasobów żądań wraz z informacjami nagłówka. Kliknij każdy, aby uzyskać szczegółowe informacje.

Wniosek

Jeśli potrzebujesz dogłębnej analizy aktywności swojej strony internetowej, WebPageTest jest fantastycznym narzędziem do wykorzystania. Nawet jeśli nie zagłębisz się w informacje, które zawiera, możesz szybko sprawdzić, czy Twoja witryna działa dobrze i czy istnieje potrzeba dokładniejszego przyjrzenia się jej wydajności. A co najważniejsze, to nic nie kosztuje!