Jak zatrzymać klienta na swojej stronie www? (cz. 1)

Tworząc stronę internetową, z pewnością chcesz, aby użytkownicy zostali na niej jak najdłużej, a docelowo skorzystali także z Twojej oferty. Ogromna konkurencja w internecie oraz rozwijające się trendy we wdrażaniu stron internetowych powodują, że stale musimy monitorować, czy nasz serwis/e-sklep nie wyróżnia się negatywnie na tle innych. Nowoczesna, przejrzysta oraz szybka strona www to jeden z kluczowych czynników dobrej reklamy. W tym poradniku przedstawimy Ci kilka sposobów, jak dopracować swoją „elektroniczną wizytówkę”.

Zadbaj o prędkość ładowania strony

Nic nie zniechęca użytkownika tak bardzo, jak wolne ładowanie się podstron w trakcie korzystania ze strony internetowej. W dzisiejszych czasach, gdy standardem w laptopach są dyski SSD, a szybkie łącze internetowe stało się już powszechne, użytkownicy oczekują, że przeglądanie stron internetowych będzie błyskawiczne.

Dbając o naszą stronę internetową, musimy pamiętać, by strona wczytywała się szybko i stopniowo. W tym celu należy przede wszystkim zadbać o to, by serwer, na którym znajduje się strona, spełniał odpowiednie parametry takie jak przestrzeń dyskowa czy pojemność transferu. Gdy jesteśmy pewni, że nasz dostawca hostingowy zapewnił nam odpowiednią konfigurację, to powinniśmy skupić się na optymalizacji naszego serwisu.

Tak naprawdę proces optymalizacji zaczyna się w momencie wdrażania strony internetowej. Jakość kodu oraz rozmiar treści ma kluczowe znaczenie i warto o tym pamiętać przez cały czas. Tworząc pierwsze widoki, starajmy się zminimalizować ilość zapytań SQL do bazy danych, ponieważ ma to znaczny wpływ na prędkość ładowania strony. Kolejnym ważnym aspektem są zagnieżdżone pętle (ang. nested loops), które w wielu przypadkach można zastąpić innym rozwiązaniem niemarnującym mocy obliczeniowej serwera.

Jeśli korzystamy z systemów CMS typu WordPress, starajmy się instalować tylko niezbędne wtyczki (ang. plugins). Istnieje wiele rozbudowanych wtyczek, które w zoptymalizowany sposób dostarczą nam mnóstwo funkcji oraz udogodnień, a ich stworzenie od podstaw zajęłoby programiście tygodnie albo miesiące. Niestety w repozytorium są także pluginy, które mają jedną lub dwie funkcje i można je zastąpić kilkoma linijkami kodu w „functions.php”. Te rozwiązania są skierowane głównie do osób, które nie potrafią programować i nie wiedzą, w jaki inny sposób dodać konkretne funkcje do swojego serwisu. Nie zmienia to jednak faktu, że tego typu rozwiązania marnują zasoby obliczeniowe serwera oraz przyczyniają się do spowolnienia strony internetowej.

Wysoka jakość kodu to nie wszystko

Przy wdrażaniu strony internetowej sprawdźmy, czy treść ładuje się przed plikami Javascript. Dzięki temu użytkownik będzie mógł zacząć czytać treść na stronie w trakcie, gdy kolejne animacje i efekty są doładowywane. Rozróżniamy dwa rodzaje ładowania się plików:

• Asynchroniczne (ang. asynchronous) – pliki mogą być ładowane w tym samym momencie, co inna treść. Możemy porównać to do restauracji, gdzie każdy może zamówić obiad w tym samym momencie, nie czekając, aż inna osoba złoży zamówienie.
• Synchroniczne (ang. synchronous) – tak zwane ładowanie „od góry do dołu”. Przeglądarka wczytuje pliki według ustalonej kolejności. Kolejny plik może być wczytany, dopiero gdy poprzedni jest już gotowy.

W przypadku plików Javascript upewnijmy się, że tylko najistotniejsze skrypty są ładowane wraz z pozostałą treścią strony. Pozostałe, większe pliki możemy opóźnić, stosując m.in. atrybut „defer”. Dzięki temu nasza witryna będzie wczytywała się szybciej, a wynik Google Pagespeed wzrośnie.

Lazy loading to konieczność

Tworząc stronę internetową, pamiętajmy o skrypcie, który ładuje obrazki i wideo dopiero w momencie, gdy są one wyświetlane przez użytkownika. Jeśli korzystamy z WordPressa, to mamy ten problem z głowy, ponieważ jest to domyślna funkcja tego systemu od wersji 5.4. W przypadku, gdy nasz CMS nie obsługuje funkcji lazy loading, możemy skorzystać z wielu darmowych bibliotek Javascript, które przyspieszą naszą stronę. Konfigurując ręcznie ustawienia tej funkcji, należy pamiętać, by moment, w którym ładowane są zdjęcia, nie następował za późno, gdyż użytkownik może być zmuszony poczekać, aż kolejne treści zostaną załadowane. Ten parametr najczęściej podajemy w pikselach i oznacza on odległość od obiektu. Gdy przewijamy stronę w dół i widoczny ekran znajdzie się w zasięgu tej odległości, to dane zdjęcie/wideo jest ładowane przez system. Dzięki takiemu rozwiązaniu możemy znacznie przyspieszyć działanie naszej strony internetowej, przy okazji nie wywołując frustracji u użytkownika. ☺

Podsumowanie

Powyższe zalecenia są konieczne, jeśli chcemy uzyskać pozytywny (zielony) wynik w Pagespeed, który przekłada się na lepsze wyświetlenia w wyszukiwarce Google. Im wyższe miejsce, tym większy ruch na naszej stronie. Dodatkowo przedstawione w tym artykule wskazówki zapobiegają wolnemu działaniu serwisu, co często powoduje, że użytkownik opuszcza stronę i szuka innej, konkurencyjnej. W kolejnej części przedstawimy aspekty UX, które zwiększą ruch na stronie, a także konwersję.