Tych dwóch funkcji WebPagetest jeszcze nie znałeś - ale powinieneś z nich regularnie korzystać

Jan Hornung Ostatnia aktualizacja 21.10.2020
6 Min.
Porównaj strony internetowe za pomocą Webpagetest

Webpagetest.org jest prawdopodobnie najlepszym darmowym narzędziem do pomiaru czasu ładowania strony. Ponieważ WebPagetest jest nieporównywalnie bardziej wydajny niż bezpośrednia konkurencja. A to głównie dzięki dwóm funkcjom: Możliwość porównania stron internetowych i długoterminowego porównania.

Ten artykuł jest częścią serii dotyczącej pomiaru i oceny czasu ładowania stron internetowych. W poprzednich artykułach pokazywaliśmy:

Dzisiaj pokażę Ci dwie cechy Webpagetestu, których prawdopodobnie jeszcze nie znałeś. Ponieważ narzędzie to jest szczególnie przydatne do porównywania wydajności i ciągłej oceny czasu ładowania strony.

Więc dzisiaj pokażę wam

Inne ważne parametry - Speed Index, elementy DOM i koszty

Oprócz standardowych wartości - takich jak Start Render, Document Complete, itp. - Webpagetest dostarcza również inne przydatne dane kluczowe, które pozwalają ocenić wydajność Twojej strony. Wartości te są ważne, aby można było poprawnie zinterpretować wyniki narzędzia.

Przykładowy wynik testu strony internetowej pokazujący istotne wartości rozszerzonej charakterystyki
Przykładowy wynik testu strony internetowej. Indeks szybkości, liczba elementów DOM i liczba żądań to trzy ważne wskaźniki ogólnej wydajności Twojej witryny.

Elementy DOM: Element DOM jest, z grubsza rzecz ujmując, blokiem konstrukcyjnym HTML. Im mniej tych elementów musi załadować przeglądarka, tym strona jest szybsza i bardziej odchudzona. Jednak ilość elementów DOM jest tylko wskaźnikiem czasu ładowania strony. Wprowadzając zmiany w Plugins, a w szczególności w Theme, można zauważalnie zmniejszyć liczbę elementów DOM.

Fragment kodu źródłowego wpisu na blogu RAIDBOXES
Każdy element HTML-body, który jest ujęty w nawiasy kątowe jest elementem DOM.

Prośby: Ta wartość opisuje liczbę pojedynczych żądań HTTP, które przeglądarka musi wykonać do serwera WWW. Poszczególne elementy, takie jak pliki CSS, pliki JavaScript lub obrazy, są żądane za pomocą żądania HTTP. Również w tym przypadku teoretycznie obowiązuje zasada: im mniej żądań, tym lepiej. Przy okazji, diagram wodospadowy Twojej strony zawsze daje Ci najlepszy przegląd żądań HTTP, które są ładowane.

W praktyce jednak konkretna liczba żądań HTTP nie odgrywa aż tak dużej roli. Przynajmniej nie jeśli Twoja strona jest szyfrowana SSL i działa na serwerze z HTTP/2. Ponieważ wtedy kilka żądań może być wykonanych i załadowanych w tym samym czasie.

Indeks prędkości: Indeks ten jest obliczany przez Webpagetest i jest wskaźnikiem postrzeganego czasu ładowania strony. Wartość opisuje wartość milisekundową - niskie wartości są lepsze niż wysokie - która wskazuje jak szybko i sprawnie ładowana jest widoczna zawartość Twojej strony. Zasadniczo, Webpagetest określa doświadczenie użytkownika poprzez zrzuty ekranu Twojej strony i mierzy je za pomocą wartości czasowej. Na wypadek, gdybyś był zainteresowany: Webpagetest również sformułował równanie dla tego.

Podstawa obliczania indeksu prędkości
Indeks prędkości Webpagetestu jest wyświetlany i obliczany jako obszar. Im szybciej ładowana jest zawartość strony, tym mniejszy jest obszar, a tym samym Speed Index. Jeśli interesują Cię szczegóły: Webpagetest wymienia tutaj wszystkie informacje na temat obliczania indeksu prędkości.

Speed Index najlepiej nadaje się do porównań. Jeśli działanie optymalizacyjne przynosi znaczące zmniejszenie indeksu, to z reguły zakończyło się sukcesem i strona jest postrzegana jako szybsza. Jeśli Twoja witryna ma znacznie mniejszy Speed Index niż konkurencja, to można założyć, że Twoja witryna oferuje odwiedzającym lepsze wrażenia z przeglądania.

Koszt: Ta wartość jest raczej miła dla oka. Wskazuje on jak droga jest Twoja strona, gdy jest ładowana przez sieci komórkowe. Dane pochodzą z whatdoesmysitecost.com i jest wartością średnią dla wszystkich wymienionych tu stawek krajowych. Korzystając z tej funkcji, możesz przyjrzeć się kosztom jednorazowego załadowania Twojej strony przez urządzenia mobilne. Myślę, że ta wartość nie ma znaczenia dla optymalizacji w większości przypadków. Proszę mnie poprawić, jeśli się mylę.

Najważniejsza funkcja programu Webpagetest: Porównaj bezpośrednio wiele stron internetowych

Jeśli mierzysz czas ładowania strony, to zazwyczaj ma to dwa powody: Albo dokonałeś zmiany i chcesz wiedzieć, jaki wpływ ma ona na czas ładowania, albo chcesz porównać swoją stronę z innymi.

Oczywiście, do takiego stwierdzenia potrzebna jest wartość porównawcza. I właśnie po to powstała funkcja"Visual Comparison". Ponieważ dzięki niemu można bezpośrednio porównać czas ładowania i zachowanie ładowania kilku adresów URL.

