Jak optymalizacja strony www wpływa na koszty Twojego marketingu?

Jak optymalizacja strony www wpływa na koszty Twojego marketingu?

Klient, który nie doczeka załadowania strony po kliknięciu w reklamę to podwójna strata. W końcu zapłaciłeś za kliknięcie i straciłeś klienta za jednym zamachem. Ale to nie koniec złych wiadomości. Tym samym podniosłeś koszt tego kliknięcia, a Google obniżył pozycję Twojej strony www w wynikach wyszukiwania.

Typowy przykład z B2B

Załóżmy, że płacisz 5 zł za kliknięcie. Jeśli 30% osób nie doczeka załadowania strony, realny koszt jednego wejścia rośnie do ponad 7 zł. Płacisz tyle samo, ale mniej osób w ogóle widzi Twoją ofertę.

Optymalizacja strony www to więc nie tylko dobra praktyka. Ma wymierny wpływ na skuteczność reklam, ich koszt oraz pozycję strony w wyszukiwarkach.

Jak brak optymalizacji wpływa na Twoje koszty i przychody?

Zacznę od garści statystyk od Google:

• już 3 sekundy zwłoki w czasie ładowania strony zwiększa o 32% prawdopodobieństwo opuszczenia jej przez odwiedzających (czyli Twoich potencjalnych klientów)
• po kolejnych 2 sekundach (łącznie 5) prawdopodobieństwo wzrasta do 90%
• po kolejnej (szóstej) sekundzie wzrasta już do 103% względem bazowej wartości (czyli tracisz ponad 2 razy więcej odwiedzających), więc nie mają większego sensu dalsze progi
• dodatkowo ponad połowa (53%) wizyt na urządzeniach mobilnych zostanie przerwanych jeśli strona ładuje ponad 3 sekundy
• przy e-commerce różnica między ładowaniem 1 sekundę a 3 sekundy może zmienić wartość sprzedaży nawet o kilkanaście procent

Najbezpieczniej jest więc przyjąć, że górną granicą są właśnie 3 sekundy.

Skoro to już wiesz, zastanówmy się jakie są konsekwencje przedwczesnego opuszczenia Twojej strony przez potencjalnego klienta. Oczywiście pierwszą jest ta, że nie jest już potencjalnym klientem. Nie zdążył poznać Cię, zaufać Ci, ani tym bardziej kupić od Ciebie.

Jeśli potencjalny klient pochodził z reklamy to wydałeś w dodatku na to pieniądze. Ale na tym nie kończy się lista następstw: to jest to co możesz od razu zauważyć.

Z każdym takim przypadkiem rosną dwa wskaźniki reklamy:

• koszt realizacji celu (tzw. konwersji, czyli np. leada - kontaktu do klienta), co wpływa na rentowność reklam
• koszt za kliknięcie w reklamę, bo platforma reklamowa uznaje, że to co masz do zaoferowania nie jest jednak tym czego szukał klient

Dzieje się tak, bo źle zoptymalizowana strona obniża Wynik Jakości reklamy. To swoisty podatek od powolności.

Platforma reklamowa ocenia w skali 0-10 jakość reklamy, dopasowanie reklamy do zapytania klienta i jego doświadczenie na stronie. Jeśli nie jest więc ona spójna z treścią reklamy, jest nieczytelna lub ładuje się wolno to nie spełnia ona jego oczekiwań. Wtedy platforma obniża Wynik Jakości. Wyższy (lepszy) Wynik Jakości może realnie obniżyć koszt za kliknięcie nawet o kilkadziesiąt procent!

Jeśli jednak nawet kliknięcie nie jest efektem reklamy to także wyjście potencjalnego klienta ze strony zanim się załaduje ma wymierne konsekwencje.

Ten sam bowiem mechanizm "rozumowania" algorytmów stoi za obniżeniem pozycji Twojej strony www w wyszukiwarkach. Użytkownicy klikają w link i wychodzą z niej zanim zdąży się załadować. To sygnał dla Google, że należy niżej ocenić stronę, bo najwyraźniej nie jest ciekawa.

Na czym polega optymalizacja strony www?

Słowo „optymalizacja” może brzmieć trochę groźnie i technicznie, ale w rzeczywistości to po prostu dbanie o to, by nic nie stało na przeszkodzie między Twoim klientem a Twoją ofertą. W sumie trochę techniczne jest, bo to w końcu strona internetowa, ale i tak warto, żebyś się z nią zaznajomił, bo chodzi o to, żebyś wiedział na co zwrócić uwagę przy zlecaniu strony www.

