Ecommerce – szybszy sklep
Prowadzisz sklep internetowy i chociaż prezentuje się on okazale i jest w pierwszej dziesiątce wyników Google, to liczba zamówień nie jest zbyt imponująca? Być może powodem jest powolność Twojego sklepu. Od kiedy w Polsce pojawił się szerokopasmowy internet ludzie zaczęli przywiązywać dużą wagę do szybkości wyświetlania się stron. Zbyt długie oczekiwanie na pojawienie się treści powoduje jedno: klient wraca do wyszukiwarki i wybiera kolejną pozycję z listy. Jak znaleźć problem odstraszający potencjalnych klientów? Jest jedna bardzo prosta metoda, która nie wymaga od Ciebie specjalistycznej wiedzy. Wystarczy serwis internetowy do przeprowadzania testów online lub przeglądarka Chrome/Firefox+Firebug.
Chrome
Naciśnij klawisz F12 i w nowym okienku wybierz zakładkę: sieć / network. Otwórz stronę swojego sklepu i naciśnij kombinację klawiszy Ctrl+F5 (dzięki temu przeglądarka usunie wszelką zapamiętaną treść strony i zachowa się jak użytkownik wchodzący po raz pierwszy na stronę).
Firefox
Zanim zaczniesz będziesz musiał zainstalować dodatek Firebug. Po instalacji zrestartuj przeglądarkę i wejdź na stronę swojego sklepu. Teraz możesz aktywować nowy dodatek (ikonka z żuczkiem). W nowym okienku wybierz zakładkę „sieć” i podobnie jak w Chrome naciśnij Ctrl+F5.
Test online
Wejdź na stronę http://www.webpagetest.org/ i wpisz adres do sklepu. Możesz wybrać typ przeglądarki oraz rodzaj połączenia. Teraz poczekaj na wyniki.
Każda z tych metod da w wyniku graficzne wykresy przedstawiające proces ładowania się strony. Najważniejszymi rzeczami, na które musisz zwrócić uwagę są:
- czas (szerokość paska) przy pierwszym elemencie,
- liczba wyszczególnionych elementów oraz
- położenie dwóch pionowych kresek podpisanych jako „DOMContent Event” i „Load Event”
Testy najlepiej wykonać na kilku różnych podstronach serwisu, a zwłaszcza na podstronach produktów, gdzie kieruje większość wyników wyszukiwarki. Dzięki temu uzyskasz informacje niezbędne do określenia co jest nie tak i z czym należy zrobić porządek (czyli o czym musisz powiedzieć programiście).
Zacznijmy od początku, czyli od czasu pierwszego elementu. Pierwszym elementem jest sama strona sklepu. Cała reszta pasków na wykresie to elementy na niej osadzone (obrazki, style, skrypty js, itd). Jeżeli strona potrzebuje dłuższej chwili na wygenerowanie się (więcej niż kilkaset milisekund), to należy przyjrzeć się sposobowi tworzenia jej treści.
Liczba obrazków, plików ze stylami oraz skryptów ma wpływ nie tylko na czas ładowania się strony, ale także na moment odpalenia się dość szczególnych sygnałów w przeglądarce. Sygnały/zdarzenia te oznaczone są poprzez pionowe kreski. Czas ładowania się strony może mieć istotny wpływ na to, jak potencjalni klienci postrzegają Twój sklep. Powiedzmy, że całość utrzymana jest w ciemnej kolorystyce. Z tego powodu wszystkie litery są wyświetlane na biało. Wszystko jest dobrze, pod warunkiem, że tło wyświetli się nieco szybciej lub w tym samym czasie co litery. W przeciwnym wypadku ludzie zobaczą białe litery na białym tle (domyślny kolor strony internetowej). Niekiedy wolniejsze ładowanie się niektórych elementów może także powodować „skakanie” treści po całym ekranie.
Zdarzenia przeglądarkowe mają znaczenie w przypadku dynamicznych elementów strony. Większość skryptów napisanych jest tak, żeby ruszyć po otrzymaniu informacji, że strona została załadowana (pierwsza pionowa kreska). Dopóki to nie nastąpi, dopóty dodawanie do koszyka bez przeładowania się całej strony nie zaskoczy. Jeśli w Twoim sklepie jest tylko takie dodawanie do koszyka, to klienci mogą być bardzo zdziwieni, jeśli nic się nie stanie przy pierwszym kliknięciu w ikonkę. Niepewność powiększy się z chwilą, gdy drugie lub trzecie kliknięcie zadziała jak trzeba. Druga pionowa kreska (opisana jako „Load Event”) ma mniejsze znaczenie. Oznacza ona mniej więcej tyle, że przeglądarka ma już wszystkie osadzone elementy i wie jakie są ich wymiary geometryczne. Ma to znaczenie głównie w przypadku skryptów, które np. robią zapętlony pasek (patrz: http://www.smoothdivscroll.com/).
Na dużą liczbę małych i średnich obrazków jest jedna rada. Należy połączyć je w jedną większą grafikę. Można do tego wykorzystać serwis http://spritegen.website-performance.org/. Otrzymasz obrazek zawierający wszystkie mniejsze obrazki oraz plik ze stylami, w którym zawarte będą położenia poszczególnych grafik. Sposób ten nadaje się idealnie do ograniczania liczby obrazków tworzących layout strony. Możesz użyć go także w przypadku obrazków przedstawiających loga firm. Jeżeli na stronie masz boksy z popularnymi produktami albo z nowościami, a ich rotacja trwa np. jeden dzień, to także możesz zastosować tę metodę (oczywiście pod warunkiem, że zdjęcia produktów nie są zbyt wielkie).
Ostatnią rzeczą, na którą warto zwrócić uwagę, jest to co się dzieje w tle już po załadowaniu strony. Przykładowo, programista przygotował kilka bloczków uaktualniających się „na żywo”. Bloczki te mogą pokazywać najnowsze komentarze na forum, recenzje produktów, aktualnie przeglądane kategorie/produkty, itd. Jeżeli masz Firebuga, to w zakładce „sieć” te elementy będą pojawiać się na samym dole listy. Zbyt częste wywoływanie odświeżania tych bloczków z jednej strony może spowodować spowolnienie ładowania się zwykłej treści, z drugiej nabicie limitu w miesięcznym transferze.
Mam nadzieję, że moje porady przydały się Tobie. Jeżeli nadal masz problemy ze swoim sklepem, to daj znać. Zobaczymy co da się zrobić.
Dodaj komentarz