Co wpływa na szybkość działania strony? Jak ją poprawić

Czym jest Page Speed?

Szybkość ładowania witryny (ang. Page Speed) to czas, którego strona potrzebuje, aby wyświetlić użytkownikowi swoją całą zawartość — teksty, zdjęcia, formularze, banery reklamowe itp. Pozornie wydaje się to proste, ale dla lepszej identyfikacji możliwych problemów warto poznać cały proces trochę bliżej. Pełny proces ładowania strony przy pierwszej wizycie użytkownika wygląda następująco:

• Wysłanie zapytania DNS według nazwy witryny,
• Połączenie z serwerem przez IP (TCP-connect),
• Ustanowienie bezpiecznego połączenia podczas korzystania z protokołu HTTPS (połączenie TLS),
• Żądanie strony HTML według adresu URL i oczekiwanie na serwer (żądanie HTTP),
• Pobieranie HTML,
• Parsowanie dokumentu HTML po stronie przeglądarki, budowanie kolejki żądań w zasobach dokumentu,
• Ładowanie i parsowanie stylów CSS,
• Ładowanie i wykonywanie kodu JS,
• Rozpoczęcie renderowania strony, wykonanie kodu JS,
• Pobieranie czcionek internetowych,
• Ładowanie obrazów i innych elementów,
• Zakończenie renderowania strony, wykonanie opóźnionego kodu JS.

W całym procesie niektóre punkty realizowane są równocześnie, a niektóre mogą zmieniać kolejność, jednak ich istota pozostaje taka sama. W przypadku wystąpienia problemów ze stroną konieczna będzie jej optymalizacja.

Etapami od 1 do 4 włącznie zajmuje się optymalizacja serwerowa. Z kolei działania od 5 do 12 to optymalizacja pod klienta. Czas spędzony na każdym z tych etapów jest indywidualny dla każdej witryny, dlatego konieczne jest przeprowadzenie analizy stanu jej danych i zidentyfikowanie głównego źródła problemów.

Jaka prędkość ładowania strony jest dobra?

Szybkość ładowania strony zależy od wielu czynników, w tym od jakości połączenia internetowego po stronie użytkownika, rodzaju i ustawień przeglądarki, typu urządzenia. Jednak biorąc pod uwagę najbardziej uśrednione wskaźniki, szybkość powinna wynosić od 2 do 4 sekund — tego oczekuje ponad 60% użytkowników. Dopuszczalne jest niewielkie opóźnienie w granicach 5 czy 7 sekund, ale gdy zawartość ładuje się dłużej niż 10 sekund, trzeba przyjrzeć się tej kwestii bliżej. Musisz podjąć działania.

Dlaczego Speed Page jest ważna?

Powolna strona ma wyższy współczynnik odrzuceń, co utrudnia pozycjonowanie, a nawet może znacznie obniżyć pozycję witryny w wynikach wyszukiwania. Badania pokazują, że jeśli prędkość ładowania jest większa niż 3 sekundy, to 53% użytkowników nie będzie czekać na jej zakończenie i po prostu opuści stronę. Co więcej, w przypadku wersji mobilnych każda dodatkowa sekunda pogarsza konwersję o 20%.

Jak zmierzyć szybkość ładowania strony?

Najważniejsze wskaźniki

Sprawdzając Page Speed, trzeba zwrócić uwagę na kilka głównych wskaźników:

• Czas do pierwszego bajtu (TTFB — time to first byte) to czas od rozpoczęcia procesu pobierania do otrzymania pierwszej porcji danych z serwera. Jest to podstawowa miara optymalizacji serwera;
• Początek renderowania strony (start render, first paint). Wskaźnik ten pokazuje czas do zniknięcia „białego ekranu” w przeglądarce, gdy rozpoczyna się wczytywanie strony;
• Otwieranie podstawowych elementów strony (load time). Obejmuje to ładowanie wszystkich elementów niezbędnych do pracy ze stroną. Po ich wczytaniu ikonka ładowania przestaje się obracać;
• Pełne wyświetlanie strony, czyli czas załadowania wszystkich głównych i odroczonych elementów;