W gruncie rzeczy w optymalizacji chodzi o zmniejszenie wagi strony. Robisz to głównie przez pozbycie się niepotrzebnych śmieci i podpowiedzenie przeglądarce klienta co jest na stronie ważne, a co trochę mniej ważne. Dzięki temu strona działa szybciej, klient się nie frustruje, a platformy reklamowe lepiej ją oceniają (i wyceniają reklamy).

Opiszę Ci poniżej najważniejsze elementy optymalizacji działania Twojej strony. Zacznę od najprostszych, które zrobisz sam bez wiedzy technicznej, aż do najtrudniejszych, które wdrożyć powinien specjalista. Na końcu znajdziesz też darmową checklistę do pobrania, żeby łatwiej było Ci rozmawiać z wykonawcą strony www.

Hosting

Parametry techniczne serwera, na którym stoi Twoja strona, to pierwszy czynnik szybkości ładowania strony. Nie musisz znać się na tym, żeby wybrać ten najszybszy, bo podpowiem Ci, które oferty są szybsze. Co ciekawe: najdroższe oferty największych dostawców w Polsce nie należą do najszybszych (a wręcz przeciwnie).

Najszybsze hostingi

Wciąż szybkie, a dodatkowo z unikalną cechą

Wielkie marki

Pamiętaj, że parametry przedstawionych przeze mnie ofert mogą się zmieniać i choć staram się je aktualizować to nie musi być tak, że zajmują właściwe miejsce w moim "rankingu".

Średnia prędkość, którą prezentuję powyżej to pewnie uproszczenie - zależy też od innych czynników. Przy wyborze hostingu powinieneś też brać pod uwagę inne cechy, które są ważne akurat dla Ciebie, np.: ilość możliwych do zaparkowania domen lub utworzonych adresów e-mail.

Co ważne: większość usługodawców za darmo przeniesie Twoją stronę www, e-maile i pozostałe pliki z poprzedniego hostingu. Na stronie oferty hostingu szukaj informacji o migracji.

Zdjęcia i grafika

Choć na co dzień pewnie wykorzystujesz format jpg do zdjęć i grafik (może nawet o tym nie wiesz) to nie jest on najbardziej optymalnym dla stron www. Ba, może wręcz wpływać bardzo niekorzystnie na szybkość Twojej strony (np. kiedy zapisujesz "w pełnej jakości", czyli bez kompresji).

Obecnie standardem jest format webp. Niewiele Ci to pewnie mówi, ale jest prosty sposób, żebyś skorzystał z jego dobrodziejstw. Wręcz byłoby wskazane, żebyś w tym formacie wrzucał zdjęcia do galerii, realizacji czy produktów.

Jak zmienić format zdjęć na nowoczesny i lekki webp?

1. Wejdź na stronę tinypng.com
2. Na dole ramki, którą zobaczysz od razu po wejściu zaznacz "convert"
3. Rozwiną się dostępne formaty, na jakie narzędzie może konwertować Twoje zdjęcia
4. Zaznacz webp
5. Przeciągnij zdjęcia na ramkę, lub kliknij ją i wybierz zdjęcia z komputera (w wersji darmowej możesz na raz przesłać 3 zdjęcia - potem musisz odświeżyć stronę)
6. Kiedy będą gotowe, pobierz zdjęcia klikając przycisk "webp" obok ich nazwy

Prawda, że proste? Jeśli wrzucasz też filmy na stronę to istnieje także lekki format dla nich: webm. Możesz go zmienić np. narzędziem CloudConvert.

Format plików to nie jedyna istotna kwestia przy okazji zdjęć: liczy się też ich rozdzielczość (wielkość w pikselach, np. 1920x1080). Z każdym pikselem rośnie jego rozmiar. Zdjęcia na stronie natomiast mają określoną wielkość. Nie ma więc potrzeby, żeby wrzucać je większe.

Przykład

Zdjęcie z aparatu lub smartfona zapisywane jest zazwyczaj w rozdzielczości około 4000 pikseli szerokości. Na stronie zazwyczaj największe zdjęcia wyświetlane są w rozdzielczości około 1200 pikseli szerokości. Nadmiar pikseli nie poprawi jego odbioru, za to wydłuży czas ładowania i zajmie więcej miejsca za które płacisz na hostingu.

Jeśli korzystasz z systemu zarządzania treścią (CMS, np. Wordpress) to raczej na pewno ma on funkcję, która przygotowuje mniejsze warianty wrzucanych zdjęć. Można nawet zaprogramować je, żeby robiły to do dokładnych wymiarów jakie potrzebujesz i automatycznie zmieniać ich format na webp.

