Znaczenie wydajności i wyników audytów aplikacji internetowych.

Wydajność strony internetowej jest bardzo ważnym aspektem modernistycznego internetu. Nie tylko ma ona bezpośredni wpływ na to, jak użytkownicy postrzegają daną stronę, ale również ma wpływ na branie jej pod uwagę przez silniki wyszukiwarek internetowych (np. Google). Po przeczytaniu tego wpisu dowiesz się jak ważna jest wydajność aplikacji internetowych w dzisiejszych czasach, jak również zdobędziesz wiedzę, dzięki której będziesz w stanie przeprowadzać i rozumieć podstawowe audyty (wydajnościowe i ogólne) stron internetowych.

W dzisiejszych czasach duża część twórców stron internetowych nie zastanawia się nad wydajnością ich projektu - zostanie zupełnie pominięta dopóki klient nie wyrazi takiej potrzeby. Stwierdzenie to stawia obecne standardy tworzenia stron internetowych w złym świetle, lecz po testowaniu przez nas dziennie około 30 stron internetowych niestety stwierdzenie to okazuje się prawdziwe. Duży wpływ na takie standardy ma popularność kreatorów stron internetowych typu WordPress lub Joomla, które z założenia ograniczają możliwości twórcy gwarantując łatwe integracje, szybkość tworzenia i prostotę tworzenia aplikacji, przy której wystarczy znać podstawy HTML/CSS/JS aby tworzyć strony, które można sprzedawać. Agencje, freelancerzy i inni twórcy stron internetowych, którzy myślą o wydajności zanim pomyśli o niej klient tworzą produkty końcowe bardzo wysokiej jakości, ponieważ konsekwentne osiąganie wysokich wyników z audytów ogólnych, jak i wydajnościowych wymaga zaawansowanej wiedzy technicznej i umiejętności praktycznego zastosowania danej wiedzy w kodzie aplikacji.

Wydajność ma znaczenie

W dzisiejszych czasach nasze urządzenia mobilne są szybkie i jesteśmy przyzwyczajeni do tego, że dają nam natychmiastowe odpowiedzi na nasze wyszukiwania, a kiedy zaczynają działać wolno zaczynamy się frustrować.

Ten fakt bezpośrednio przekłada się na dziedzinę tworzenia stron internetowych - odwiedzający strony oczekują szybkiego ładowania, interaktywności oraz bezproblemowego korzystania z sieci. Jeśli oczekiwania odwiedzających nie zostaną sprostane większośc z nich opuści stronę i zrezygnuje z oczekujących transakcji (jakiegokolwiek rodzaju).

“Według badania przeprowadzonego przez Google większość użytkowników mobilnych opuści stronę, jeśli ta będzie ładować się dłużej niż 3 sekundy, a połowa użytkowników mobilnych oczekuje, że strona załaduje się w mniej niż 2 sekundy. Google podkreśla znaczenie szybkości ładowania stron wraz z wydaniem Core Web Vitals. Kod strony może poważnie wpłynąć na czas jej ładowania.”

Wizualizujemy jak ważna jest wydajność i jak wpływa na dalsze interakcję ze stroną rzucając okiem na kilka statystyk z sieci:

• 64% użytkowników smartfonów oczekuje, że strona załaduje się w mniej niż w 4 sekundy.
• 85% użytkowników mobilnych oczekuje, że strona załaduje się w takim samym tempie lub szybciej niż na komputerze.
• W przypadku negatywnych doświadczeń związanych z zakupami online 43% użytkowników przejdzie do witryny konkurencji.
• Tylko 18% ze 100 najlepszych witryn ma TTI (czas interakcji) wynoszący 3 sekundy lub mniej.
• 51% kupujących online w USA twierdzi, że powolność witryny jest głównym powodem rezygnacji z zakupów.

Jak widać oczekiwania użytkowników są wysokie (takie jak być powinny), a ich złe doświadczenia wynikają głównie z problemów z wydajnością w różnych odmianach stron internetowych.

