Szybkość strony – jak ją zmierzyć i poprawić

Szybkość działania strony internetowej ma bezpośredni wpływ na wygodę użytkowników. Jeżeli witryna ładuje się zbyt długo, część odwiedzających może zrezygnować jeszcze zanim zobaczy jej zawartość. Problem jest szczególnie widoczny na urządzeniach mobilnych oraz przy wolniejszym połączeniu z internetem.

Dobra wiadomość jest taka, że szybkość strony można stosunkowo łatwo zmierzyć, a wiele najczęstszych problemów da się usunąć bez przebudowy całego serwisu.

Od czego zależy szybkość strony?

Na czas ładowania strony wpływa wiele elementów. Część z nich znajduje się po stronie serwera, a część bezpośrednio w kodzie witryny.

Znaczenie mają między innymi:

• wydajność hostingu,
• czas odpowiedzi serwera,
• wielkość obrazów,
• liczba plików CSS i JavaScript,
• liczba zewnętrznych skryptów,
• sposób działania bazy danych,
• wykorzystanie pamięci podręcznej,
• odległość użytkownika od serwera.

Dlatego dwie strony o podobnym wyglądzie mogą działać zupełnie inaczej. Jedna może pojawić się na ekranie niemal natychmiast, podczas gdy druga będzie potrzebowała kilku sekund na pobranie wszystkich elementów.

Jak zmierzyć szybkość strony?

Najprostszym sposobem jest wykonanie testu za pomocą narzędzia internetowego. Wystarczy podać adres strony, aby otrzymać informacje dotyczące czasu odpowiedzi i szybkości jej działania.

Można wykorzystać do tego https://ping.pl/narzedzia/test-szybkosci-strony, które pozwala szybko sprawdzić szybkość strony.

Warto wykonywać testy kilkukrotnie. Pojedynczy wynik może być zaburzony przez chwilowe obciążenie serwera, sieci albo pamięć podręczną.

Dobrze jest również testować nie tylko stronę główną. W przypadku sklepu internetowego warto sprawdzić między innymi kategorię produktów, kartę produktu i koszyk. Na blogu można przetestować kilka najbardziej rozbudowanych artykułów.

Nie patrz tylko na jeden wynik

Częstym błędem jest sprowadzanie szybkości strony do jednej liczby.

Sam czas pełnego załadowania witryny jest przydatny, ale nie mówi wszystkiego. Dla użytkownika znacznie ważniejsze może być to, kiedy na ekranie pojawi się główna zawartość i kiedy będzie można zacząć korzystać ze strony.

Może się więc zdarzyć, że część dodatkowych skryptów ładuje się jeszcze przez kilka sekund, ale użytkownik już wcześniej widzi stronę i może z niej normalnie korzystać.

Z tego powodu podczas analizy warto zwracać uwagę na kilka parametrów zamiast wyłącznie na całkowity czas ładowania.

Zacznij od optymalizacji obrazów

Obrazy są jedną z najczęstszych przyczyn wolnego działania stron.

Zdjęcie wykonane telefonem może mieć kilka lub nawet kilkanaście megabajtów. Umieszczenie takiego pliku bezpośrednio na stronie oznacza, że przeglądarka użytkownika musi pobrać całość.

Warto więc przed publikacją zmniejszyć zdjęcia do rozdzielczości, która rzeczywiście jest potrzebna. Nie ma sensu wyświetlać obrazu o szerokości 800 pikseli, jeżeli jego plik ma 5000 pikseli.

Pomocne są również nowoczesne formaty, takie jak WebP lub AVIF, które pozwalają znacząco zmniejszyć wielkość plików przy zachowaniu dobrej jakości obrazu.

W przypadku zdjęć znajdujących się niżej na stronie można wykorzystać również lazy loading. Dzięki temu przeglądarka pobiera je dopiero wtedy, gdy użytkownik zbliża się do miejsca, w którym mają zostać wyświetlone.

Ogranicz liczbę skryptów

Kolejnym problemem są pliki JavaScript.

Każdy dodatkowy skrypt musi zostać pobrany, odczytany i wykonany przez przeglądarkę. Szczególnie dużo zasobów mogą zużywać zewnętrzne systemy statystyczne, reklamy, widgety, czaty, mapy czy narzędzia marketingowe.

Warto od czasu do czasu przejrzeć kod strony i sprawdzić, czy wszystkie zewnętrzne skrypty są nadal potrzebne.

Zdarza się, że serwis przez kilka lat gromadzi kolejne integracje, mimo że część z nich od dawna nie jest wykorzystywana.

