Szybkość ładowania się sklepu internetowego jest jedną z rzeczy iście priorytetowych. Takich, o które trzeba zadbać w pierwszej kolejności. Współczesny odbiorca nie należy do najmniej wymagających. Szybko się zniechęca, rezygnując z zakupów w wolno działającym sklepie internetowym. Dlatego też musisz zadbać o to, by zaserwować mu swoje treści tak szybko, jak tylko się da. Tak, aby nie tylko utrzymać jego uwagę, ale i przekonać go do szybkiego dokonania zakupu. W ten sposób nie tylko poprawisz szeroko pojętą jakość Twojej strony, ale też zwiększysz swoje przychody.

Jednym z narzędzi coraz chętniej używanych do poprawy szybkości ładowania się sklepu czy strony jest PageSpeed Insights. Czy jednak rzeczywiście jest ono godne zaufania? Czy warto zmierzać w nim ku najlepszemu wynikowi PageSpeed 100/100 i wreszcie czy należy z niego skorzystać? Odpowiedzi szukaj w naszym dzisiejszym wpisie.

1. PageSpeed Insights – jak tak właściwie działa to narzędzie?

PageSpeed Insights to narzędzie, które zostało zaprojektowane przez samo Google. Stworzone zostało z myślą o dostarczaniu właścicielom sklepów i stron internetowych cennych informacji na temat ich czasu wczytywania się. System działa w sposób prosty i intuicyjny. Wystarczy wprowadzić w jego obręb adres URL strony, którą się sprawdzi i… gotowe. Narzędzie samodzielnie przeanalizuje tę stronę i oceni ją w skali x/100. Sto punktów oznacza najwyższy wynik i w pełni dostosowaną do wszystkich wytycznych stronę lub sklep.

Oprócz całościowej i niewiele mówiącej oceny narzędzie dostarcza również podpowiedzi związane z tym, co da się poprawić i zmienić, by uzyskać lepszy wynik. Jak udowodniła praktyka, większość użytkowników na ślepo za tym podąża. Stara się tym samym jak tylko może, by osiągnąć wynik jak najbliższy “setce”. Tak naprawdę jednak w wielu podpowiedziach ze strony Google’a można znaleźć elementy dyskusyjne. Dlatego też najlepiej jest podejść do tego z głową, samemu zastanawiając się nad tym, co tak właściwie może mieć w tym wszystkim znaczenie.

1.1. Czy PageSpeed Insights odzwierciedla szybkość działania strony?

Rzeczą podstawową, a jednocześnie bardzo ciekawą jest to, w jaki sposób PageSpeed Insights tak właściwie mierzy szybkość wczytywania się konkretnej strony czy sklepu internetowego. Google nigdy tego nie sprecyzowało, dlatego też można nieco podważać sam w sobie wynik. O ile więc porady mogą okazać się trafne, ogólna ocena nie powinna być wyznacznikiem jakości właśnie pod względem szybkości ładowania.

Największą wadą PageSpeed Insights jest odejmowanie punktów również za rzeczy dość sporne. Załóżmy, że Twój klient musi wczytać duży plik (na przykład wysokiej jakości zdjęcie) ze strony Twojego produktu. Nie chcesz go zmniejszyć, gdyż mogłoby to spowodować spadek jakości. Automatycznie odjęte Ci zostaną punkty. Tymczasem jednak w dzisiejszych czasach wczytywanie takich plików nie jest problemem. Z tym jednak, że PageSpeed Insights ogranicza sobie prędkość łącza, z którego pobiera strony do 1,6 Mbit/s. To właśnie tę prędkość traktuje jako standardową. Wcale taką nie jest, a według Wikipedii wszystkie kraje świata (poza Paragwajem i Irakiem) posiadają średnio szybszy Internet. W Polsce na przykład jest on aż jedenastokrotnie szybszy. To, co Google uzna więc za wolne, przeciętny użytkownik zobaczy znacznie szybciej.

Taki stan rzeczy niesie ze sobą więcej konsekwencji. Jeżeli więc narzędzie pokaże, że dane zdjęcie można dodatkowo skompresować, by przyspieszyć działanie strony o 5 sekund, w rzeczywistości może wpłynąć na szybkość w niewielkim stopniu. Takim, który po prostu nie będzie wart zachodu i straty jakości.