Zostańmy jeszcze na chwilę przy filmach, bo jest jedna istotna kwestia, jeśli Twoja strona www wita klientów filmem w tle. Filmy z założenia "ważą" więcej, więc ich wczytanie trwa dłużej. Dlatego powstała funkcja, która wyświetla obrazek (np. pierwszą klatkę filmu) dopóki ten nie zostanie załadowany. Brak takiego przygotowania filmu w tle drastycznie wydłuża czas ładowania strony, więc koniecznie zadbaj, żeby tam się znalazła.

Fonty na stronie

Żeby Twój komputer lub smartfon wyświetlił czcionkę użytą na stronie przez projektanta, musi ją najpierw posiadać. Pobieranie jej samodzielnie byłoby absurdalne, dlatego serwer robi to za Ciebie.

Twórca ma 2 podstawowe metody, żeby przesłać Ci font, który chciałby Ci wyświetlać: wskazać miejsce w sieci skąd Twój komputer ją pobierze lub wgrać ją na serwer strony.

Pierwszy sposób jest łatwy (kopiuj-wklej jedną linijkę), drugi wydajny (chcąc być bardziej precyzyjny: bardziej wydajny jeśli nie prowadzisz międzynarodowej działalności - przeciwnym wypadku jest odwrotnie).

W gruncie rzeczy wgranie czcionki na własny serwer też nie jest skomplikowane. Poza wysłaniem pliku na serwer, wystarczy dopisać standardową krótką formułę w kodzie odpowiedzialnym za wygląd.

Priorytety obrazków

Przy tworzeniu stron www funkcjonują dwa kluczowe rozwiązania, które informują przeglądarkę jak ma ustalać kolejność ładowania obrazków:

• wysoki priorytet
• leniwe ładowanie

Zasada jest całkiem prosta. Wszystkie grafiki, które klient widzi od razu po załadowaniu się strony powinny mieć wysoki priorytet, żeby jak najszybciej je zobaczył. Te, których nie zobaczy od razu (tzw. below-the-fold - z ang. poniżej linii tego co widać od razu) powinny być ładowane "leniwie".

W gruncie rzeczy to bardzo prosta metoda: polega na dodaniu kliku słów w kodzie przy każdym obrazku. Pomimo tego, że systemy zarządzania treścią mogą być wyposażone w funkcje robiące to automatycznie to w mojej ocenie należy to wykonać ręcznie. Automat może źle zinterpretować co powinno kiedy być ładowane a w konsekwencji wydłużyć ładowanie strony www, zamiast ją przyspieszyć.

Minifikacja kodu

Te nieintuicyjne (bo pochodzi z angielskiego) słowo to po prostu skracanie kodu, żeby było go mniej. Każdy znak, w tym spacja, "waży". Sam w sobie może i niewiele, ale kiedy zbierzesz wszystkie do kupy to jest już warta uwagi oszczędność.

Oszczędność ta bierze się ze sposobu tworzenia stron www. Są one pisane przy pomocy kodu. Twórca używa tabulatorów i enterów (tak, to też znaki) dla czytelności. Przeglądarka już tej czytelności nie potrzebuje - jej jest wszystko jedno pod tym względem. Minifikacja usuwa więc te zbędne tabulatury i entery, zmniejszając ilość znaków, a tym rozmiar pliku.

Systemy zarządzania treścią mają wtyczki, które mogą to robić "w locie", np. przy każdej zmianie na stronie www. Ale posiadacze statycznych stron też mogą posłużyć się tą techniką przy pomocy licznych narzędzi dostępnych za darmo w internecie.

Pamięć podręczna

Kiedy otwierasz stronę www to w rzeczywistości pliki, które są z nią powiązane pobierane są na Twój komputer. Niektóre muszą się najpierw wygenerować na serwerze, bo muszą pobrać dane z bazy danych.

Wszystkie te czynności trwają. Żeby przyspieszyć całą tę procedurę używa się pamięci podręcznej (tzw. cache - czyt. "kesz") serwera. Serwer zapamiętuje najważniejsze elementy, żeby szybciej wysłać je klientowi na stronie. Większość całych podstron można w ten sposób przechowywać w pamięci podręcznej nie czekając, aż ich treść pobierze się z bazy danych.

Jest kilka metod włączenia pamięci podręcznej:

1. Wtyczką do systemu zarządzania treścią strony (do Wordpress są to np. LiteSpeed Cache i WP Rocket)
2. W konfiguracji hostingu (musi wspierać technologię np. Redis lub Memcached)
3. W pliku .htaccess (na serwerach Apache)
4. Przy pomocy zewnętrznej usługi (np. Cloudflare)