Usunięcie niepotrzebnych skryptów może poprawić szybkość działania strony bez żadnych zmian widocznych dla użytkownika.

Włącz pamięć podręczną

Cache pozwala przechowywać wcześniej wygenerowane dane, dzięki czemu nie trzeba tworzyć ich od początku przy każdym wejściu użytkownika.

Ma to szczególne znaczenie w przypadku stron korzystających z systemów CMS i baz danych.

Jeżeli strona za każdym razem musi wykonać kilkadziesiąt zapytań do bazy danych i wygenerować całą zawartość, jej odpowiedź może być znacznie wolniejsza niż w przypadku gotowej wersji przechowywanej w pamięci podręcznej.

Mechanizmy cache są dostępne zarówno na poziomie aplikacji, jak i serwera czy sieci CDN.

Sprawdź hosting

Nie zawsze problem znajduje się w samej stronie.

Jeżeli serwer długo odpowiada już na pierwsze żądanie, optymalizacja obrazów czy JavaScriptu nie rozwiąże całego problemu.

Przyczyną może być przeciążony hosting współdzielony, niewystarczające zasoby serwera albo źle skonfigurowane środowisko.

W takiej sytuacji warto porównać wyniki w różnych godzinach. Jeśli rano strona działa szybko, a wieczorem jej czas odpowiedzi wyraźnie się pogarsza, może to wskazywać na problem z obciążeniem infrastruktury.

Wykorzystaj CDN

CDN, czyli Content Delivery Network, pozwala przechowywać kopie statycznych elementów strony w wielu lokalizacjach.

Użytkownik może dzięki temu pobrać obraz, arkusz CSS czy plik JavaScript z serwera znajdującego się bliżej jego lokalizacji.

Rozwiązanie jest szczególnie przydatne w przypadku stron odwiedzanych przez użytkowników z różnych państw, ale może również odciążyć główny serwer.

Zadbaj o bazę danych

W przypadku rozbudowanych serwisów problemem może być również baza danych.

Dotyczy to szczególnie sklepów internetowych, portali oraz stron działających od wielu lat. Z czasem mogą pojawić się w nich niepotrzebne dane, nieoptymalne zapytania albo brakujące indeksy.

Jeżeli wygenerowanie strony trwa kilka sekund jeszcze przed rozpoczęciem przesyłania danych do przeglądarki, warto sprawdzić właśnie warstwę aplikacji i bazy danych.

Czy strona działa szybko przez cały czas?

Jednorazowy pomiar pokazuje tylko sytuację w konkretnym momencie.

Strona może działać prawidłowo podczas testu, a kilka godzin później znacząco zwolnić z powodu większego ruchu, problemów z serwerem albo błędu aplikacji.

Warto więc odróżnić jednorazowe testowanie od stałego monitorowania.

Jeśli chcemy jedynie szybko sprawdzić, czy witryna odpowiada, można wykonać prosty test strony. W przypadku ważniejszych serwisów lepszym rozwiązaniem jest regularny monitoring, który automatycznie wykonuje testy i może wykryć problem bez udziału użytkownika.

Taką funkcję oferuje między innymi Ping.pl, umożliwiający monitorowanie dostępności i działania stron internetowych.

Nie trzeba walczyć o każdą milisekundę

Optymalizacja strony może bardzo łatwo zamienić się w ciągłe poprawianie wyników testów.

Nie zawsze ma to sens.

Jeżeli strona działa szybko, użytkownik nie czeka długo na główną zawartość i nie występują wyraźne problemy z wydajnością, poprawa wyniku o kolejne kilka punktów może nie przynieść zauważalnej różnicy.

Znacznie lepiej zacząć od największych problemów: ogromnych obrazów, wolnego serwera, ciężkich skryptów i braku cache.

Szybkość strony warto sprawdzać regularnie

Strona internetowa zmienia się z czasem. Dodawane są nowe zdjęcia, skrypty, wtyczki, funkcje i integracje. To, że serwis działał szybko pół roku temu, nie oznacza więc, że nadal będzie osiągał podobne wyniki.

Dlatego pomiar szybkości warto powtarzać po większych aktualizacjach oraz okresowo w trakcie działania witryny.

Najlepsze efekty daje połączenie kilku działań: dobrego hostingu, zoptymalizowanych obrazów, rozsądnej liczby skryptów, pamięci podręcznej oraz regularnych testów. Dzięki temu można nie tylko przyspieszyć stronę, ale również szybko zauważyć, kiedy jej wydajność zaczyna się pogarszać.

Materiał zewnętrzny

Źródło grafiki: unsplash.com