PageSpeed Insights nie jest też w stanie odróżnić asynchronicznie ładowanych elementów od innych. Jeżeli zatem ma się na stronie skrypt wyświetlający reklamę i robi on to powoli, zdeterminuje szybkość ładowania się strony dla tego narzędzia. W rzeczywistości skrypt ten nie będzie miał wpływu na załadowanie samego sklepu czy strony, a zaledwie reklamy. Nie wpłynie więc negatywnie na klienta czy odwiedzającego.

Choć Google Insights dostarcza przydatnych informacji, nie może być traktowane jako główna wytyczna. Ma wiele wad i warto mieć to na uwadze.

2. Sugestie ze strony PageSpeed Insights – czy brać je na poważnie?

Badając własny sklep internetowy w PageSpeed Insights uzyskuje się nie tylko dość enigmatyczny wynik w stustopniowej skali punktowej. Przede wszystkim dostaje się wiele porad optymalizacyjnych. Takich, które mają za zadanie przyczynić się do poprawy szybkości wczytywania się tego właśnie sklepu. Porady te zostaną podzielone na dwa segmenty. W pierwszym można zobaczyć wszystko związane z mobilną wersją sklepy i tym, jak ona się wczytuje. W drugim zaś widać jest to samo, ale dla wersji komputerowej.

Wiele porad serwowanych przez narzędzie może być cenne. Należy jednak brać pod uwagę pewne ograniczenia związane z narzędziem i to, że nie bierze ono pod uwagę pewnych aspektów. Poniżej wyszczególniamy wybrane porady z tego właśnie narzędzia. Podpowiadamy, czy aby na pewno warto je wdrożyć w życie. A może lepiej po prostu przełknąć stratę kilku punktów w ostatecznym rozrachunku?

Warto wiedzieć: poniżej prezentujemy porady, które niekoniecznie opłaca się wdrożyć w sugerowanej przez Google formie. Nie chcemy przez to powiedzieć, że nie powinieneś stosować się do porad z narzędzia PageSpeed Insights. Nie możesz jednak się ich kurczowo trzymać i uważać ich za wyrocznię i dążyć do PageSpeed 100/100 . Jako że większość działań wymaga ingerencji w kod i szerokiej wiedzy, przemyśl powierzenie optymalizacji profesjonalistom. My zajmujemy się nią od dawna i wiemy doskonale, czego Twój sklep może potrzebować, by działał szybciej i generował więcej sprzedaży.

2.1. Unikaj bardzo dużych ładunków sieciowych

Jest to podpowiedź, którą co prawda można wziąć pod uwagę, ale nie zawsze. Zazwyczaj tyczy się ona zdjęć, których rozmiar jest za duży (a przez to ich załadowanie może trwać dłużej). Ciężko jest tak naprawdę coś z tym zrobić. Zmiana rozmiaru zdjęcia to bowiem najczęściej również zmiana jego jakości. Ta zaś wpływa na prezentację konkretnego produktu w sklepie internetowym.

“Duże ładunki sieciowe” tyczą się również skryptów JavaScript. Tutaj też niewiele da się zrobić. Można zoptymalizować te skrypty, usunąć z nich białe spacje i entery. Tak naprawdę jednak całkowite ich wyeliminowanie ograniczałoby funkcjonalność sklepu. Tego zaś nigdy nie chce się robić.

Tę poradę warto wdrożyć w życie, jeśli posiada się na swoim sklepie niepotrzebne, a przy okazji zbyt duże pod względem rozmiaru zdjęcia. Jeśli zaś chodzi o skrypty, powinno się wyrzucić te, z których tak właściwie się nie korzysta. Wiele z nich da się też zastąpić lżejszymi ich wersjami.

2.2. Użyj efektywnego kodowania obrazów