Skrypty

Systemy zarządzania treścią, takie jak Wordpress mają jedną dużą zaletę i wadę jednocześnie: wtyczki. To skrypty, dzięki którym możesz dodać niemal każdą funkcjonalność przy pomocy kilku kliknięć. To niewątpliwa zaleta. Ale dlaczego to też wada? Z co najmniej dwóch powodów:

1. łatwość ich instalacji skłania do ich nadużywania - w efekcie strona jest nimi przeładowana (i mniej bezpieczna - pisałem o tym więcej w artykule "Jaki CMS powinieneś wybrać i skąd masz wiedzieć, że w ogóle go potrzebujesz?")
2. ich jakość jest nierówna - jest taka sama szansa trafić na bardzo dobry kod, jak i taki, który zniweczy wszelkie działania optymalizacyjne

Najprostsze co możesz zrobić to zrewidować, które z nich są faktycznie potrzebne na Twojej stronie www. Jeśli coś nie jest niezbędne albo jest zbędnym bajerem, powinieneś się tego pozbyć.

Nie ma uniwersalnej rady co do ilości i sposobu wyboru wtyczek na stronę. Trochę jak w medycynie: trzeba ocenić czy potencjalny zysk (łatwiej usługi, szybkość wdrożenia) przewyższa potencjalne ryzyko (konieczność aktualizacji, spowolnienie strony, potencjalne awarie).

Osobiście utrzymuję na stronach www moich klientów minimalną liczbę wtyczek. Większość dodatkowych funkcji można łatwo napisać bez nich nie obciążając nadmiernie serwera.

Poza wtyczkami należy zwrócić uwagę też na ilość ładowanych skryptów - każdy z nich to dane, a tzw. ładowanie ich z zewnątrz to każdorazowo dodatkowe zapytanie do serwera. To standardowe działanie podczas tworzenia strony www, ale nie można go nadużywać.

W przypadku systemów zarządzania treścią takich jak Wordpress optymalizować warto też standardowe skrypty, które nie są potrzebne - po prostu je wyłączając. Są to np. skrypty odpowiedzialne za wyświetlenie buziek (emoji) lub budowanie strony z pomocą edytora.

TL;DR

• Jeśli Twoja strona ładuje się dłużej niż 3 sekundy to połowa klientów w ogóle nie zobaczy Twojej oferty
• Dodatkowo Twoje reklamy na Google i Facebooku są droższe
• Zacznij optymalizację od wyboru szybkiego hostingu (lista powyżej). Spoiler: najwięksi dostawcy wcale nie są najszybsi
• Zamień obrazki w jpg na lekki format webp (użyj np. tinypng.com) i dopasuj ich rozmiar do takiego jaki faktycznie się wyświetla
• Ustaw priorytety obrazków (te widoczne od razu powinny mieć wysoki priorytet, a te poniżej tego tzw. leniwe ładowanie)
• Zminifikuj kod - zmniejsz jego objętość odpowiednim narzędziem, które usuwa spacje, entery i tabulatury
• Włącz pamięć podręczną serwera
• Uporządkuj skrypty z wtyczkami na czele - usuń te zbędne i zmniejsz ilość linków do skryptów zewnętrznych (w tym do fontów, które mogą być na Twoim hostingu)

Kliknij poniżej, żeby pobrać checklistę optymalizacji swojej strony www i zapisać się na mój newsletter:

Podsumowanie

Optymalizacja strony www to nie techniczna fanaberia, a element, który bezpośrednio wpływa na Twoje przychody i koszty: zarówno bezpośrednie w cenie reklam, jak i pośrednie przez utraconych klientów. Koniecznie dopilnuj więc, żeby Twój wykonawca zadbał, żeby otwierała się klientom w sensownym czasie. Pobierz checklistę i przejdź przez nią punkt po punkcie ze swoim wykonawcą. To jedna z prostszych rozmów, które mogą obniżyć Twoje koszty reklam w najbliższych miesiącach.

Kiedy wiesz już, że szybkość strony to fundament Twoich zysków, możesz próbować łatać obecną stronę samemu. Ale jeśli chcesz przestać zgadywać i zacząć zarabiać, mogę Ci w tym pomóc. Od 23 lat tworzę strony www napędzane strategią - takie, które od pierwszego dnia są zoptymalizowane pod kątem konwersji i niskich kosztów reklamy. Napisz do mnie i sprawdźmy, jak możemy podkręcić Twój marketing.