Oj, jak daaaawno nie było tu narzędziowego wpisu! Koniecznie muszę nadrobić tę kategorię na blogu. Dziś porozmawiajmy o niesamowicie praktycznych narzędziach. Ba, wręcz podstawowych! Najbardziej user-friendly design, najbardziej zgodny z dokumentacją kod – bledną, kiedy strona po prostu… nie działa. Nie ładuje się. Lub ładuje się za długo.
Gotowi… do startu… start!
Czas jest ważny. Nie wiem jak Ty, ale ja po prostu wyłączam zakładkę, jeśli ona ładuje się za długo. Czyżby to zboczenie zawodowe? Być może. Choć według Jakoba Nielsena to raczej zjawisko globalne. W swoich artykułach często odwołuje się do 3 podstawowych, niezmiennych limitów:
- 100 milisekund – maksymalny czas, w którym użytkownik odnosi wrażenie, że system reaguje natychmiastowo
- 1 sekunda – maksymalny czas, w którym tok myślenia użytkownika nie zostaje przerwany. Jednocześnie jest to już opóźnienie zauważalne przez użytkownika, traci on poczucie natychmiastowej reakcji systemu. Mimo to korzystanie ze strony nadal można nazwać komfortowym.
- 10 sekund – maksymalny czas, w którym jesteśmy w stanie zatrzymać uwagę użytkownika. Ponoć przeciętny Józek jest w stanie zaakceptować aż 10 sekund opóźnienia! IMHO – to dosyć zawyżony limit Według tego źródła aż 40% użytkowników opuści stronę internetową po 3 sekundach oczekiwania na jej pojawienie się. I to jest liczba, której ja bym się trzymała.
Mam nadzieję, że jesteś już przekonany o tym, jak istotnym tematem jest wydajność strony internetowej. Przejdźmy więc do konkretów.
Panie, Panowie – przedstawiam Wam bardzo subiektywną listę darmowych narzędzi do kompleksowej analizy wydajności strony. Kolejność nieprzypadkowa.
Lista darmowych narzędzi
Przeglądarki
Wiem, że nie spodziewałeś się tego na mojej liście i czujesz się zawiedziony, wręcz oszukany. Niestety, muszę o tym wspomnieć – zarówno Firefox, jak i Chrome posiadają rozbudowane narzędzia developerskie badające stronę pod kątem wydajności. A teraz coś, na co pewnie czekasz…
Lighthouse
Narzędzie, z którego możemy korzystać na różne sposoby:
- za pomocą narzędzi developerskich w Chrome (zakładka Lighthouse)
- za pomocą konsoli instalując globalnie narzędzie
npm install -g lighthouse - w kodzie instalując Lighthouse jako dodatkowy moduł w projekcie
- za pomocą innych narzędzi, które bazują na Lighthouse – m.in. PageSpeed Insights (patrz punkt kolejny) czy https://web.dev/measure/
Oprócz wydajności Lighthouse analizuje również SEO, a11y, PWA, a także sprawdza stronę pod kątem tzw. best practices. Lighthouse opiera się tylko na symulacji, czyli danych syntetycznych.
PageSpeed Insights
Najbardziej popularne narzędzie, do którego zagląda każdy programista w przypadku problemów z wydajnością. Bazuje na powyższym narzędziu Lighthouse, jednak skupia się tylko i wyłącznie na kwestii wydajności strony. Ponadto, w odróżnieniu od Lighthouse, PSI opiera się zarówno na symulacji (lab data), jak i prawdziwym ruchu na stronie (field data).
Oprócz punktowej oceny oraz pomiaru podstawowych wskaźników (FCP, FID, LCP, CLS, TBT, TTI) prezentuje również wskazówki dotyczące tego, w jaki sposób możemy poprawić konkretną stronę.
Narzędzie jest darmowe, choć posiada płatną wersję PageSpeedPlus umożliwiającą m.in. automatyczne testy oraz regularne raporty.
WebPageTest
Potężne narzędzie. Wybieramy przeglądarkę oraz miejsce geograficzne, z którego chcemy testować naszą stronę. Ponadto mamy do wyboru 4 różne tryby analizy: podstawowy, rozszerzony, wizualne porównanie ładowania kilku adresów URL oraz traceroute. Możemy również zapisać film, ustawić typ połączenia, wstrzyknąć dodatkowy kod, podać dane autoryzacyjne, zablokować JavaScript, zablokować wybrane żądania lub domeny… Możemy wszystko.
Rezultatem testu rozszerzonego jest 7 osobnych ocen strony dla różnych kategorii, pomiar podstawowych metryk, szczegółowe pomiary pobrania każdego z zasobów, wykresy, tabelki, nawet graf połączeń z zewnętrznymi serwisami. Mnóstwo danych przedstawionych (w mojej opinii) w bardzo nieprzyjazny dla użytkownika sposób. Narzędzie podaje szczegółową listę wskazówek dotyczących optymalizacji, bazujących głównie na teście opartym na Lighthouse.
Website Performance Audit
Prosty audyt strony pod kątem wydajności – pomiar podstawowych wskaźników, wskazówki optymalizacyjne (również SEO oraz best practices), oś czasu z kolejnymi żądaniami (waterfall), możliwość pobrania plików HAR, kilka grafów. Niby standard, jednak jest coś, co wyróżnia to narzędzie – cała platforma Geekflare, na której je znajdziesz. Otóż Geekflare udostępnia aż 39 różnych narzędzi z obszarów zarówno wydajności, jak i SEO, WordPress, badanie DNS, hostingu, bezpieczeństwa. Znajdziesz tam nawet generator nazwy sprintu! Jak dla mnie ta platforma to złoto w czystej postaci.
Yellow Lab Tools
Narzędzie dostępne tylko online. Daje możliwość podstawowego wyboru urządzenia (desktop / mobile / tablet), ustawienia ciasteczek, podstawowej autoryzacji (bez 2FA), HTTP proxy, zablokowania domen. Narzędzie bardzo szczegółowo analizuje przede wszystkim budowę strony (HTTP, CSS, JS). Prezentuje przejrzystą, bogatą ocenę poszczególnych jej elementów oraz przedstawia trafne, niesamowicie szczegółowe wskazówki optymalizacyjne. Dodatkowo pokazuje uproszczoną oś czasu JavaScript (timeline) oraz pozwala na profilowanie strony. Polecam.
Website Speed Test Image Analysis Tool
Narzędzie, które analizuje tylko obrazki na stronie. Dostarcza szczegółowy raport na temat ich kompresji, formatów, a także szczegółowe wskazówki optymalizacyjne.
nibbler
Ciekawy test, który nie skupia się na cyferkach i tabelkach. Zamiast tego podaje na tacy użytkownikowi konkretne rady, dzięki którym strona będzie nie tylko lepiej działać, ale też lepiej się sprzedawać. Dodatkowo przeprowadza prostą ocenę dostępności, technologii, marketingu, social media, SEO. Warte uwagi.
Pingdom
Niesamowicie popularne (chyba drugie po PSI) narzędzie, czego ja absolutnie nie rozumiem. Generalnie płatne, choć udostępnia za darmo prosty test strony. Na początku podajesz tylko URL oraz miejsce geograficzne (mocno przybliżone, do wyboru masz tylko kilka miejsc na ziemi). Wyniki analizy są skromne, jednak przejrzyste. Polegają głównie na tabelkach z procentowych oznaczeniem czasu pobierania różnych zasobów ze względu na ich typ oraz domenę. Dają jasne spojrzenie na to, w jaki sposób działają żądania na stronie. Pingdom pokazuje również wskazówki optymalizacyjne.
Uptrends
Podobnie jak Pingdom, za darmo udostępnia proste narzędzie analizujące stronę. W miarę rozbudowana konfiguracja – wybór lokalizacji, urządzenia, przeglądarki, typ ekranu (!), rodzaj połączenia internetowego. Ocena oparta na Google PageSpeed, wskazówki optymalizacyjne, liczne grafy obrazujące proces ładowania strony, oś czasu z kolejnymi żądaniami (waterfall).
SpeedTracker
Narzędzie, które mocno bazuje na WebPageTest przedstawiając wyniki analizy w bardziej przejrzysty sposób. Co ciekawe – pozwala na konfigurację regularnych, automatycznych testów. Ponoć dobra alternatywa dla płatnych platform typu Calibre lub SpeedCurve.
SiteSpeed
7 narzędzi do pomiaru i analizy wydajności dostępnych po zainstalowaniu odpowiedniej paczki NPM:
- sitespeed.io – pomiar wydajności
- Coach – wyszukiwanie problemów
- Browsertime – integracja z przeglądarką
- PageXray – konwersja danych HAR do JSON
- Throttle – symulacja wolnych połączeń dla systemów Linux i Mac OS X
- Compare – prezentacja porównań danych HAR
- Chrome-HAR – tworzenie danych HAR na bazie Chrome DevTools Protocol
Site Speed Checker
Podstawowy test szybkości strony. Wyróżnia go możliwość przeprowadzenia kilku (max. 10) różnych testów jednocześnie.
Request Map
Narzędzie online pokazujące graf z zewnętrznymi serwisami, z którymi łączy się analizowana strona. Serwisy zgrabnie podzielone według kategorii: social, CDN, Analytics, Advertising.
Website Speed Test Tool for WordPress
Narzędzie dedykowane głównie dla stron opartych na WordPress. Podstawowe dane dotyczące szybkości, liczne, szczegółowe wskazówki optymalizacyjne.
Pagelocity
Narzędzie do pomiaru podstawowych metryk. Wyróżnia się audytem podzielonym na 3 kategorie: SEO, wydajność oraz jakość kodu. Może komuś się spodoba, choć uprzedzam – analiza jest dosyć powierzchowna. Online, choć istnieje możliwość instalacji wtyczki do Chrome.
GTmetrix
Po zalogowaniu możesz wybrać miejsce geograficzne, przeglądarkę, urządzenie oraz typ połączenia. Domyślnie testujesz na desktopowym Chrome w Vancouver. Analiza GTmetrix pokazuje 2 raporty – jeden oparty na PSI od Google, a drugi na YSlow od Yahoo. Zawierają one tabelę żądań, ogólną ocenę, dopiero po zalogowaniu: film, historię analizy oraz zaawansowane wskaźniki szybkości strony. Bez szału.
mobiReady
Test ukierunkowany na urządzenia mobilne. Dosyć prymitywny, choć przejrzysty.
Bonus
Na końcu zostawiam Ciebie z bonusem. Oto dwie strony zawierające swoje zestawy kilkuset (!) narzędzi do analizy wydajności strony. Mało tego! Znajdziesz tam również odnośniki do artykułów, filmów, prezentacji, książek, kursów, ludzi, podcastów… wszystkiego, co ma jakikolwiek związek z szeroko pojętą wydajnością. Kopalnie wiedzy.
Do zakładek. Koniecznie.
Jeśli znasz inne godne polecenia darmowe narzędzia analizujące wydajność strony – koniecznie podziel się nimi w komentarzu!