Według Google właściciele sklepów i stron internetowych powinni maksymalnie kompresować obrazy przed zaserwowaniem ich użytkownikom. W tym punkcie chodzi mu przede wszystkim o rozwiązanie konsolowe, pozwalające na zmniejszenie rozmiaru obrazów. Tymczasem jednak PrestaShop tworzy miniaturki i inne pliki graficzne przy użyciu biblioteki GD (PHP). W ten sposób często nie tworzy optymalnych plików. Jest to jednak bardzo wygodne, bo i automatyczne rozwiązanie. Tworząc miniatury samemu i podmieniając je w folderach niewiele się zyska. Po wprowadzeniu jakichkolwiek zmian bowiem te i tak zostaną podmienione.

Teoretycznie istnieją rozwiązania do efektywniejszego generowania obrazów. Tak naprawdę jednak PageSpeed Insights bardzo zawyża znaczenie tego aspektu w optymalizacji. Jeśli więc nie chce się wkładać w to wszystko mnóstwo czasu i pracy, można to pominąć (choć wpłynie to, oczywiście, na wynik).

2.3. Wyeliminuj zasoby blokujące renderowanie (by osiągnąć PageSpeed 100/100)

Zastosowanie się do tej porady jest dość ciężkie, choć rzeczywiście jest w stanie wpłynąć na tempo (i sposób) wczytywania się konkretnej strony. Google chodzi o to, by podzielić arkusz CSS na dwie części. Krytyczna to ta, która będzie dotyczyć górnej części strony (tej, która pokazuje się na ekranie od razu). Niekrytyczna zaś tyczy się całej reszty. Nie zawsze jest to jednak możliwe. W typowych szablonach (nie tylko tych starszych) PrestaShop kod w arkuszach CSS miesza się lub stosuje w powiązanych ze sobą blokach. Należy do tego dopisać to, że każdy moduł może posiadać swój własny plik CSS. To zaś zaburza cały koncept. Aby więc spełnić wymagania tego punktu, trzeba wprowadzić bardzo wiele zmian.

W większości przypadków punktu tego nie trzeba wdrażać w życie. Korzyści płynące z niego są bowiem niewspółmiernie niskie. Zwłaszcza przy zestawieniu ich z czasem, jaki należy w to włożyć. Stratę kilku punktów w ostatecznych wynikach PageSpeed Insights można tu przeboleć.

2.4. Unikaj zbyt dużego DOM / Zminimalizuj aktywność głównego wątku

Obie te porady są bardzo ciężkie do zastosowania w praktyce. Można się na nie zdobyć i rzeczywiście potrafią one przynieść bardzo duży skok w szybkości wczytywania się strony czy sklepu. Wymagają jednak wdrożenia mniejszych i większych uproszczeń w ich zakresie. Te zaś nie zawsze będą pożądane. Większość właścicieli sklepów będzie wolała stracić kilka punktów w wyniku w narzędziu PageSpeed Insights, aniżeli usuwać ważny slider czy inny element i osiągnać PageSpeed 100/100. Również czysto estetyczny, a nie użytkowy.

2.5. Zmień rozmiar obrazów

Na tym polu jest wiele do zrobienia w przypadku zdecydowanej większości sklepów internetowych. Ten punkt jest jak najbardziej zasadny. Zwłaszcza biorąc pod uwagę fakt, że większość sprzedawców wrzuca zdjęcia swoich produktów “prosto z aparatu”. Te potrafią mieć olbrzymią rozdzielczość – znacznie większą od tej rzeczywiście potrzebnej. Jej zmiana jest w stanie znacząco wpłynąć na ich wagę i szybkość wczytywania się.

Problemy mogą zauważyć właściciele sklepów internetowych, w których zdjęcia produktów można wyświetlić na pełnym ekranie. Zbyt mała ich rozdzielczość może doprowadzić do nieczytelności na większych monitorach użytkowników. Mimo wszystko jednak w tym przypadku warto pomyśleć nad znalezieniem złotego środka.

2.6. Usuń nieużywany kod CSS

Jest to porada bardzo cenna i rzeczywiście mająca swoje odbicie w rzeczywistości. Choć można byłoby przypuszczać, że tekstowy kod CSS nie ma wielkiego wpływu na szybkość wczytywania się sklepu, może być zgoła odmiennie. Zwłaszcza że w obrębie PrestaShop łatwo z nim przesadzić – chociażby instalując wtyczki, z których tak właściwie się nie korzysta.

