Redakcja
W tym artykule przedstawimy metryki wydajności oprogramowania w relacji do innych aspektów jakościowych, jak np. UX czy użyteczność oraz w odniesieniu do wskaźników biznesowych, jak np. SEO. Zaczniemy od przedstawienia tych metryk, a później pokażemy, jakie mają one przełożenie na doświadczenie naszych użytkowników ze stroną internetową.
Istnieje kilka rodzajów danych, które zbieramy i przetwarzamy, aby analizować wydajność stron:
- prędkość ładowania - jak szybko strona może wczytać się i wyrenderować na ekranie wszystkie swoje elementy wizualne?
- responsywność - jak szybko strona może wczytywać i wykonywać kod JavaScript niezbędny do szybkiego reagowania przez komponenty na interakcję użytkownika?
- reagowanie w czasie użycia - jak szybko po załadowaniu strony strona może reagować na interakcję użytkownika?
- stabilność wizualna - czy elementy na stronie przesuwają się w sposób, którego nie spodziewają się użytkownicy, co może zakłócać ich interakcje?
- płynność - czy przejścia i animacje renderują się ze stałą liczbą klatek i płynnie przechodzą z jednego stanu do drugiego?
Biorąc pod uwagę wszystkie te rodzaje danych o wydajności, można by się spodziewać, że żaden pojedynczy wskaźnik nie wystarcza do uchwycenia wszystkich parametrów wydajności strony. Dlatego też web.dev, który uchodzi za standard w tym obszarze, promuje określony zbiór metryk, o których za chwilę.
W testerzy.pl mocno dbamy o wydajność i wysokie parametry wyszukiwarkowe, dlatego regularnie monitorujemy naszą ocenę za zgodność ze wskaźnikami internetowymi. Od wielu lat nie jest dla nas wystarczające zwykłe „zaliczone”; cały czas śrubujemy wyniki, próbując uzyskać możliwie najlepsze parametry.
Jeśli chcesz dokonać własnej analizy, wystarczy wejść na https://pagespeed.web.dev i sprawdzić ocenę własnej witryny. Tak wyniki wyglądają dla strony testerzy.pl:
Ale co znaczą poszczególne metryki i jakie mają znaczenie dla użytkowników? Tłumaczymy.
Largest Contentful Paint (LCP)
Czas załadowania głównej (zazwyczaj największej) zawartości witryny wyznacza moment, w którym użytkownik doświadcza przekonania, że strona „narysowała” się w całości i może wejść z nią w interakcję. Jest to najważniejsza metryka wydajności w połączeniu z użytecznością. Spełnienie jej wytycznych nie tylko daje użytkownikowi poczucie akceptowalnego czasu załadowania się strony, ale jednocześnie pozwala mu wykonać na niej pierwsze działania. Parametr ten jest optymalny, gdy nie przekracza 2,5 sekundy, ale czym bliżej zera, tym oczywiście lepiej.
Tutaj mamy przykład od FCP (omówiony dalej) oraz LCP:
First Contentful Paint (FCP)
Czas po którym użytkownik zobaczy pierwszy załadowany element strony. Metryka ta nie ma większego znaczenia dla samj efektywności ładowania się strony, ale ma wpływ na UX. Gdy czas ten jest krótki, użytkownik dostaje na ekranie potwierdzenie, że „coś” się dzieje, czyli widzi, że elementy są ładowane. Dzięki temu nie odświeża strony i nie ma przekonania, że „coś się zawiesiło”.
Dobre FCP powinno wynosić poniżej 1,8 sekundy.
Interaction to Next Paint (INP)
Kolejna metryka jest kluczowa dla UX, ponieważ pokazuje czasy odpowiedzi na działania użytkownika.
Dobra responsywność oznacza, że strona szybko reaguje na interakcje. Gdy strona reaguje na interakcję, przeglądarka wyświetla wizualną informację zwrotną w następnej renderowanej ramce, aby pokazać, że interakcja zakończyła się pomyślnie. Może na przykład przekazać informację zwrotną na temat następujących kwestii:
- czy przedmiot dodawany do koszyka online jest rzeczywiście dodawany
- czy zostało otwarte menu nawigacji mobilnej
- czy zawartość pola login jest uwierzytelniana przez serwer.
Niektóre interakcje trwają naturalnie dłużej niż inne, ale w przypadku szczególnie złożonych interakcji ważne jest szybkie przedstawienie wstępnej wizualnej informacji zwrotnej, aby poinformować użytkownika, że coś się dzieje. Dlatego też intencją INP jest zmierzenie nie wszystkich ostatecznych efektów interakcji (takich jak pobranie sieci i aktualizacje interfejsu użytkownika z innych operacji asynchronicznych), ale czasu, w którym następuje zablokowanie kolejnego malowania. Opóźniając informację wizualną, sprawiasz, że użytkownicy myślą, że strona nie reaguje na ich działania.
Dobre INP wynosi do 200 milisekund.
First Input Delay (FID)
FID mierzy czas od pierwszej interakcji użytkownika ze stroną (tzn. kliknięcia łącza, dotknięcia przycisku lub użycia niestandardowej kontrolki opartej na JavaScript) do momentu, w którym przeglądarka faktycznie może rozpocząć przetwarzanie procedury obsługi zdarzeń w odpowiedzi na tę interakcję.
Wszyscy wiemy, jak ważne jest, aby zrobić dobre pierwsze wrażenie. Jest to ważne podczas poznawania nowych ludzi, ale jest również ważne podczas budowania doświadczeń w sieci. W Internecie dobre pierwsze wrażenie może zadecydować o tym, czy ktoś zostanie lojalnym użytkownikiem, czy też opuści witrynę i nigdy nie wróci. Chociaż trudno jest zmierzyć, jak bardzo użytkownikom podoba się projekt witryny za pomocą internetowych interfejsów API, pomiar jej szybkości i responsywności już nie! Pierwsze wrażenie użytkowników na temat szybkości ładowania witryny mierzone jest za pomocą First Contentful Paint (FCP).
Aby FID było spełnione, musi znajdować się w czasie do 100 milisekund.
Cumulative Layout Shift (CLS)
Wskaźnik służący do pomiaru stabilności wizualnej, który pomaga określić, jak często użytkownicy doświadczają nieoczekiwanych zmian układu strony. Niski CLS pomaga zapewnić, że strona będzie przyjazna w rozumieniu UX. Nieoczekiwane zmiany układu mogą zakłócać wygodę użytkownika na wiele sposobów, od spowodowania niezrozumienia utraty miejsca podczas czytania w przypadku nagłego przesunięcia tekstu, po kliknięcie niewłaściwego łącza lub przycisku. W niektórych przypadkach może to spowodować poważne problemy.
Nieoczekiwany ruch zawartości strony zwykle ma miejsce, gdy zasoby ładują się asynchronicznie lub elementy DOM są dynamicznie dodawane do strony przed istniejącą treścią. Przyczyną ruchu może być obraz lub film o nieznanych wymiarach, czcionka, która jest większa lub mniejsza niż jej wersja zastępcza, albo reklama lub widżet innej firmy, który dynamicznie zmienia swój rozmiar.
CLS poniżej 0,1 traktowany jest jako akceptowalny
Time to First Byte (TTFB)
Czas do pierwszego bajtu (TTFB) to podstawowy wskaźnik służący do pomiaru czasu konfiguracji połączenia i responsywności serwera WWW. Mierzy czas pomiędzy żądaniem zasobu a momentem nadejścia pierwszego bajtu odpowiedzi. Dzięki temu pomaga identyfikować, kiedy serwer WWW jest zbyt wolny, aby odpowiadać na żądania. W przypadku żądań nawigacji — czyli żądań dokumentu HTML — poprzedza on każdą inną znaczącą metrykę wydajności ładowania. Metryka ta nie ma za wiele do użyteczności ani UX ponieważ odbywa się w obszarze niewidocznym dla końcowego użytkownika.
Pożądaną wartością dla TTFB jest czas poniżej 800 milisekund.
Jeszcze jeden wskaźnik - Total Blocking Time (TBT)
TBT jest ważnym wskaźnikiem laboratoryjnym służącym do pomiaru responsywności wczytywania, ponieważ pozwala określić, jak bardzo nieinteraktywna jest strona, zanim staje się ona używalna. Nie ma jej na głównej liście PageSpeed, ale często spotkacie się z nią w szczegółowym opisie. Niska wartość TBT pomaga zapewnić, że strona będzie użyteczna. Łączny czas blokowania (TBT) to łączny czas po pierwszym wyrenderowaniu treści (FCP), w którym wątek główny był zablokowany na tyle długo, że nie pozwalało to na reagowanie na dane wejściowe użytkownika.
Renderowanie
Bardzo ważnym aspektem, o którym również należy wspomnieć jest to, jak strona jest ładowana do przeglądarki. Pozwala nam to lepiej zrozumieć relacje między kosztami utrzymania strony, wydajnością, UX i SEO. Proces renderowania, wykonywany przez przeglądarkę proces zmienia kod w stronę internetową, z którą użytkownicy mogą wchodzić w interakcję. Aby lepiej zrozumieć poszczególne metody renderowania, które wybieramy podczas budowania rozwiązania, potrzebujemy zrozumienia każdego z podejść. Różnice między metodami renderowania pomagają zilustrować kompromisy związane z renderowaniem z perspektywy wydajności stron. Dla potrzeb tego artykułu pokażemy tylko dwie podstawowe metody, pomijając koncept pośredni (mieszany), nazywany nawadnianiem.
Renderowanie po stronie serwera (SSR), renderowanie aplikacji po stronie klienta lub aplikacji uniwersalnej na kod HTML na serwerze.
Wprowadzona tu metryka Time to Interactive (TTI) to kolejny ze wskaźników, które Google bierze pod uwagę oceniając prędkość działania strony oraz jej ukierunkowanie na użytkownika. Czas uzyskania interaktywności pomaga zidentyfikować sytuacje, w których strona wygląda na interaktywną, ale w rzeczywistości nią nie jest. Szybki TTI jest metryką laboratoryjną i nie mierzy więc doświadczeń użytkowników, którzy odwiedzają analizowaną stronę.
Powoduje:
- szybkie FCP oraz niższe INP, ale większą liczbę TTFB
- wysokie koszty serwerowe dla właściciela serwera
- bardziej optymalne rozwiązanie dla wyszukiwarek, duże SEO
- może powodować opóźnienia w ładowaniu się witryny po stronie użytkownika czyli obniża UX.
Renderowanie po stronie klienta - renderowanie aplikacji w przeglądarce z wykorzystaniem JavaScriptu do modyfikacji DOM.
Co otrzymujemy:
- szybki FCP i niższą wartość INP przy niewielkiej wadze plików JS
- przerzucenie odpowiedzialności za ładowanie strony na użytkownika oznacza niższe koszty serwerowe
- gorsza ocena SEO ze względu na to, że aby strona została przeanalizowana przez crawlera musi być przetworzona po jego stronie
- szybsze ładowanie się witryny.
Podsumowanie
Wydajność strony to zbiór wielu parametrów, które musimy wziąć pod uwagę. Dla użytkownika wydajność to szybkość interakcji i jego UX, a dla właściciela strony to SEO oraz koszty serwerowe. Te interesy możemy pogodzić osiągając akceptowalne wyniki w takich narzędziach jak PageSpeed, ale wymaga to dogłębnej analizy i podjęcia decyzji odnośnie metod renderowania.