Kiedy użytkownik nie jest zadowolony ranking strony spada. Rankingi stron w wynikach wyszukiwania mają ogromne znaczenie dla każdej witryny, która stara się zostać zauważona - gwarantują użytkownikom możliwość znalezienia Twojej witryny poprzez wpisanie kluczowych słów w pasku wyszukiwania. Ze słabą wydajnością wiąże się niski ruch organiczny (ze względu na fakt, że nawet jeśli użytkownik natknie się na witrynę najprawdopodobniej zakończy połączenie, zanim cokolwiek zacznie się pojawiać na jego ekranie - pomyśl tylko, czy kiedykolwiek kliknąłeś link Google, a następnie zamknąłeś kartę, ponieważ nic nie zaczęło się pojawiać w ciągu pierwszych kilku sekund?), a ponadto większość Twoich dotychczasowych użytkowników nie wróci na stronę z uśmiechem na twarzy, prędzej będą zniechęceni przed wejściem na stronę, którą zapamiętali jako wolną, nie reagującą, jednym słowem nieprzyjemną.

Wyjaśnienie pomiarów wydajności i audtyów ogólnych

Istnieje wiele narzędzi, za pomocą których możemy zmierzyć wydajność lub przeprowadzić audyt konkretnej strony internetowej.

Do pełnego audytu strony użyjemy PageSpeed Insights (narzędzia stworzonego przez Google obejmującego najważniejsze aspekty witryny), ale niestety to narzędzie nie jest najlepsze jeśli chodzi o dokładnie wyniki wydajności, więc aby lepiej zrozumieć wydajność naszych stron użyjemy GTmetrix.

Jeżeli nie masz wiedzy technicznej nic straconego - wszystkie detale zostaną omówione.

