Recenzja WebPageTest.org: Otwarty Test Wydajności, Który Naprawdę Działa

Core Web Vitals jest jednym z czynników rankingu w Google. Oznacza to, że przeprowadzanie testów wydajności staje się obowiązkowe dla wszystkich właścicieli stron internetowych, którzy chcą lepszą optymalizację pod kątem wyszukiwarek (SEO).

Przez ponad dekadę GTmetrix był domyślnym wyborem dla każdego, kto potrzebował szybkiego spojrzenia na szybkość swojej strony. Był szybki, prosty i co najważniejsze, hojny — ale mówimy „był„, ponieważ w końcu 2023 i w połowie 2024 roku ta hojność się wyczerpała.

Z nowymi płatnymi barierami blokującymi kluczowe funkcje, surowymi ograniczeniami darmowego testowania i analizą mobilną dostępną tylko w ramach subskrypcji, narzędzie, które wszyscy dodaliśmy do zakładek, już nie jest wzorem, jakim kiedyś było.

Na szczęście istnieje WebPageTest.org (WPT), platforma, która od 2008 roku działa w tle, napędzając najbardziej rygorystyczne audyty wydajności internetu.

Więc przetestowaliśmy WPT pod kątem głównych parametrów wydajności stron internetowych, aby ustalić, czy może zastąpić inne narzędzia do testowania szybkości, takie jak GTmetrix, bez żadnych kompromisów.

Idź z nami.

Jakie Są Początki WebPageTest.org?

WebPageTest.org to otwarta platforma testowania wydajności, która zapewnia dogłębną diagnostykę stron internetowych. Projekt rozpoczął się w AOL, a następnie został rozwinięty przez Patricka Meenana w Google, aby pomóc inżynierom zrozumieć zachowanie przeglądarek.

Narzędzie pozostaje aktywne od ponad szesnastu lat, ponieważ jest wspierane przez społeczność specjalistów od wydajności, którzy wierzą w wkład w otwarte oprogramowanie.

W rzeczywistości to narzędzie zostało stworzone przez inżynierów ds. wydajności specjalnie dla innych inżynierów ds. wydajności, którzy wymagają danych o wysokiej wierności. Każdy test jest przeprowadzany na prawdziwej przeglądarce, czy to Chrome, Firefox, czy Safari, a nie na symulacji bezinterfejsowej, która może przeoczyć błędy renderowania. Ta techniczna podstawa zapewnia, że wyniki odzwierciedlają to, co rzeczywisty człowiek doświadcza na swoim urządzeniu.

Projekt przeszedł pod skrzydła Catchpoint w 2020 roku, aby zapewnić, że będzie miał zasoby, by pozostać bezpłatnym dla publiczności. Teraz, zamiast tylko subskrypcji, WPT jest finansowane przez firmę macierzystą, która wykorzystuje dane do własnych badań.

Jak Porównują Się Funkcjonalności Przy Codziennym Użytkowaniu?

Musimy również zobaczyć, jak WPT radzi sobie z metrykami strony internetowej, które są ważne dla twojego codziennego przepływu pracy. Jeśli przychodzisz z GTmetrix, zestaw funkcji będzie ci znajomy, ale głębia danych jest znacznie większa.

Monitorowanie Podstawowych Wskaźników Strony

WebPageTest nie wystawia jedynie oceny zdane/nie zdane — szczegółowo analizuje kluczowe wskaźniki jakości strony (LCP, CLS, INP), które Insights często ukrywa.

Kiedy przeprowadzasz test, WPT wizualizuje metryki strony na osi czasu. Zamiast po prostu informować, że „Twoje Skumulowane Przesunięcie Układu wynosi 0,25”, podkreśla dokładną klatkę w sekwencji ładowania, gdzie nastąpiło przesunięcie.

To jest kluczowe dla debugowania, ponieważ możesz zobaczyć dokładny układ przed skokiem i układ po nim.