Te podstawowe dane są mierzone w sekundach. Pomocne jest również oszacowanie natężenia ruchu dla trzeciej i czwartej wartości — pozwala to ocenić wpływ prędkości połączenia na czas pobierania.

Core Web Vitals — co to jest?

Google stopniowo zwiększa znaczenie prędkości ładowania strony jako czynnika rankingowego. Od 2010 r. jest oceniany dla witryn na komputerach, w 2018 r. został włączony do oceny witryn mobilnych, a w maju 2021 r. wprowadzono nową grupę czynników – Core Web Vitals. To cała grupa wskaźników i komponentów, na podstawie których Google ocenia żywotność i użyteczność witryn dla użytkownika. W ramach Page Speed najbardziej interesują nas trzy z nich:

• Renderowanie głównej zawartości (Largest Contentful Paint, LCP) – czas, w którym największy element jest wczytywany na widocznej części strony, np. blok tekstu, wideo lub duży obraz. Warto pamiętać, że ten element może być inny w zależności od wykorzystywanego do przeglądania stron urządzenia. Ponadto użytkownik może przejść do twojej witryny za pomocą linku kotwiczącego i nie dostać się na początek strony, ale na jedną z podstron. W każdej z tych sytuacji będzie inna prędkość pobierania. Idealny wskaźnik LCP wynosi do 2,5 sekundy.
• Opóźnienie pierwszego wejścia (First Input Delay, FID) to czas od pierwszej próby interakcji użytkownika z witryną do momentu, w którym interfejs witryny jest w stanie obsłużyć tę interakcję. Idealny wskaźnik FID wynosi do 100 milisekund.
• Skumulowane przesunięcie układu (Cumulative Layout Shift, CLS) – określa stabilność wizualną strony, np. użytkownik czyta artykuł, a tekst nagle przesuwa się w dół, ponieważ powyżej w końcu załadował się jakiś baner i przesunął całą treść. Gdyby baner załadował się szybciej lub jego rozmiar został zaprogramowany z wyprzedzeniem, taka sytuacja nie miałaby miejsca. CLS nie jest mierzony przez czas, ale jako współczynnik takich przemieszczeń. Idealny wskaźnik CLS wynosi do 0,1 sekundy.

Narzędzia do mierzenia Page Speed

Jak poprawić Page Speed? Oczywiście czasu ładowania strony nie mierzy się manualnie zegarkiem czy stoperem. Służą do tego specjalne narzędzia i usługi SEO dostępne na rynku za opłatą lub w wersji darmowej. Warto wykonać testy na kilku niezależnych programach, by zyskać jak najbardziej rzetelne wyniki. Najlepsze narzędzia, z których możesz skorzystać to Lighthouse, Google PageSpeed Insights, GTmetrix, Uptrends, Web Page Test.

Co wpływa na czas ładowania strony?

Powolne ładowanie witryny może być spowodowane przez szereg różnych czynników, od problemów z nieodpowiednim hostingiem po błędy w kodzie. Opowiemy więc o tych najczęstszych i o tym, jak zwiększyć szybkość wczytywania strony w tych konkretnych sytuacjach.

Hosting

Przyczyną niskiej wydajności witryny może być dostawca hostingu. Wpływ na to może mieć położenie geograficzne serwerów, ich moc, przepustowość sprzętu sieciowego itp. Ponadto wydajność witryny zależy od rodzaju używanego hostingu. Chociaż w większości przypadków wariant współdzielony jest najlepszą opcją pod względem kosztów finansowych, jego zasoby są dzielone między kilka witryn, co zmniejsza wydajność. Wirtualny serwer VPS rozkłada zasoby serwera fizycznego na kilka wirtualnych, aby zwiększyć wydajność witryn. Jednak jeśli obciążenie jest zbyt wysokie, prędkość ładowania strony może drastycznie spaść. Dedykowany serwer fizyczny kosztuje znacznie więcej niż hosting wirtualny lub VPS, ale zapewnia lepszą szybkość witryny.

Elementy graficzne

