page speed optimization

Jak poprawić szybkość ładowania strony internetowej lub sklepu

Szybkość ładowania strony należy do kluczowych czynników, składających się na UX, czyli user experience. Witryny, które ładują się zbyt długo, generują znaczny współczynnik odrzuceń, ale to jeszcze nie wszystko. Należy zdać sobie sprawę z tego, że czas jaki upływa od momentu wciśnięcia klawisza ENTER do chwili otwarcia witryny, pośrednio wpływa na pozycję w wynikach wyszukiwania Google. Jak poprawić ten parametr? W pierwszej części poradnika wymieniamy sprawdzone techniki, pozwalające znacząco skrócić czas wczytywania strony.

Każdemu właścicielowi strony internetowej zależy na tym, by ta przyciągała możliwie najwięcej użytkowników. W tym celu stosowane są różne techniki dotarcia do odbiorców i działania mające na celu podwyższenie pozycji witryny w wynikach wyszukiwania. Wszystko to nie zda się jednak na zbyty wiele, jeżeli zaniedbamy jeden z podstawowych czynników, przekładających się na wrażenia użytkownika. Mowa o czasie wczytywania strony.

Szybkość ładowania strony – dlaczego to takie ważne?

Wiele osób z całą pewnością pamięta jeszcze czasy, kiedy od chwili wpisania adresu do momentu wczytania witryny upływał czas, który pozwalał nam bezstresowo zaparzyć kawę. W dobie połączeń wdzwanianych, było to całkowicie normalne. Technologia nie stoi jednak w miejscu i dziś długi czas ładowania strony jest po prostu nieakceptowalny.

Użytkownicy nie po to płacą za superszybki Internet i ultrawydajny hardware, by w nieskończoność czekać na możliwość przeczytania artykułu lub dokonania zakupu. Godząc się na powolne wczytywanie strony, stajesz się najlepszym przyjacielem swojej konkurencji. Zastanówmy się przez chwilę, co robimy, gdy po kliknięciu w link nie możemy doczekać się treści? Cofamy się do wyników wyszukiwania i wybieramy kolejny odnośnik. Gdy taka akcja powtórzy się wiele razy, Google uzna, że nasza strona nie odpowiada kryteriom wyszukiwania i w rezultacie – zepchnie ją gdzieś na szary koniec listy, a my nie tylko stracimy bieżących użytkowników, ale też nie pozyskamy nowych.

Powyższe pociąga za sobą kolejną konsekwencję, jaką jest zmniejszenie współczynnika sprzedaży lub konwersji (zależnie od przeznaczenia strony). Użytkownik nie będzie czekał w nieskończoność na treść lub na możliwość dodania towaru do koszyka zakupowego. Tracimy klientów, tracimy pieniądze. Teraz odpowiedz sobie na kluczowe pytanie – czy twoja firma może pozwolić sobie na taką rozrzutność? Z całą pewnością nie, bo istotą funkcjonowania każdego podmiotu komercyjnego jest zarabianie.

Jakie czynniki wpływają na czas ładowania strony?

Zanim przejdziemy do konkretów, wypada wyjaśnić, jakie procesy zachodzą, gdy użytkownik wpisze adres w oknie przeglądarki lub kliknie odnośnik. Pierwsza akcja odbywa się na serwerze, którego zadaniem jest przekazywanie kodu strony i działających w jej obszarze plików każdej przeglądarce, która wyda stosowne polecenie.

Na podstawie instrukcji zawartych w kodzie PHP, serwer generuje kod HTML, który następnie przekazywany jest do przeglądarki. Im bardziej skomplikowany i zawiły jest kod PHP, tym dłużej będzie przetwarzany. Oprócz tego, przeglądarka otrzymuje jeszcze pliki CSS, odpowiedzialne za wygląd strony, oraz JavaScript, definiujące wszystkie akcje dynamiczne odbywające się bez przeładowania strony.

Gdy serwer wyśle wszystkie kody źródłowe, przeglądarka zaczyna je przetwarzać w sposób sekwencyjny. Oznacza to, że poszczególne elementy strony są ładowane kolejno, nie wszystkie jednocześnie. W pierwszej kolejności, użytkownik powinien otrzymać najważniejsze informacje, które zatrzymają go przed ekranem. Co to wszystko oznacza w kontekście skrócenia czasu wczytywania witryny?

Jak skrócić czas ładowania strony?

Istnieje tylko jedna poprawna odpowiedź na postawione wyżej pytanie – trzeba działać dwutorowo, czyli po stronie serwera i przeglądarki. Tylko w ten sposób uda się osiągnąć naprawdę dobre efekty.

analiza strony socialtrends web dev

Przyspieszamy stronę – serwer

Obecnie, zdecydowana większość stron stoi na serwerach współdzielonych, które nie zapewniają żadnych możliwości konfiguracji (wszystkim zajmuje się hostingodawca) lub są one mocno ograniczone. Nie oznacza to jednak, że w tym temacie pozostajemy całkowicie bezradni.