W celu porównania wydajności naszych stron ze zwykłą wydajnością stron internetowych przeprowadzimy audyt przy użyciu Google Lighthouse oraz GTmetrix na przypadkowej stronie znalezionej w wyszukiwarce Google ( “Dentysta Berlin” po czym wybraliśmy pierwszą opcję wyświetloną przez Google - https://dentistberlinvt.com/), a po tym porównamy ją z naszą stroną - zobaczycie jak duża jest różnica między naszymi projektami, a obecnymi standardami internetowymi.

PageSpeed Insights daje nam dwie wersje audytu w tym samym czasie - jeden z nich to symulacja audytu mobilnego, a drugi komputerowego.

Audyt mobilny:

Audyt komputerowy:

Jak widać są dwie kategorie metryk zapewnione przez narzędzie PageSpeed Insights - koła na górze audytu oraz metryki wydajności na dole. Jeśli przyjrzymy się tym wynikom zobaczymy, że jedyna zauważalna różnica to metryka wydajności - takie zachowanie będzie zbliżone do większości stron audytowych ze względu na dostępność, najlepsze praktyki oraz SEO posiadające podobne metryki na wszystkich urządzeniach.

Zagłębmy się w znaczenie tych statystyk.

Audyt wydajności bierze pod uwagę różne zmienne, takie jak First Contentful Paint, czas interakcji, indeks szybkości i kilka innych (co wyjaśnimy dokładnie po ukazaniu audytu wydajności GTmetrix), a następnie oblicza wynik na podstawie wszystkich zmiennych.

Performance - audyt wydajności zwraca uwagę na możliwość poprawy prędkości Twojej strony internetowej. Obejmuje to osoby z wolnymi łączami lub bardzo małymi ekranami.

Accessibility - (dostępność) audyt ten pokazuje możliwości poprawy dostępności Twojej aplikacji internetowej. Ta kategoria obejmuje nie tylko osoby niepełnosprawne, ale również użytkowników z powolnymi urządzeniami.

Best Practices - (najlepsze praktyki) sprawdzają, czy twórca aplikacji upewnił się, że błędy zostały usunięte, a także sprawdza typowe błędy User Experience (UX) takie jak niska rozdzielczość obrazu.

SEO to skrót od Search Engine Optimatization (Optymalizacja wyszukiwarki internetowej), a audyt sprawdza czy strona jest ogólnie gotowa do wyświetlenia (prawidłowo) w wynikach wyszukiwania. Nie jest to pełny audyt SEO, ale jest świetnym początkiem dla każdej strony internetowej.

Po omówieniu czterech głównych kategorii audytów stron internetowych możemy przejść do szczegółowego przyjrzenia się metrykom, które razem składają się na wynik wydajności. Aby dobrze zwizualizować audyt wykonania zadań i jego metryk wykorzystamy narzędzie do audytu GTmetrix.

TTFB (Time To First Byte - czas do pierwszego bajtu) - ilość czasu jaki upłynął między żądaniem wyświetlenia strony przez użytkownika, a pierwszym bajtem zwróconym użytkownikowi serwera.

FCP (First Contentful Paint - pierwsze wyrenderowane treści) - jak szybko zawartość taka jak tekst lub obrazy pokazuje się w widocznym dla użytkownika obrazie. Metryka FCP mówi nam ile czasu upłynęło od żądania wyświetlenia strony do rozpoczęcia procesu renderowania.

TTI (Time To Interactive - czas do interaktywności) - ilość czasu potrzebna, aby strona stała się w pełni interaktywna (nie oznacza to, że wszystkie elementy interaktywne są już widoczne).

LCP (Largest Contentful Paint - największa renderowana treść) - to czas jaki upłynął między żądaniem wyświetlenia strony, a momentem, w którym cała zawartość jest w pełni wyrenderowana w widocznym dla użytkownika obszarze.

Onload time (czas załadowania) - ma miejsce gdy przetwarzanie strony jest zakończone i wszystkie zasoby na stronie (obrazy, CSS itp.) zostały załadowane(artykuł GTmetrix).

Fully loaded time (czas pełnego załadowania) - ta metryka ma miejsce gdy wszystkie zadania związane z pobieraniem i renderowaniem witryny zostaną zakończone, a procesor i urządzenie sieciowe zostaną uwolnione od procesu przeglądarki. Gdy spojrzymy na audyt PageSpeed Insights, zauważymy, że w sekcji wydajności jest kilka różnych metryk. Aby lepiej je poznać kliknij tekst “Rozwiń widok” w prawym górnym rogu siatki metryk.

Wynik tej strony jest przyzwoity, chociaż jest wiele miejsca na poprawę. Nie będziemy wchodzić w szczegóły techniczne optymalizacji strony internetowej, ponieważ różni się to w zależności od technologii użytej do zbudowania witryny. Zamiast tego pokażemy Ci wynik naszego audytu.

Nasze wyniki

Poniżej zamieszczone są zdjęcia audytów w następującej kolejności: PageSpeed mobilny, PageSpeed komputerowy, GTmetrix.

Jak widać - nasz wynik jest prawie idealny. Nasza witryna ładuje 10 razy szybciej niż losowo wybrana witryna do porównania, a ponadto nasza strona jest w pełni załadowana zanim jakiekolwiek elementy zaczną się pojawiać na porównywanej stronie.

Brakuje nam tylko perfekcji w wydajności na urządzeniach mobilnych - jest to spowodowane tym, że niektóre skrypty innych firm potrzebują dużo czasu, aby odpowiedzieć na ograniczone połączenie (tak, PageSpeed Insights ogranicza połączenie mobilne, aby symulować wydajność na raczej wolnym urządzeniu. Nasza wydajność na nowoczesnym telefonie z LTE/5G lub połączeniem Wi-Fi byłaby powyżej 90).

Zachęcamy do testowania i porównania dowolnej witryny za pomocą narzędzi PageSpeed oraz GTmetrix. Po przetestowaniu kilku witryn dowiesz się, jak rzadko osiągane są wyniki wydajności i audytu na poziomie takim jak nasz (spoiler: to tylko około 5% najlepszych witryn na całym świecie).

Jak możesz osiągnąć takie wyniki?

Upewnij się, że wybierasz programistę, który może wykazać się świetnymi wynikami. Jak wspomniano na początku tego posta - wielu programistów nie dba o wydajność, o ile klient jest zadowolony wizualnie i funkcjonalnie ze strony (duży błąd), więc jeśli będziesz otrzymywać pomoc od programisty, który pracuje głównie z kreatorami stron internetowych (np. WordPress, Joomla itp.) powinieneś wiedzieć, że mają związane ręce jeśli chodzi o edycję niektórych fragmentów kodów i w wielu przypadkach nie mogą przekroczyć pewnego wyniku.

Zawsze możesz skontaktować się z nami, a my zrealizujemy Twój mały, średni lub duży projekt! Z nami zawsze uzyskasz najlepszą wydajność, optymalizację, wyniki audytu i nowoczesną technologię.