Jeżeli więc PageSpeed Insights rzeczywiście pokaże kod, którego się nie używa, warto pomyśleć nad jego usunięciem. Nie należy jednak robić tego bezmyślnie. Zwłaszcza że wiele fragmentów kodu CSS może być odpowiedzialne za elementy, które ciężko jest wychwycić na pierwszy rzut oka.

Google PageSpeed Insights często uznaje kod za nieużywany tylko dlatego, że nie posiada elementów korespondujących z nim na stronie głównej sklepu. Kod ten może się jednak tyczyć podstron. Dlatego też tak ważne jest zachowanie tutaj uwagi.

Jeśli nie ma się pewności co do zastosowania fragmentów kodu CSS, a wychwyconych problemów w tym zakresie nie jest dużo, warto pominąć tę poradę. Jeśli jednak rzeczy jest bardzo wiele, a kod sklepu jest przestarzały, powinieneś przemyśleć jego budowę od podstaw.

Nasza firma pomoże Ci podjąć odpowiednią decyzję i opracować Twój sklep od podstaw by osiągnać PageSpeed 100/100. W tym konkretnym punkcie zadbamy o to, by w jednym pliku CSS zamieścić wszystko to, co musi widnieć na każdej podstronie, a w innych plikach – kod charakterystyczny dla innych podstron. Dzięki temu będziesz miał pewność, że klient wczytuje tylko to, czego potrzebuje do wyświetlenia podstrony. Zrobi to znacznie szybciej.

2.7. Zapewnij widoczność tekstu podczas ładowania czcionek internetowych

Ta podpowiedź jest cenna, gdyż wpływa nie tylko na szybkość wczytywania sklepu, ale i na tak zwany “user experience“. Aktualnie wielu właścicieli sklepów wykorzystuje biblioteki czcionek dodatkowych (takich jak Google Fonts). Te są zaciągane z Internetu każdorazowo przy wczytywaniu sklepu. W momencie ich wczytywania się tekst nie jest widoczny. Klient musi zatem poczekać, by te się wgrały. Często jest to po prostu bezsensowne. Dlatego tak istotne jest stworzenie reguł dla alternatywnych czcionek. Na początku tekst powinien być sformatowany w jednej z czcionek systemowych (takie, którą dany użytkownik na pewno ma na dysku). Dopiero później czcionka ta powinna się podmieniać na tę ściągniętą z Internetu (a zatem docelową).

Zmianę tę łatwo jest wprowadzić dla standardowego tekstu i zbliżyć się do PageSpeed 100/100. Nie poleca się jednak robić tego dla tekstowych bibliotek ikon (takich jak Font Awesome). W ich przypadku nie ma bowiem alternatywy tekstowej. Lepiej jest zatem wstrzymać się z ich wyświetlaniem niż wyświetlać element bliżej nieokreślony, mogący zwieść potencjalnego odbiorcę.

2.8. Odłóż ładowanie obrazów poza ekranem

Tak zwany “lazy loading” był niegdyś czymś niesamowicie popularnym. Aktualnie jest polecany przez Google – i łatwo jest zrozumieć stojące za tym przyczyny. W założeniach ma on wczytywać obrazy na łamach sklepu dopiero wtedy, gdy te znajdą się na ekranie użytkownika (a nie standardowo, gdy tylko otworzy się tę stronę). To z kolei skraca czas potrzebny na załadowanie tego, co widzi klient od razu po wejściu na sklep.  Okazuje się, że nie zawsze dobrym rozwiązaniem jest “doczytywanie obrazów” wraz z przewijaniem strony.

Wszystko ze względu na to, że przeglądarka i tak ładuje zdjęcia asynchronicznie. Wczytanie każdego z nich od razu nie musi mieć negatywnego wpływ na szerzej pojętą szybkość wczytywania się. Bez lazy loadingu użytkownik nie będzie musiał czekać na to, aż zdjęcia po przewinięciu się załadują. Lazy loading jednak zmniejsza transfer sieciowy. Bardzo rozsądnie jest więc wprowadzić go w wersji mobilnej sklepu. W Polsce Internet mobilny wciąż jest ograniczony względem transferu.