Wprowadza także „Możliwości”, sekcję która odzwierciedla „Rekomendacje” z GTmetrix, do których jesteśmy przyzwyczajeni, ale z lepszym priorytetyzowaniem.

Jeśli masz 10 problemów, WPT pomaga zidentyfikować, które z nich nie mają znaczenia dla natychmiastowych zysków wydajności i na których skupić się, aby faktycznie poprawić SEO i szybkość strony internetowej.

Wykresy Waterfall i Analiza Żądań

Wykres wodospadowy to klejnot koronny WebPageTest: jest zagęszczony, kolorowy i początkowo przerażający. Ale gdy nauczysz się go czytać, nigdy nie będziesz chciał wrócić do uproszczonej listy.

Bezpłatna wersja GTmetrix pokazuje tutaj tylko podstawową listę plików. WebPageTest pokazuje każde pojedyncze żądanie, podzielone na pięć do dziesięciu odrębnych faz, zakodowane kolorami do diagnozy:

• DNS i Połączenie: Pokazuje, jak długo trwało znalezienie serwera. Długie paski w tym miejscu oznaczają, że Twój dostawca DNS jest wolny.
• Negocjacje SSL: Pokazuje czas spędzony na nawiązaniu bezpiecznego połączenia. Jeśli jest to ogromny czas, konfiguracja TLS serwera może być nieaktualna.
• Czas do Pierwszego Bajtu: TTFB to czas, który upływa, zanim przeglądarka otrzyma pierwszy bajt odpowiedzi serwera. Długi pasek wskazuje na wolny czas odpowiedzi serwera, co często świadczy o problemach z zapytaniami do bazy danych lub przetwarzaniem po stronie serwera (wskazuje to na optymalizację bazy danych)
• Pobieranie Zawartości: Przeglądarka faktycznie odbiera dane.

Najpotężniejszą funkcją jest tutaj widok „Połączenie”.

Możesz zobaczyć dokładnie, jak przeglądarka otwiera równoległe połączenia do pobierania obrazów i dostrzec dokładny moment, kiedy skrypt śledzący strony trzeciej strony blokuje dalsze ładowanie Twojej witryny.

Rekomendacje Wydajnościowe

Wszystkie sugestie WPT są dostosowane do kontekstu. Zamiast ogólnej listy kontrolnej, WebPageTest używa swojego silnika „Opportunities” i „Experiments”.

Zamiast sugerować „Odroczenie JavaScriptu”, identyfikuje konkretne pakiety blokujące główny wątek i sugeruje przeprowadzenie testu bez nich.

Jeszcze bardziej imponującą funkcją jest „No-Code Experiments”. Pozwala ci „testować” poprawki bez faktycznej zmiany kodu. HTML zostanie przepisany na bieżąco i pokaże ci wynik. To pozwala zaoszczędzić godziny pracy programistycznej. Możesz udowodnić, że poprawka działa, zanim poprosisz swojego programistę o jej implementację.

✏️Uwaga: Jest to płatna funkcja, więc musisz zdecydować, czy koszty są uzasadnione dla Twojego przypadku użycia.

Lokalizacje I Urządzenia Testowe

To jest kluczowa funkcja. Większość darmowych narzędzi po prostu nie może sobie pozwolić na oferowanie wielu lokalizacji testowych i urządzeń. WPT może. Otwórz okno modalne lokalizacji, a zobaczysz wszystkie dostępne miasta i kraje.

Na dodatek firma oferuje także ISP i Node, jeśli chcesz testować na konkretnych sieciach. Ponadto, WPT emuluje setki urządzeń i wersji przeglądarek (oraz również obsługuje kilka rzeczywistych urządzeń), aby przeprowadzać z nich testy.

Jeśli Twoi odbiorcy pochodzą z Londynu, a większość użytkowników posiada iPhone’a 14, możesz stworzyć tę konkretną kombinację, aby przeprowadzić testy i uzyskać najdokładniejsze wyniki.