Po pierwsze, wybierz taki serwer, który zapewni twojej stronie możliwie najkrótszy czas ładowania. Kluczowym czynnikiem jest tu wersja PHP. Niższa niż 7.1 będzie dłużej przetwarzać kod PHP, co znacząco zwiększy czas ładowania. Wybierając optymalną wersję PHP należy uwzględnić kompatybilność ze skryptami i dodatkami. Można wziąć pod uwagę rekomendacje dostawcy oprogramowania strony (CMS) lub sklepu internetowego, jednak finalny wybór powinien nastąpić po przeprowadzeniu testów zgodności. Testy wymagają kompleksowego sprawdzenia każdego newralgicznego punktu, łącznie z integracjami i aplikacjami współistniejącymi, jak na przykład dedykowanymi programami do mailingu. Jeżeli posiadasz wystarczającą wiedzę, tego typu analizę możesz przeprowadzić samodzielnie.

Prosty test przy pomocy skryptu

W tym miejscu musimy wspomnieć o ciekawym skrypcie do testowania wydajności PHP, który przydaje się, szczególnie gdy będziemy uruchamiali na nim sklep internetowy, forum lub portal społecznościowy. Mowa o skrypcie PHP Benchmark Performance Script do pobrania z repozytorium autorów: www.php-benchmark-script.com

Po pobraniu pliku bench.zip rozpakuj go dowolnym programem do archiwizacji plików, następnie przenieś plik bench.php do katalogu głównego swojej strony internetowej lub sklepu. Następnie w przeglądarce wpisz: adresStrony.pl/bench.php, po chwili zobaczysz wyniki benchmarku.

Poniżej przykładowy wyniki dla wersji PHP 7.3 na hostingu myDevil…

wynik benchmarku myDevil

A tutaj dla przykładu wynik hostingu SeoHost…

wynik benchmarku SeoHost

Poniżej wynik dla Unixstorm…

wynik benchmarku Unixstorm

UWAGA! Uzyskane wyniki będą się różniły w czasie, testy dobrze zrobić o wybranych porach dnia np. w godzinach 6, 12, 15, 18, 21, 23 itd i dopiero wtedy należy wyciągnąć wnioski.

Każdy może samodzielnie przetestować wybrany hosting. Pamiętaj! Po przeprowadzeniu testów, usuń plik bench.php z serwera!

Jeżeli posiadasz sklep internetowy, forum lub serwis społecznościowy – gdzie spora część zawartości musi być dynamicznie serwowana, najlepiej aby wynik zawarty w wierszu „Total time” był poniżej 1 sekundy. Dla sklepów internetowych ideałem będzie wynik w okolicach 0,4-0,5 sekundy. Dla blogów, stron internetowych, gdzie większość elementów nie musi być dynamicznie dostarczana do użytkownika, wartości 1,4 – 1,5 są akceptowalne.

Optymalizacja kodu PHP

Po drugie, uczyń kod PHP możliwie najprostszym. Oznacza to, że chcąc przyspieszyć stronę, nie obejdzie się bez redukcji np. wtyczek WordPress. Obecnie, w modzie są tzw. wtyczki wielofunkcyjne, oferujące ogrom możliwości. Żeby lepiej to zobrazować, posłużymy się porównaniem do najbardziej rozbudowanych szwajcarskich scyzoryków, które w jednym narzędziu gromadzą multum funkcji. Taki gadżet wydaje się być atrakcyjny, ale większości zawartych w nim narzędzi nigdy nie użyjemy. Oznacza to, że dźwigamy w kieszeni masę niepotrzebnego żelastwa, które nas spowalnia. Tak samo jest z kodem – nawet gdy używamy tylko jednej funkcji wtyczki, system i tak musi przetworzyć kod PHP, który realizuje niewykorzystane obszary. Po co nam to? Gdy schowamy do kieszeni prosty scyzoryk z ostrzem i śrubokrętem, nawet go nie poczujemy, a gdy ograniczymy liczbę wtyczek do minimum i wyrzucimy wszystkie kombajny, kod zostanie przetworzony znacznie szybciej.

W przypadku WordPress pomocny może okazać się plugin UsageDD. Jeżeli nie dysponujesz odpowiednią wiedzą i doświadczeniem, optymalizację zleć profesjonaliście.

W tym miejscu przestrzegamy przed używaniem aplikacji tzw. optymalizatorów kodu PHP, jest to najprostsza droga do unicestwienia strony. Jeżeli już używasz „automatu” do optymalizowania kodu, pamiętaj aby kod wynikowy dokładnie zbadać przed wypuszczeniem go na produkcyjną wersję strony.

Cache po stronie serwera

