Od pewnego czasu zauważamy zjawisko jakim jest traktowanie narzędzia Page Speed Insights (PSI) jako kamień milowy w drodze do sukcesu w e-commerce. Wielu e-przedsiębiorców uważa że ocena witryny jest bardzo istotna w kontekście indeksowania jej w wynikach wyszukiwarki dlatego uruchamiają narzędzie dostarczone od Google, test rusza i… wynik świeci się na żółto... lub co gorsze na czerwono. Wtedy pojawiają się obawy co do zainwestowanego budżetu oraz wpływu tej sytuacji na pozycjonowanie i konwersję sprzedaży. Pierwszy wniosek jaki przychodzi na myśl to „mój szablon nie jest zoptymalizowany”.
W odpowiedzi na Twoje obawy chcemy powiedzieć: spokojnie. PSI to nie wyrocznia a szablon to nie wszystko. Zaparz sobie kawę (lub herbatę) i zapoznaj się z naszym artykułem aby dowiedzieć się wielu istotnych informacji.
Kilka słów o PSI
Page Speed Insights bada wydajność strony internetowej bazując na dwóch źródłach danych: rzeczywistych oraz danych laboratoryjnych.
Dane rzeczywiste służą do analizy w oparciu o Chrome User Experience Report (CrUX) który jest bazą informacji na temat odbioru witryn przez użytkowników. Informacje te są zapisywane w CrUX gdy użytkownik (potencjalny klient) wyraził zgodę aby Google zapisało pomiary z jego sesji. Testowany adres jest sprawdzany w raporcie i jeśli są dostępne dane na jego temat to zostają zwrócone.
Pozostałe metryki są badane na podstawie danych laboratoryjnych. Są one zbierane i analizowane przez bibliotekę Lighthouse w kontrolowanym środowisku które obecnie stanowi urządzenie średniej klasy (Moto G4) w sieci komórkowej. Na podstawie tak zebranych danych obliczana jest ocena którą widzisz po zakończeniu testu.
Podczas testowania wpływ na wynik mają min.:
- optymalizacja wszystkich zasobów dołączanych do witryny,
- szybkość odpowiedzi serwera,
- prędkość renderowania strony,
- użycie procesora
i wiele innych. Dosłownie każda zmiana jaka zajdzie w Twoim sklepie – np. zmiana obrazków, treści, szablonu graficznego, dołączenie integracji własnych/aplikacji, lub aktualizacja silnika Shoper – może mieć wpływ na wynik testu.
Ocena Page Speed Insights jest jednak tylko subiektywnym wynikiem opartym na ogólnych kryteriach, które zaleca Google dla Twojej witryny. Nie jest to wykładnia rzeczywistej prędkości Twojego Sklepu, ale przewodnik dobrych praktyk. Niektóre rzeczy, które są powolne podczas automatycznego testowania mogą nie wpływać na rzeczywiste wrażenia klientów, ponieważ mogą to być algorytmy wykonywane w tle, których użytkownik nigdy nie zobaczy. Obniżą one jednak ocenę PSI, ponieważ test odnosi się do czasu ładowania całości witryny nie uwzględniając przy tym realnych odczuć użytkowników. Algorytmy testujące nie uwzględniają również zasobów pamięci CACHE przeglądarki internetowej, choć ma ona istotny wpływ na odbiór witryny przez użytkownika końcowego ponieważ znacząco przyśpieszają wyświetlenie strony, gdy użytkownik odwiedza ją ponownie.
Z naszych obserwacji wynika że niska ocena jest spowodowana zazwyczaj przeładowaniem strony sklepu przez administratora. Dołączanie kolejnych zasobów (zwłaszcza zdalnych) oraz funkcjonalności musi być przemyślane i świadome ponieważ każdy nowy zasób to potencjalne obniżenie oceny.
Optymalizacja – zrób to sam
W tym momencie wielu z Was zapewne zna już raport i ocenę swojego sklepu. W raporcie znajduje się wiele audytów, które mniej lub bardziej enigmatycznie opisują sposoby poprawy sytuacji. Poniżej wyjaśnimy, które audyty możesz poprawić jako administrator.
Wyświetlaj obrazy w formatach nowej generacji
Google zaleca wykorzystanie formatów takich jak JPEG 2000, JPEG XR i WebP ponieważ mogą zapewnić mniejszą wagę pliku przy zachowaniu optymalnej jakości. Spośród tych formatów do Shoper-a można załadować pliki WebP. Jest to zrozumiałe gdyż na chwilę obecną wsparcie dla wspomnianych jpeg-ów na ryku przeglądarek jest marginalne (można to sprawdzić za pomocą portalu caniuse.com). W sieci dostępne są darmowe konwertery które umożliwiają przetworzenie ukochanych png-ów czy jpg-ów na format WebP – wystarczy wyszukać frazę „webp converter”. To co musisz zrobić to przekonwertować grafiki których używasz i wgrać je ponownie do swojego sklepu.
Niestety to nie koniec tematu ponieważ jest druga strona medalu... WebP jest stosunkowo nowym formatem grafiki, a co za tym idzie, nie wszystkie przeglądarki go wspierają. Na dzień powstawania tego artykułu portal caniuse.com wskazuje, że format ten nie jest obsługiwany przez Safari (również w wersji mobilnej) oraz przez Internet Explorer.
Dziadkiem Microsoftu nie musisz i nie powinieneś się przejmować. Z racji swojego wieku nie obsługuje wielu innych standardów i nikt go już nie wspiera – zalecane jest przejście na Edge który jest jego następcą. Co do Safari to decyzja należy do Ciebie. Zadaj sobie pytanie: jak wielu Twoich klientów korzysta z Safari a otrzymasz odpowiedź czy WebP jest dla Ciebie przydatny. W odpowiedzi może pomóc Google Analitics.
Użyj efektywnego kodowania obrazów
Zaliczenie tego audytu sprowadza się do kompresji plików graficznych, które umieszczasz na stronie sklepu – należy zadbać o to, aby ważyły możliwie jak najmniej. W tym celu możesz skorzystać z darmowego narzędzia jakim jest tinypng.com z którego również i my korzystamy, gdy urządzamy nasze sklepy demonstracyjne. Za jego pomocą otrzymasz możliwie najlżejszy plik przy zachowaniu optymalnej jakości. To co musisz zrobić to zoptymalizować obrazy, wgrać je ponownie do sklepu i osadzić na nowo.
Również i w tym przypadku istnieje mały haczyk. Możesz skompresować zdjęcia które umieszczasz za pomocą edytorów treści (czyli moduły użytkownika, artykuły, opisy produktów kategorii itp.) oraz te, które możesz załadować do plików szablonu (logo, tło nagłówka, pliki użytkownika z zakładki „Pliki graficzne”). Natomiast zdjęcia produktów są przetwarzane przez mechanizmy Shoper aby stworzyć miniatury o poszczególnych rozmiarach. W tej kwestii nie posiadamy jednak pełnej wiedzy o tych algorytmach, dlatego nie możemy stwierdzić jednoznacznie czy załadowanie zoptymalizowanego obrazu do produktu spowoduje utworzenie zoptymalizowanych miniatur. Nie ma również kontroli nad grafikami które pobierane są w wyniku integracji z serwisami zewnętrznymi (np. Facebook czy Instagram).
Ogranicz wpływ kodu spoza witryny
Każdy dodatkowy zasób który dołączasz do sklepu, a który znajduje się na zewnętrznym serwerze powoduje dodatkowe obciążenie i opóźnienie w ładowaniu. Musisz więc podjąć decyzję, które integracje własne lub aplikacje są tak naprawdę potrzebne w Twoim sklepie. Zadaj sobie trudne pytanie: co zwiększy konwersję w Twoim sklepie – poprawa PSI o kilka punktów czy funkcjonalność z której korzystasz? Na początek możesz odinstalować aplikacje których nie opłacasz.
Pamiętaj też o korzystaniu z rozwiązań od zaufanych deweloperów, którzy optymalizują swoje rozwiązania. My ze swojej strony dokładamy wszelkich starań, aby wdrażać mechanizmy o minimalnym obciążeniu.
Oczywiście warto sprawdzić, które zasoby opóźniają najbardziej załadowanie strony i zgłosić to autorowi danej funkcjonalności.
Ciekawostka: PSI często wskazuje skrypty, które pochodzą od samego Google, np.: Analytics czy Tag Manager.
Unikaj bardzo dużych ładunków sieciowych
Audyt ten zakłada zminimalizowanie wagi zasobów które dołączasz do sklepu. Dotyczy on plików graficznych oraz wszystkich innych zasobów załączonych na stronie sklepu:
- css
- javascript
- filmy
- muzyka, efekty dźwiękowe (mamy jednak nadzieję że nie robisz tego swoim klientom ;), itp.
Każdy dołączony zasób powinien mieć jak najmniejszą wagę i powinno być ich jak najmniej.
Unikaj zbyt dużego DOM
Zacznijmy od tego czym jest DOM. W prostych słowach są to wszystkie elementy HTML-a Twojego sklepu. Przeglądarka widzi je jako drzewo elementów. Również i w tym przypadku im mniej tym lepiej. Oznacza to, że powinieneś sprawdzić konfigurację poszczególnych elementów Twojej strony. W szczególności zwróć uwagę na:
-
konfigurację menu głównego - jest to element który w naszej ocenie, wśród standardowych funkcjonalności, generuje największą ilość elementów DOM. Dodanie do nagłówka opcji „wszystkie kategorie” powoduje załączenie na prawie wszystkie strony całego drzewa kategorii, gdzie na każdą kategorię przypada ok 6 elementów. Zauważyliśmy również, że niektórzy administratorzy sklepów wraz z opcją „wszystkie kategorie” dodają też obok kategorie główne co powoduje dublowanie zawartości. Konfiguracja menu powinna być przemyślana. Zabieg który możesz zastosować w takiej sytuacji to załączanie linków do kategorii za pomocą opcji „link wewnętrzny” gdzie wpisujesz na sztywno adres URL do kategorii. Dzięki temu możesz uzyskać odniesienie do dowolnej kategorii w sklepie bez generowania menu podkategorii;
-
konfigurację sliderów - często spotykamy się z takimi przypadkami, gdzie w sliderze głównym znajduje się ok 10 banerów. Ilu z was jest na tyle cierpliwych, aby obejrzeć wszystkie? Ilu klientów szukających produktu będzie „miało czas” oglądać pokaz slajdów? W praktyce, po załadowaniu strony klient zobaczy jeden lub dwa banery. Na trzeci spojrzy jeśli naprawdę olśni go oferta lub design. Minimalizacja ilości banerów przyczyni się również do poprawy innych audytów o których pisaliśmy wcześniej;
-
konfigurację modułów produktowych - podobna sytuacja jak z banerami, jednak w tym przypadku wynik PSI jest dodatkowo zależny od położenia modułu w układzie. Zwróć uwagę na to gdzie wstawiasz moduł. Ilość produktów do wyświetlenia powinieneś dobrać w zależności od tego jak dużo zmieści się ich w wierszu. Z naszego doświadczenia wynika, że jest to nie więcej niż 8 produktów. Na przeciętny kafelek produktu ze zdjęciem, nazwą, ceną i przyciskiem koszyka obecnie wypada ok 30 elementów DOM;
-
konfigurację list produktów (na stronie głównej i w kategorii) - musisz dobrać optymalną liczbę produktów do wyświetlenia. Z naszego doświadczenia najlepszą liczbą jest 12 lub 18 dla karty kategorii i 4 – 8 na stronie głównej.
Powyższe zalecenia powinieneś korygować w zależności od tego jaki szablon posiadasz, ponieważ może on modyfikować strefy układu. Metodą prób i błędów musisz „wyklikać” złoty środek w oparciu o posiadany szablon. Powyższe wskazówki stosujemy urządzając nasze sklepy demonstracyjne.
Liczba żądań i ilość przesyłanych danych powinny być małe
Ten audyt jest powiązany z poprzednimi. Jeśli je zaliczysz to prawdopodobnie i ten zostanie zaliczony. Dodamy tylko, że ilość żądań to suma wszystkich obrazków, plików css, js załączonych na stronie sklepu oraz ilość zapytań AJAX wywoływanych przy załadowaniu strony. Powtarzajmy więc jak mantrę - im mniej tym lepiej.
Optymalizacja – my też się staramy
Dalsze optymalizowanie jest możliwe poprzez usprawnianie mechanizmów szablonu czy aplikacji. Do tego jest jednak potrzebne doświadczenie i wiedza techniczna, dlatego tu możesz polegać jedynie na umiejętnościach dostawców oprogramowania z którego korzystasz.
Nasze produkty stale rozwijamy i wdrażamy do nich kolejne usprawnienia mające na celu optymalizację. Jest to jednak proces trudny i wymagający czasu więc nie wszystko da się wprowadzić „od ręki”. Sprawdź więc co my zrobiliśmy dla Twojego sklepu w zakresie optymalizacji PSI.
Wyeliminuj zasoby blokujące renderowanie
Blokowanie renderowania polega na tym, że przeglądarka pobiera najpierw HTML i zaczyna go przetwarzać. Gdy natrafi na element stanowiący odniesienie do źródła zewnętrznego to zatrzymuje przetwarzanie aby pobrać ten zasób a gdy zakończy pobierać, wznawia proces. Im więcej takich zasobów jest w Twoim sklepie, tym więcej czasu potrzeba aby wyrenderować stronę.
Nasze szablony oraz aplikacje zawierają usprawnienia dzięki którym minimalizujemy ilość zasobów przez co ułatwiamy zaliczenie tego audytu.
Odłóż ładowanie obrazów poza ekranem
Zaliczenie tego audytu wymaga implementacji techniki zwanej lazyloading. Domyślnie w Shoperze jest to wdrożone, jednak tylko dla zdjęć produktów. W naszych szablonach (Infinity Pro, Umbrella, Cameleon) rozszerzyliśmy to działanie na moduły specjalne które bazują na funkcjonalności modułu użytkownika. Przykładowo grafiki stref pełnoekranowych w Umbrelli ładowane są z wykorzystaniem tej techniki. Dzięki temu wchodząc na stronę sklepu nie pobieramy od razu wszystkich obrazków (które są stosunkowo ciężkie z uwagi na ich wymiary) osadzonych za pomocą tych modułów, tylko pobierane są pojedynczo w miarę przewijania ekranu. Analogicznie stosujemy ten zabieg w innych modułach wymagających grafiki które są charakterystyczne dla poszczególnych szablonów.
Zapewnij widoczność tekstu podczas ładowania czcionek internetowych
Czcionki są zasobem zewnętrznym, który musi być pobrany - a to zajmuje chwilę w zależności od tego, gdzie znajdują się pliki i jak szybko są pobierane. Istnieje więc moment podczas przetwarzania Twojej witryny w którym tekst jest niewidoczny, ponieważ nie ma jeszcze załadowanych czcionek. Aby wyeliminować ten problem należy zdefiniować reguły załączające czcionki do szablonu, które „mówią” przeglądarce że może tymczasowo użyć czcionki systemowej, dopóki nie pobierze tej właściwej. Oczywiście w naszych szablonach jest zastosowane to rozwiązanie w definicjach czcionek które osadzane są przez nas.
Pozostałe audyty
Raport PSI zawiera wiele innych audytów o których nie wspomnieliśmy ponieważ są zoptymalizowane standardowo lub dotyczą mechanizmów do których nie ma dostępu, lub też wdrożenie usprawnień w ich kierunku spowodowałoby kilkukrotny wzrost kosztu utrzymania szablonu.
Podsumowując
Niektórzy z Was mogą zapytać: „Skoro wiecie co można zrobić w temacie optymalizacji to dlaczego nie macie w ofercie takiej usługi?”. Odpowiedź jest prosta: sytuacja każdego sklepu jest sprawą indywidualną a wdrożenie wszystkich wspomnianych wskazówek nie gwarantuje stałego utrzymania oceny ani spektakularnego jej podniesienia. Nie daje również gwarancji podniesienia konwersji zakupów. Optymalizacja sklepu to szereg wyborów które musisz stale podejmować podczas urządzania swojego sklepu. Decyzje powinieneś podejmować samodzielnie ponieważ ostatecznie to Ty wiesz co jest najlepsze dla Twojego biznesu: dobra ocena PSI czy atrakcyjny i funkcjonalny wygląd sklepu.
Jako administrator sklepu Shoper masz dość istotny wpływ na ocenę PSI. Planując zawartość na stronie swojego sklepu powinieneś podejść do tego ze zdrowym rozsądkiem i dobrać rozwiązania wg potrzeb. Pamiętaj jednak, że każdy dodatkowy zasób dodajesz za cenę obniżenia oceny prędkości strony. Musisz zatem sam zdecydować co w Twoim przypadku przyniesie lepszą konwersję sprzedaży – innowacyjne rozwiązania i atrakcyjny sklep czy wysoka ocena prędkości.