Zaawansowane Funkcje w WebPageTest.org

Istnieją dwie funkcjonalności, które wyróżniają WPT dla programistów: „Scripting” oraz widok „Filmstrip”.

Skryptowanie to zaawansowana funkcjonalność, która umożliwia automatyzację skomplikowanych zadań. Na przykład, możesz napisać krótki skrypt, który kazałby przeglądarce zalogować się na twoją stronę przed rozpoczęciem testu. Pozwala to zmierzyć szybkość działania panelu członkowskiego lub strony realizacji zakupu.

Większość darmowych narzędzi pozwala testować tylko publiczne strony, które nie wymagają hasła. Ta funkcja czyni platformę potężnym narzędziem diagnostycznym dla aplikacji internetowych.

Widok filmstrip to kolejna zaawansowana funkcja, która wykonuje zrzut ekranu Twojej strony co 0,1 do 0,5 sekundy podczas ładowania. Możesz przewijać te obrazy, klatka po klatce, aby zobaczyć dokładnie to, co widzi odwiedzający w swojej przeglądarce.

Ta funkcja pomaga zauważyć problemy wizualne, takie jak zmiana rozmiaru czcionki lub późne pojawianie się obrazów, które mogą nie być widoczne w kodzie. Możesz również użyć trybu porównania, aby obok siebie obejrzeć dwa różne testy. Jest to przydatne, gdy chcesz sprawdzić, czy wprowadzona przez ciebie zmiana faktycznie poprawiła szybkość.

Bonus „Zielony” Z Kontrolą Emisji CO2

WPT wprowadziło funkcję, która odnosi się do wpływu na środowisko naszej cyfrowej infrastruktury o nazwie Carbon Control.

Korzysta z biblioteki CO2.js od Green Web Foundation, aby oszacować emisję dwutlenku węgla generowaną przez pojedyncze załadowanie strony.

Obliczenie opiera się na dwóch głównych czynnikach, aby określić Twoją ocenę.

• Rozmiar transferu danych: Całkowita ilość danych (w kilobajtach lub megabajtach), która musi zostać przesłana z serwera na urządzenie użytkownika. Cięższe strony wymagają więcej energii do przesłania i przetworzenia.
• Status zielonego hostingu: Czy centrum danych hostujące stronę internetową korzysta z odnawialnych źródeł energii (takich jak wiatr lub słońce) czy paliw kopalnych.

To dodaje cenną perspektywę do audytów wydajności. Możesz pokazać klientowi, że optymalizacja ich kodu robi więcej niż poprawia ich pozycję w Google. Mierzalnie redukuje fizyczne odpady produkowane przez ich firmę i pomaga osiągnąć ich własne cele zrównoważonego rozwoju.

Jakie Są Ograniczenia WebPageTest?

WebPageTest nie jest idealny. W rzeczywistości są dni, kiedy będziesz go nienawidzić.

• Kolejki: Ponieważ korzysta z rzeczywistych urządzeń i jest publicznie dostępny, musisz czekać w kolejce. Jeśli przeprowadzisz test w godzinach szczytu, możesz zobaczyć „Pozycję 100”. Możesz czekać 10 lub 20 minut na wykonanie jednego testu. GTmetrix (w dawnych czasach) był natychmiastowy. WPT… powiedzmy, że uczy cierpliwości.
• Brak „Monitoringu” w darmowej wersji: Nie możesz ustawić WPT, aby automatycznie testował Twoją stronę każdego ranka i wysyłał Ci wyniki e-mailem, chyba że zapłacisz za API lub plan Pro. To narzędzie diagnostyczne, a nie system monitorowania. Jeśli chcesz codzienne wykresy, musisz przeprowadzać testy ręcznie.
• Złożoność wizualna: Nie możesz wysłać linka do WebPageTest nie-technicznemu klientowi i oczekiwać, że go zrozumie. Dla niewprawnego oka wygląda na uszkodzone. Zawsze będziesz musiał interpretować dane dla nich, podczas gdy inne narzędzia produkują raporty PDF, które wyglądają na wystarczająco ładne, aby wystawić za nie fakturę.