Lazy loading wymaga sporej ilości rozwiązań w zakresie własnego sklepu. Trzeba stworzyć tak zwany “placeholder” dla obrazów o danym rozmiarze. Będzie się on wyświetlał na etapie wczytywania (może to więc być standardowy loader). Dzięki niemu pozycja paska przewijania nie będzie się zmieniała po doładowaniu obrazu. W sklepach z responsywnymi motywami może się to okazać dość problematyczne.

Lazy loading to zatem coś potrafiącego wpłynąć dobrze na zadowolenie klientów. Ma jednak pewne wady i na pewno jest czymś do rozważenia (a nie do bezmyślnego wprowadzania i osiągnięcia wyniku PageSpeed 100/100).

2.9. Wyświetlaj zasoby statyczne, stosując efektywne zasady pamięci podręcznej

Pamięć podręczna jest czymś, z czego warto korzystać. W każdym przypadku. Tak naprawdę jednak założeń tego punktu nie da się wprowadzić w życie w sposób efektywny. Taki, który wpłynie na doznania klientów, którzy dopiero zajrzeli na łamy sklepów.

Aby to pojąć, należy zrozumieć działanie pamięci podręcznej. Ta sprawia, że elementy statyczne są “chowane” w pamięci przeglądarki konkretnego klienta. Dzięki temu ich jednorazowe załadowanie wystarczy, by później nie musiał ich już wczytywać. Stąd też możliwość przeglądania tej samej strony w trybie online (bo zwykle większość ich elementów zapisała się za pierwszym razem).

Mimo że wprowadzenie cache’owania jest rozsądne i rzeczywiście przydatne, nie wpłynie na szybkość działania sklepu internetowego z perspektywy nowego użytkownika. Na pewno zostanie jednak docenione przez stałych bywalców.

2.10. Wyświetlaj obrazy w formatach nowej generacji

Jest to porada dość cenna i przydatna na przyszłość, jednak w bardzo wielu przypadkach po prostu nieopłacalna. Google sugeruje, aby na serwerze przechowywać dwie wersje każdego zdjęcia. Jedna będzie w standardowym i “normalnym” formacie (pokroju PNG czy JPG), a druga – w formacie nowej generacji (najczęściej WebP). Ta druga, znacznie lepiej zoptymalizowana, będzie serwowana użytkownikom korzystającym ze wspierającej ją przeglądarki. Pierwsza – w każdym innym przypadku.

Alternatywą dla ręcznego tworzenia dwóch wersji pliku jest wdrożenie rozwiązania automatycznego, samodzielnie generującego WebP ze standardowego formatu. Trzeba jednak wiedzieć, że rozwiązanie to:

  • wymaga potężniejszego serwera, który będzie w stanie podołać temu zadaniu,
  • zwiększa obciążenie serwera, mogąc prowadzić do jego wolniejszego działania,
  • nie obsługuje zdjęć wstawianych za pośrednictwem JavaScriptu.

Wpływ tego typu optymalizacji na szybkość działania sklepu internetowego po raz kolejny jest dość niewielki. Na pewno zaś jest niewspółmierny do wysiłku, który trzeba tu wykonać. Również tutaj warto przemyśleć, czy chce się w to bawić i osiągać winik PageSpeed 100/100.

3. PageSpeed Insights a SEO

Będąc właścicielem sklepu internetowego z pewnością zastanawiasz się, czy narzędzie PageSpeed Insights jest w stanie pomóc Ci w SEO. Odpowiedź na to pytanie jest prosta: szybkość strony jest uważana za jeden z czynników rankingowych. Zwłaszcza w kontekście mobilnych wyników wyszukiwania. Jak jednak sugerują oficjalne “Wskazówki dla webmasterów” od Google, tylko najwolniejsze strony odczują spadek pozycji. W dodatku szybkość nie jest ważnym czynnikiem w wielu wynikach wyszukiwania (a zaledwie w tych pod najbardziej konkurencyjnymi frazami). Choć podejście Google do tematu szybkości zmienia się w czasie, w 2018 roku firma wciąż mówiła o obniżaniu pozycji stronom najwolniejszym. Można to wciąż uznawać za aktualne. Według tego zaś strony najszybsze nie zyskają nic w kontekście SEO.