Obraz powinien mieć taki rozmiar, w jakim jest wyświetlany na Twojej stronie. Jeśli szerokość kolumny z zawartością wynosi 720 pikseli, a obraz ma szerokość 2400 pikseli, to nie będzie wyświetlał się szybko i poprawnie. Dlatego pamiętaj, by kompresować obrazy, ale bez utraty jakości. Możesz użyć do tego bezpłatnych narzędzi takich jak: IloveIMG, Optimizilla czy Resize Pixel. W przypadku witryn WordPress można użyć wtyczek, które przetwarzają wszystkie nowe i już przesłane obrazy. W przypadku animacji GIF lepiej przekonwertować je na format WebM, który jest specjalnie zaprojektowany dla HTML i obsługiwany przez przeglądarki Chrome, Mozilla, Opera, Edge.

Jeśli masz dużo zdjęć na stronie, ustaw opóźnione ładowanie. Ta technologia będzie ładować zdjęcia i filmy stopniowo, gdy przyjdzie ich kolej na ekranie. To znaczy, że witryna będzie po prostu ładowana od góry do dołu. Uwzględnij jednak kilka kwestii, by aby opóźnione pobieranie nie denerwowało użytkowników:

• Nie używaj opóźnionego ładowania dla obrazów na ekranie startowym strony;
• Zaznacz rozmiar zdjęć, aby przeglądarka natychmiast zarezerwowała dla nich niezbędne miejsce. W przeciwnym razie podczas ładowania obrazy będą przesuwać zawartość pod nimi, pogarszając UX oraz wskaźnik Cumulative Layout Shift;
• Skonfiguruj pobieranie, aby obraz zaczął się ładować nieco wcześniej, zanim trafi na ekran. Zapewni to płynniejsze przejścia dla użytkowników.

Duży rozmiar witryny

Waga stron wpływa na szybkość ich ładowania, dlatego w przypadku bardzo dużych i pełnych elementów witryn należy je zmniejszyć. Rozwiązaniem w tym wypadku będzie kompresja danych metodą Gzip, z której obecnie korzysta 81% witryn w sieci. Dzięki niej pliki są kompresowane do archiwum, które przeglądarka może pobrać szybciej, a następnie rozpakować i wyświetlić ich zawartość. Technologia ta zmniejsza wagę stron bez pogorszenia ich jakości o 50-75%.

Style czcionek

Style czcionek również mogą tymczasowo zablokować przetwarzanie i renderowanie strony, spowalniając ogólny proces ładowania. Jeśli są pobierane z twojego serwera, mogą być niepotrzebnie duże, a jeśli pochodzą z zewnętrznego źródła, prędkość ich ładowania będzie zależeć od właśnie od niego. Aby tego uniknąć, należy wybrać tylko te style, które są niezbędne do prawidłowego wyświetlania części witryny, którą użytkownik zobaczy jako pierwszą. Następnie trzeba poprawnie podłączyć wszystkie style do dokumentu.

Buforowanie danych

Mechanizm buforowania pozwala przeglądarce wstępnie załadować część zawartości witryny w celu zwiększenia szybkości ładowania stron. Niektóre systemy zarządzania treścią (CMS) wykorzystują mechanizmy automatycznego buforowania najnowszych wersji witryn i oferują konfigurowalne opcje. Jeśli Twoja witryna ma treści, które aktualizują się nieregularnie, możesz wydłużyć czas buforowania, aby poprawić jej wydajność.

Prędkość otwierania strony a pozycjonowanie

Warto wiedzieć, jak zwiększyć szybkość otwierania strony, ponieważ ma ona bezpośredni wpływ na pozycję w wynikach wyszukiwania. Wyszukiwarki mierzą prędkość ładowania poszczególnych stron i ustawiają wyższy priorytet dla witryn szybkich. Algorytmy monitorują także zachowanie ludzi – jeśli dana strona jest rzadziej odwiedzana i częściej zamykana, spada w rankingu. W sytuacjach, w których bezpośredni pomiar prędkości nie odgrywa tak ważnej roli, to właśnie czynniki behawioralne są podstawą budowania pozycji w SERP. Z dwóch „równych” stron zawsze wyżej będzie ta, która jest szybsza i to ona będzie generować większy ruch i sprzedaż.