Czy Krzywa Uczenia Się Jest Zbyt Stroma Dla Początkujących?

Musimy być szczerzy: WebPageTest jest skomplikowany.

Kiedy po raz pierwszy wchodzisz na stronę główną, wszędzie są rozwijane menu. Strona z wynikami to ściana liczb. Nie ma uśmiechniętej maskotki mówiącej „Dobra robota!”

Jak zacząć bez poczucia przytłoczenia:

1. Zignoruj „Zaawansowane Ustawienia” na początku: Wybierz po prostu swoją lokalizację i przeglądarkę (Chrome jest w porządku).
2. Skup się na podsumowaniu „Web Vitals”: Na górze strony wyników znajduje się widok w kolorach czerwonym/zielonym/żółtym, podobny do tego, do którego jesteś przyzwyczajony. Zacznij stąd.
3. Korzystaj z zakładki „Analiza Obrazu”: Jest wizualna i łatwa do zrozumienia. Pokazuje dokładnie, które obrazy są za duże i ile miejsca można zaoszczędzić. Jeśli zobaczysz tutaj ogromne pliki, wiesz, że musisz zoptymalizować obrazy dla sieci natychmiast.

Dla właściciela małej lub średniej firmy, który nie zna się na technologii, narzędzie to może być zbyt skomplikowane. Jednak dla każdego, kto profesjonalnie zarządza stroną, warto pokonać krzywą uczenia się. Zamieniasz prostotę na dokładność.

Jak Zintegrować WebPageTest Ze Swoim Procesem Pracy

Musimy być realistami co do tego, jak to pasuje do zajętego dnia. Nie możesz czekać 20 minut na wynik testu za każdym razem, gdy zapisujesz plik CSS. To nie jest naprawdę efektywny sposób pracy. Najskuteczniejszym sposobem używania WebPageTest jest traktowanie go jako specjalistycznego narzędzia diagnostycznego, a nie codziennego monitora.

Rozpocznij swoją rutynę od szybkiego narzędzia, takiego jak PageSpeed Insights lub zakładka Lighthouse w narzędziach deweloperskich przeglądarki. Te platformy dają ci natychmiastową ocenę zdawalności. Gdy ta ocena spadnie, lub zobaczysz czerwone ostrzeżenie, którego nie potrafisz wyjaśnić, to jest moment, aby otworzyć WebPageTest.

Nawet mając pełny raport, powstrzymaj się od naprawiania każdego ostrzeżenia. Spójrz na wykres wodospadu i znajdź najdłuższy słupek. Może to być duży obrazek, wolny skrypt zewnętrzny, a może nawet twój serwer.

Większość czasu, naprawienie tylko tej jednej kwestii może być wystarczające, aby rozwiązać twoje problemy. Możesz nawet odkryć, że samo przekonwertowanie plików na nowoczesne formaty obrazów rozwiąże połowę problemu.

Czy Powinieneś Używać WebPageTest?

Nie możemy już mieć „jednego narzędzia do wszystkiego”, ponieważ sieć jest tak skomplikowana. Zamiast tego musisz wybrać narzędzia, które najlepiej pasują do twoich codziennych procesów pracy.

W przypadku WebPageTest:

• Deweloperzy powinni na niego przejść: Możliwość skryptowania procesów logowania, testowania na prawdziwym sprzęcie mobilnym i bezpłatne przeglądanie szczegółowych widoków połączeń sprawia, że jest profesjonalnie lepszy. To jedyny darmowy narzędzie, które dostarcza potrzebne dane do faktycznego rozwiązania problemów, a nie tylko ich identyfikacji.
• Właściciele MŚP mogą używać WebPageTest do waszego kwartalnego „Przeglądu zdrowia”: Ale nie skupiaj się na tym codziennie. Uruchom test, sprawdź Core Web Vitals i wyślij link do swojego programisty, jeśli wyniki będą negatywne. 