Funkcja Visual Comparison pozwala na bezpośrednie porównywanie stron internetowych między sobą.
Funkcję porównania znajdziesz bezpośrednio po prawej stronie standardowej analizy Webpagetest.

Za pomocą tej funkcji można na przykład:

  • porównanie własnych stron z stronami konkurencji
  • sprawdź, co przyniosła zmiana hosta
  • testuj dwie lub więcej podstron względem siebie
  • sprawdź jak szybko ładują się podstrony w porównaniu do strony startowej

W celu bezpośredniego porównania wystarczy nazwać strony, wstawić adresy URL i uruchomić test z wcześniej ustawionymi parametrami.

W celach testowych porównujemy ze sobą dwie nasze strony produktowe. Wynik pozwala na porównanie stron za pomocą kilku metryk. Najbardziej opisowy z nich znajduje się na samym początku dokumentu wynikowego: widok paska filmowego. Tutaj możesz zobaczyć, kiedy odwiedzający postrzega Twoją stronę jako zakończoną ładowaniem (odpowiednia metryka nazywa się Visually Complete).

Wartość referencyjną można również zmienić tak, aby wyświetlane były również inne wartości charakterystyczne, takie jak Fully Loaded i Document Complete.

Wynik, jeśli porównasz dwie strony w Webpagetest
Najbardziej opisowa metryka prezentowana jest na samym początku: Widok z paska filmowego. Możesz to jeszcze skonfigurować poprzez ustawienia na dole po prawej stronie. Diagramy wodospadowe mogą być przełączane w przód i w tył za pomocą suwaka znajdującego się po lewej stronie nad diagramami.

Poniżej znajdują się cztery wykresy słupkowe, które pokazują, jak testowane strony radzą sobie pod względem postrzeganego czasu ładowania, najważniejszych punktów czasu ładowania, liczby żądań HTTP oraz rozmiaru strony.

Dzięki tym metrykom, możesz zobaczyć na pierwszy rzut oka, która z testowanych stron ładuje się szybciej, jest bardziej odchudzona i zapewnia lepsze doświadczenia dla odwiedzającego.

Dla użytkowników Google Webpagetest oferuje również możliwość długoterminowych porównań

Jeśli zalogujesz się do Webpagetest za pomocą swojego konta Google, wtedy poszczególne testy są zapisywane. Daje to możliwość przejrzenia wszystkich testów z ostatniego roku i porównania ich ze sobą.

Długoterminowe porównania w Webpagetest, aby porównać kilka wersji strony internetowej
Historia testów naszej strony internetowej z ostatnich siedmiu dni. Za każdym razem, gdy zalogujesz się na swoje konto Google, Twoje testy są zapisywane i można je później przeglądać.

Przegląd ten jest bardzo praktyczny ze względu na dwie funkcje: Możesz wywołać historyczne dane testowe klikając na adres URL. Oznacza to, że możesz zobaczyć kompletne wyniki wszystkich testów z ostatniego roku.

Możesz też zaznaczać poszczególne testy i porównywać je ze sobą, aby uzyskać szybki przegląd rozwoju swoich stron.

Wniosek: Webpagetest jest znacznie bardziej wydajny niż inne darmowe narzędzia

Bezpośrednie porównanie kilku stron jest z pewnością najpotężniejszą funkcją Webpagetest. Ponieważ pozwala Ci to zobaczyć swoją stronę w odniesieniu do konkurencji, wzorców czy benchmarków branżowych. Wyniki, które otrzymujesz są - jak na standardy webpagetestu - również dobrze przygotowane i łatwe do zrozumienia.

Analiza szeregów czasowych pozwala również na uzyskanie pełnego obrazu rozwoju czasu ładowania strony. Dzięki temu możesz dokładnie zobaczyć, jakie działania optymalizacyjne lub zmiany wpłynęły na Twoją stronę, jej czas ładowania i wrażenia użytkownika.

Dzięki tym dwóm funkcjom, jesteś w stanie wychwycić i, co ważniejsze, przeanalizować wszystkie istotne zmiany na Twoich stronach.

Znasz jeszcze jedną przydatną funkcję Webpagetestu, o której zapomnieliśmy? W takim razie czekamy na Twój komentarz!

RAIDBOXER od początku istnienia firmy i szef działu wsparcia. Na Bar- i WordCampach uwielbia rozmawiać o PageSpeed i wydajności stron internetowych. Najlepszym sposobem na przekupienie go jest espresso - lub bawarski precel.

Powiązane artykuły

Komentarze do tego artykułu

A

Cześć, mam jedno pytanie,
dlaczego webpagetest.org pokazuje czasem dłuższy czas wczytywania strony niż w rzeczywistości - po wpisaniu domeny wybranej przeglądarce internetowej?

Przykładowo wg narzędzia webpagetest strona impreza.us-themes.com w sieci fast 3GB wczytuje się ok. 8,5 sekundy (wykonałem 3 testy na serwerze w Kalifornii - tam strona ma założony hosting, sprawdzałem również na serwerze w Warszawie), a w rzeczywistości strona na moich dwóch komórkach wczytywała się ok. 3 sekundy.

Podobne różnice widziałem na innych stronach. Przykładowo strona senorysenorade.com - w ustawieniu "Cable (5/1 Mbps 28 ms RTT)" wczytywała się ponad 18 sekund, a w rzeczywistości na moich dwóch komputerach i w różnych przeglądarkach wczytywała się o połowę krócej, po zmianie ustawienia na "Native Connection" wynik to ok. 3 sekundy. Oczywiście za każdym razem czyściłem "ciasteczka".

Byłbym wdzięczny za krótką odpowiedź 🙂 Pozdrawiam, Andrzej

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola obowiązkowe oznaczone są *.