Po czwarte, postaw na cache’owanie po stronie serwera. O co chodzi? Żeby lepiej to zrozumieć, musimy cofnąć się do procesów, które zachodzą w trakcie wczytywania strony. Za każdym razem, gdy zostanie wywołany adres, serwer musi wygenerować kod HTML, który będzie mógł być odczytany przez przeglądarkę. Nie trzeba jednak powtarzać tej procedury dla każdego kolejnego użytkownika. Gdy uruchomimy cache, kod PHP zostanie przetworzony na HTML tylko raz. Przy każdym kolejnym wejściu, już przetworzone informacje zostaną wczytane z pamięci podręcznej, a to pozwala znacząco skrócić czas ładowania. Trzeba jednak pamiętać, że ta funkcja nie sprawdzi się w przypadku dynamicznych stron. Wynika to z faktu, że każdy kolejny użytkownik zobaczy treść, jaką wczytał pierwszy user. Przykładową podstroną w sklepach internetowych, których nie należy umieszczać w cache jest „koszyk”.

Przyspieszamy stronę – przeglądarka

Opisane wyżej zabiegi przyczynią się do wyraźnej redukcji czasu ładowania strony. Należy zdać sobie sprawę z tego, że jeszcze lepsze rezultaty dają działania realizowane po stronie przeglądarki i nie mamy tu na myśli czynności, które może wykonać użytkownik, a takie, które mogą być wykonane przez ciebie, jako administratora strony.

W pierwszej kolejności warto włączyć buforowanie w przeglądarce. Działa to podobnie jak cache’owanie na serwerze. Po aktywowaniu tej funkcji, wszelkie niezbędne pliki (grafiki, JS, CSS itd.) będą zapisywane w pamięci urządzenia, z którego korzysta użytkownik. W rezultacie, gdy user porusza się po różnych podstronach, przeglądarka nie wysyła ponownego zapytania o dane, gdyż te są dostępne w zasobach dyskowych smartfona lub komputera. Doprowadza to do odciążenia serwera i w rezultacie – do szybszego działania strony.

Kolejny ważny krok to optymalizacja dostępnej na stronie grafiki. To właśnie treści graficzne (i wideo) zajmują najwięcej miejsca. Pierwsza rzecz to rozdzielczość i wynikający z niej rozmiar. Nie ma sensu ładowania na serwer ogromnych plików, bo przeciętny ekran i tak osiąga rozdzielczość na poziomie ok. 1400 pikseli. Możesz spokojnie ograniczyć rozmiar obrazów bez obawy o utratę jakości.

Do optymalizacji grafiki możemy użyć automatów w postaci wtyczek (pluginów) np. dla WordPress – Imagify lub zrobić to dokładniej, samodzielnie, stosując aplikacje desktopowe typu PngOptimizer, FileOptimizer, XGuetzli Optimizer, WebPconv.

Kolejna rzecz, rozdzielczość grafiki powinna być dostosowana do funkcji, jaką ta pełni na stronie. Często nie ma sensu wypełniać małego baneru plikiem wysokiej rozdzielczości. Nie zapominaj, że format grafiki powinien odpowiadać jej przeznaczeniu. JPG warto stosować w przypadku zdjęć, PNG – do obrazów graficznych, a SVG – do wszelkich grafik i animacji o geometrycznych kształtach.

Skoro mowa o optymalizacji, ten proces nie może ominąć plików JS i CSS. W tym miejscu należy wskazać na następujące aspekty:

  • minifikacja kodu – usuwając z kodu zbędne znaki (jak choćby spacje i znaki nowej linii) zmniejszysz rozmiar pliku;
  • łączenie plików – jeżeli twoja strona używa kilku plików JS i CSS (co jest bardzo prawdopodobne), połącz je w jeden zbiorczy plik. W ten sposób, uzyskasz wyższą szybkość przesyłania, a sama przeglądarka będzie musiała obsłużyć tylko jeden plik zamiast kilku;
  • opóźnij ładowanie plików JS i CSS – jeżeli wszystkie pliki zostaną wrzucone do sekcji HEAD, zawarte w nich instrukcje zostaną „odpalone” wcześniej niż właściwa treść strony, a to z kolei doprowadzi do sytuacji, w której treści pojawią się ze sporym opóźnieniem. Ten punkt wywiera istotny wpływ na Core Web Vitals, omówimy go szczegółowo w kolejnych poradnikach.

W pierwszej części poradnika wymieniliśmy kilka najskuteczniejszych technik, które pozwalają znacząco skrócić czas wczytywania strony. W tym temacie, można zrobić jeszcze więcej!

Mariusz Kołacz

Marketingiem internetowym zajmuje się od 2008 roku, a informatyką i nowymi technologiami od ponad 15 lat. Tworzę narzędzia marketingowe, piszę teksty, a po godzinach lubię przeczytać dobrą książkę z zakresu medycyny lub parapsychologii. Dowiedz się, jak możesz rozwinąć swój biznes korzystając z SEO, SEM, Social Media oraz automatyzacji marketingu.