Gdy Optymalizacja Nie Wystarcza

Optymalizacja to w ostateczności walka z opóźnieniem — możesz spędzić tygodnie skracając milisekundy swoich skryptów, ale jest tylko jeden sposób na rozwiązanie problemu sprzętowego — przejście na lepszy sprzęt.

Wirtualny serwer prywatny (VPS) zapewnia dedykowaną moc niezbędną do przekształcenia Twojego zoptymalizowanego projektu w szybkie i responsywne doświadczenie. WebPageTest potwierdza jego wartość, dokładnie wskazując, kiedy to infrastruktura ogranicza Cię. Oddziela problemy, które można rozwiązać za pomocą edytora tekstu, od tych, które wymagają lepszej infrastruktury.

To, szczerze mówiąc, jedyny sposób, aby przestać gonić za przypadkowymi liniami w kodzie i dać Twojej stronie silnik, na jaki zasługuje.

Najczęstsze Pytania

Czy WebPageTest.org jest wiarygodny?

Tak, WebPageTest jest powszechnie uważany za jedno z najbardziej niezawodnych narzędzi do oceny wydajności, ponieważ używa prawdziwych przeglądarek na rzeczywistym sprzęcie konsumentów, a nie symulacji. W przeciwieństwie do niektórych narzędzi, które szacują wydajność na podstawie analizy kodu, WebPageTest dokładnie rejestruje co się dzieje, gdy prawdziwa przeglądarka Chrome, Firefox lub Safari ładuje twoją stronę przez rzeczywiste połączenie sieciowe.

Jaka jest różnica między WebPageTest a PageSpeed Insights?

PageSpeed Insights to przede wszystkim narzędzie raportujące, które daje ci wynik „Zaliczono/Nie zaliczono” na podstawie danych z terenu Core Web Vitals Google (CrUX) oraz szybkiego testu laboratoryjnego. WebPageTest to narzędzie diagnostyczne, które dostarcza głębokich danych technicznych (takich jak wykresy wodospadu i widoki połączeń) pomagając wyjaśnić, dlaczego twój wynik jest niski.

Jaki jest dobry wynik Core Web Vitals?

Według wskaźników Google, wynik „Dobry” oznacza, że największe malowanie treści (LCP) wynosi mniej niż 2,5 sekundy, interakcja do następnego malowania (INP) trwa mniej niż 200 milisekund, a kumulacyjne przesunięcie układu (CLS) jest mniejsze niż 0,1. Aby zdać ocenę Core Web Vitals, musisz spełnić te progi dla co najmniej 75% twoich odwiedzających.

Jak często powinienem testować szybkość mojej strony internetowej?

Powinieneś przeprowadzić szybką weryfikację (korzystając z PageSpeed Insights) za każdym razem, gdy publikujesz nowe treści lub aktualizujesz wtyczki. Natomiast głębokie testy diagnostyczne z użyciem WebPageTest należy wykonywać raz w miesiącu lub natychmiast po każdej większej zmianie projektu lub migracji hostingu. Dzięki temu wyłapiesz ukryte regresje wydajności, zanim wpłyną one na Twoje pozycje w rankingach SEO.

Czy WebPageTest jest faktycznie darmowy?

Tak. Plan „Starter” jest darmowy i obejmuje 150 prób testowych miesięcznie, dostęp do rzeczywistych urządzeń mobilnych oraz globalne lokalizacje testów. Oferują płatne plany „Pro” zaczynające się od około 180 dolarów rocznie, które zawierają funkcje takie jak dostęp do API, priorytetowe kolejkowanie i „Eksperymenty bez kodu”, ale darmowa wersja jest więcej niż wystarczająca dla większości programistów i właścicieli stron.