Szybkie ładowanie stron – testuj jest to przegląd różnych narzędzi dostępnych dla testerów by sprawdzić wiele aspektów aplikacji webowej. Zaprezentujemy różnego rodzaju aplikacje, które pozwolą monitorować szybkość ładowania naszych aplikacji i wychwytywać słabe punkty.
Ogólne
Jak wspomnieliśmy na wstępie szybkość ładowania stron jest kwestią bardzo ważną z wielu względów. Uzyskując wysoką szybkość ładowania i dobrą ilość punktów, pozwala to nam pozycjonować naszą stronę wysoko. Dodatkowo, użytkownicy będą chętniej powracali na naszą stronę, gdy ładuje się ona na odpowiednim dla nich poziomie. Ciągły wzrost korzystania z urządzeń mobilnych wymusza też na nas zapewnienie szybkiego ładowania stron w różnych warunkach. W jednym z naszym wpisów poruszyliśmy już tematykę Speedcurve – płatnego narzędzia do przeprowadzania takich testów.
GTmetrix
Aplikacja dostępna pod adresem https://gtmetrix.com/. Narzędzie jest dostępne w wersji bezpłatnej, która umożliwia nam sprawdzanie wskazanego adresu URL. W przypadku wielu sprawdzanych linków przez innych użytkowników, zdarza się, że musimy zaczekać w kolejce by narzędzie wykonało nasz request. GTmetrix posiada też wersję PRO umożliwiającą w zależności od pakietu stałe monitorowanie adresów url i wiele różnych opcji szczegółowo opisanych na stronie.
Strona przedstawia nam nasz wynik:
To pozwala nam ogólnikowo zorientować się jak szybko ładuje się nasza strona. Oczywiście strona dostarcza nam też wiele elementów, które w sposób bardziej szczegółowy pozwolą nam skupić się na dopracowaniu i przyśpieszeniu naszej domeny.
Jak widzimy na powyższym screenie, otrzymujemy rekomendacje jak są oceniane poszczególne elementy. Klikając w strzałkę otrzymujemy szczegółowe informacje na temat elementów do poprawy.
YSlow wskazuje nam inne elementy które powodują że nasza strona nie ładuje się tak szybko jak tego oczekujemy
Waterfall Chart to przedstawienie w jaki sposób na przestrzeni czasu były ładowane poszczególne elementy na naszej stronie. Możemy filtrować elementy – ALL, HTML, CSS, JS, XHR, Fonts, Images i Others.
Zarejestrowani użytkownicy mają dostęp do sekcji Timings i Video. W Timings będziemy mogli sprawdzić elementy jak TTFB, DOM interactive, First paint, RUM Speed Index.
WebPageTest
Druga ze przedstawionych aplikacji to WebPageTest. W ramach tego narzędzia możemy zweryfikować kilka ważnych elementów naszej strony. Jak widzimy na początku możemy standardowo podać adres url, a także wybrać lokalizację i przeglądarkę. W ramach naszego testu aplikacja webowa jest uruchamiana trzykrotnie abyśmy mogli porównać wyniki. Po uruchomieniu testów otrzymasz rezultaty, które możesz poddać pod weryfikację i by byłą możliwość usprawnienia naszej aplikacji.
Jak możecie zauważyć mamy podsumowanie testu, szczegóły przeprowadzonego badania, następnie ważna dla wszystkich Web Vitals, czy Performance strony. Dla celów weryfikacyjnych mamy też możliwość ładowania contentu, sprawdzenia zrzutu ekranu, czy analizy obrazków.
W ramach korzystania z aplikacji możemy wykorzystać wystawione API (opcja płatna – 15 usd/m) – która daje możliwość wykonania 1000 testów miesięcznie. Dla użytkowników jest również stworzone forum, a także blog na którym znajdują się ciekawe informacje jak skorzystać z aplikacji i poszerzyć ich możliwości.
Google Pagespeed Insights
Narzędzie Googla, które jest bardzo ważne – jeżeli chcemy uzyskiwać jak najwyższe wyniki w ocenie naszej aplikacji webowej przez korporację Google. Link do narzędzia.
Po wpisaniu adresu url i chwili czasu otrzymujemy analizę naszej aplikacji przez Google. Analiza jest podzielona na dwa rodzaje odbioru witryn – mobile i desktop.
Narzędzie ocenia naszą stronę a następnie podaje szczegółowe informacje co możemy poprawić w działaniu naszej strony. Powyżej mamy przykład rezultatu naszej witryny. Dalej możemy przejść do różnych uwag i podpowiedzi by polepszyć scoring czy wydajność działania aplikacji. Żeby nie tylko wytykać uwagi, aplikacja przedstawia nam też audytu które przeszliśmy pomyślnie. Na samym dole aplikacji jesteśmy informowani, że wynik oparty na danych laboratoryjnych z Lighthouse.
Dla osób chcących poznać lepiej aplikację, jak zawsze Google wyposaża nas w dokumentację, dzięki której możemy sprawniej korzystać z narzędzia.
Lighthouse
W nawiązaniu do poprzedniej aplikacji, płynnie przejdziemy do Lighthouse. Jest to narzędzie typu open source do weryfikacji szybkości ładowania stron. Można go uruchomić z poziomu przeglądarki by zweryfikować dane jak wydajność, czy SEO. Więcej informacji o narzędziu przedstawiono na filmie:
Aby uruchomić narzędzie, należy udać się do Narzędzi Developerskich i wybrać zakładkę Lighthouse. Następnie będąc na żądanej witrynie kliknij przycisk Generate report by uzyskać informację z narzędzia. W przeciwieństwie do poprzedniej aplikacji jednorazowo możemy wybrać czy raport jest generowany dla mobile czy desktopa. Następnie po uruchomieniu testu otrzymamy raport taki jak na stronie Google Pagespeed Insights. Wyniki raportu możemy pobrać w formie JSONa, HTMLa.
Speedcurve
Na temat Speedcurve napisaliśmy dość duży artykuł jakiś czas temu. Jest to narzędzie komercyjne i jeżeli jesteście zainteresowani skorzystania z tego narzędzia zapraszam Was do lektury.
Podsumowanie
Szybkie ładowanie stron – testuj to wpis pokazujący alternatywę dla aplikacji typu Speedcurve. Każdy pracując przy aplikacjach webowych chciałby by aplikacja była szybka, bezpieczna i niezawodna, stąd też konieczność weryfikowania jak nasza strona prezentuje się na tle konkurencji. O innych narzędziach godnych uwagi, szerzej piszemy w niniejszym dziale. Jeżeli będziecie chcieli, możemy poszczególne aplikacje rozbić na osobne artykuły i poświęcić więcej czasu na ich przedstawienie.