Powyższe tyczy się przede wszystkim mobilnych wyników wyszukiwania. Wiele w przypadku wyników w obrębie komputerów wskazuje na to, że szybkość wczytywania się strony jest czymś istotnym. Czymś, dzięki czemu sklep internetowy jest w stanie zyskać w oczach Google. Tak naprawdę jednak tajemnicą jest to, jak wyszukiwarka wylicza tę szybkość. Wcale nie musi tego robić na podstawie narzędzia PageSpeed Insights.

4. Czy zmierzanie ku 100/100 w PageSpeed Insights ma sens?

Właściciele sklepów internetowych często obsesyjnie zmierzają w kierunku zdobycia maksimum możliwych punktów w wynikach narzędzia PageSpeed Insights. Choć jednak może taki wynik wygląda świetnie i jest czymś, czym można się pochwalić, nie powinien on być priorytetem. Zwłaszcza że narzędzie to nie należy do doskonałych. Wynik zaś jest wypadkową wielu czynników, wiele spośród których jest kuriozalnych. Wystarczy jedno większe zdjęcie lub element multimedialny, by ten poszedł gwałtownie w dół.

Czy osiągnięcie wyniku PageSpeed 100/100 jest możliwe? Zdecydowanie tak. Można bowiem podążać za każdą rekomendacją ze strony Google, powoli pracując nad każdym kolejnym sugerowanym jej elementem. Nie zawsze jednak ma to sens. Działania optymalizacyjne przydają się. Co do tego nie ma żadnych wątpliwości. Przesadzenie z nimi może jednak wpłynąć źle na sklep internetowy. W końcu, przykładowo, zdjęcia produktów powinny odznaczać się najwyższą jakością (mimo że będą ważyć więcej). Nawet kosztem paru punktów mniej w Google PageSpeed Insights.

Do zaleceń uzyskiwanych za pośrednictwem usługi powinno się zatem podchodzić z głową na karku. Wszystkie są cenne i wartościowe – nie każde z nich jednak dostosowane jest do realiów. Nie żyjemy w sterylnym i utrzymywanym przez Google środowisku. Ważne jest więc, by działania optymalizacyjne przynosiły rzeczywisty i zauważalny wzrost szybkości, a nie punktów w narzędziu. To ta pierwsza matu w końcu największe znaczenie.

5. Podsumowanie

Google PageSpeed Insights to narzędzie popularne i z pewnością bardzo użyteczne. Jest w stanie dostarczyć wielu podpowiedzi optymalizacyjnych. Zawsze jednak należy brać na nie poprawkę i rozważać ich zasadność by osiągnać wynik PageSpeed 100/100. Szybkość wczytywania odgrywa istotną rolę w przypadku sklepów internetowych. Nie tylko wpływa na zadowolenie klientów, ale i na ilość odrzuceń. Nie można jej ignorować, a powinno się nadawać jej priorytet. Właśnie przed właściwą optymalizację. Należy przy tym patrzeć na rzeczywistą szybkość, nie zmierzając za wszelką cenę do osiągnięcia najlepszego wyniku w narzędziu od Google’a.

Wiele poprawek optymalizacyjnych wymaga odpowiedniej wiedzy i rozwiązań w obrębie kodu sklepu internetowego. Mnóstwo błędów wpływających na szybkość może z kolei mieć źródło w dezaktualizowanym kodzie. Nasza firma jest w stanie zaradzić w każdej sytuacji. Zoptymalizujemy Twój sklep działający na platformie PrestaShop lub / oraz zaktualizujemy ją do najnowszej wersji. Jeśli zaś zajdzie taka potrzeba, zbudujemy go od podstaw. Tak, aby działał szybko, sprawnie. Optymalnie. Sięgnij po kontakt z nami, przedstaw nam swoją sytuację. My zaś podsuniemy Ci rozwiązanie, które na pewno Ci się spodoba. Ostatecznie zaś zwiększy ono Twoją sprzedaż i zadowolenie klientów z działania Twojego sklepu.

Astrabit

Projektujemy profesjonalne, indywidualne i zaawansowane sklepy internetowe oparte o silnik Prestashop. Jeśli jesteś zainteresowany stworzeniem lub aktualizacją sklepu internetowego zadzwoń 513 515 107, albo skorzystaj z darmowego konfiguratora, aby otrzymać informację cenową.