Page speed: 11 porad, jak zmierzyć oraz poprawić szybkość strony w e-commerce

Wolno ładujące się strony plasują się na zdecydowanie niższych miejscach w wyszukiwarce, a przy tym generują o wiele niższe przychody, a wyższe koszty. Bez względu na obszar działalności Twojej firmy – jeżeli jest obecna online, jedną z najlepszych rzeczy, jakie możesz dla niej zrobić, jest optymalizacja szybkości wczytywania witryny. Przełoży się to zarówno na spadek współczynnika odrzuceń, jak i wzrost współczynnika konwersji.

Szybkość ładowania strony ma szczególne znaczenie w branży e-commerce. Poświęcenie czasu i zasobów, aby osiągnąć w tym zakresie wspaniałe wyniki to zawsze dobra decyzja. Badania pokazują, że szybkość stron (ang. page speed) ma znaczny, bezpośredni wpływ na pozycję stron w rankingach wyszukiwań oraz ich konwersje.

Internetowi sprzedawcy niechętnie dokonują jednak poświęceń w imię wprowadzenia zmian na tym polu. Dzieje się tak, ponieważ optymalizacja szybkości ładowania strony sprawia wrażenie naprawdę skomplikowanej. Uwagi domaga się wiele różnych obszarów, a znaczna ich część wymaga umiejętności programowania – jakiej większość ludzi, niestety, nie posiada.

Jeżeli czujesz to, co oni – nie przejmuj się. W tym przewodniku omówimy wszystko, co powinieneś wiedzieć na temat optymalizacji czasu ładowania strony (ang. page load time) – od kompresji obrazów, przez systemy dostarczania treści aż po optymalizację serwerowych baz danych. Znajomość absolutnych podstaw pozwoli Ci poczuć się na tyle pewnie, aby nadać swojej witrynie prędkość światła. Nawet, jeżeli nie masz bladego pojęcia o programowaniu czy optymalizacji.

Oto, co znajdziesz w tym artykule:
Czym właściwie jest szybkość strony?
Dlaczego szybkość strony ma znaczenie?
Jak sprawdzić aktualną szybkość strony: omówienie wyników Google PageSpeed ​​Insights
O ile rośnie konwersja – twarde dane z e-commerce 2025
Najlepsze metody zwiększania szybkości strony (ang. page speed) z wykorzystaniem danych
1. Sprawdź (i popraw!) szybkość dostawcy usług hostingowych
2. Optymalizuj obrazy
3. Włącz buforowanie przeglądarki
4. Pamiętaj o minifikacji HTML, JavaScript i CSS
5. Wykorzystaj przyspieszone strony mobilne (AMP, ang. Accelerated Mobile Pages) oraz aplikacje progresywne (PWA, ang. Progressive Web Apps)
6. Pozbądź się nieefektywnych wtyczek do WordPress’a
7. Wykorzystaj systemy dostarczania treści (CDN, ang. Content Distribution / Delivery Network)
8. Optymalizuj czas odpowiedzi serwera
9. Kompresuj, co tylko możliwe
10. Ładuj pliki asynchronicznie zawsze, gdy jest to możliwe
11. Ogranicz przekierowania
Narzędzia, które pomogą zwiększyć szybkość strony
Czy jesteś gotowy, aby poprawić szybkość strony e-commerce?

Brzmi dobrze? No to zaczynajmy!

Czym właściwie jest szybkość strony?

Wokół pojęcia “szybkość witryny” narosło kilka nieporozumień. Zanim przejdziemy do istoty tematu, zdefiniujmy zatem kilka kluczowych pojęć.

Przede wszystkim istotne jest, aby potrafić rozróżnić „szybkość strony” od „szybkości witryny”. Szybkość strony (ang. page speed) jest to czas potrzebny na załadowanie konkretnej, pojedynczej strony w witrynie. Szybkość witryny jest to natomiast średnia szybkość stron w całej witrynie.

Pod wieloma względami rozróżnienie to jest arbitralne, warto to jednak zrozumieć, aby uniknąć niepotrzebnych nieporozumień. Ten post ma na celu dostarczenie porad dotyczących optymalizacji zarówno dla pojedynczych strony, jak i dla całej witryny. Dzięki wdrożeniu najlepszych praktyk (które przydadzą się również w przyszłości przy projektowaniu nowych stron) poprawisz ogólną szybkość witryny – która jest kluczowa.

Szybkość strony można zmierzyć na dwa sposoby: za pomocą czasu ładowania strony (ang. page load time) – czyli czasu potrzebnego do pełnego renderowania strony – lub czasu do pierwszego bajtu (TTFB, ang. time to first byte) – który oznacza czas potrzebny przeglądarce na otrzymanie pierwszego bajtu danych z serwera. Na ogół to właśnie czas ładowania strony (w różnych wariantach) daje dokładniejsze wyniki i jest najpowszechniej stosowaną miarą, czas do pierwszego bajtu ma jednak swoje zastosowanie w określonych sytuacjach.

Dlaczego szybkość strony ma znaczenie?

Szybkość wczytywania stron (ang. page speed) wpływa na wszystkie kluczowe aspekty Twojej strony – jej pozycję w rankingach wyszukiwań, zaangażowanie użytkowników, a nawet konwersje. Wielu webmasterów – wśród nich sprzedawcy internetowi – pomija jednak ten, tak istotny przecież, aspekt swoich witryn.

Długi czas ładowania ma bezpośrednie przełożenie na wyniki.

Poprawa szybkości witryny należy do najpewniejszych sposobów na uzyskanie przewagi konkurencyjnej. Przyjrzyjmy się, co za tym stoi:

Szybkość strony (page speed) wpływa na rankingi wyszukiwań

Szybkość witryny jest jednym z głównych czynników rankingowych Google’a – o czym wielokrotnie otwarcie mówiło samo Google. Liczne niezależne analizy są w tej kwestii zgodne – szybkość strony to jeden z najważniejszych obszarów optymalizacji SEO.

Jak pisze Edwin Toonen, pisząc dla Yoast: „Nie trzeba nawet wytężać słuchu – ludzie od SEO wprost krzyczą: szybkość strony jest najważniejsza. Nie ma dnia, w którym nie pojawiłby się nowy artykuł, raport czy przedstawiciel Google tudzież ekspert ds. SEO mówiący, że optymalizacja szybkości strony jest jedną z najważniejszych rzeczy, które możesz zrobić już dziś. I oczywiście – mają rację!”

Szybkość strony wpływa na współczynnik odrzuceń (ang. bounce rate)

Ludzie częściej opuszczają witrynę, jeśli jej wczytywanie zajmuje zbyt dużo czasu. Czynność ta stanowi negatywny sygnał dla Google (wskazuje przecież na niskie zaangażowanie klientów), ale też przede wszystkim wpływa bezpośrednio na współczynnik konwersji.

Jeżeli Twoi klienci stracą cierpliwość przed załadowaniem strony, nie będą mieli szansy ujrzeć nawet najlepiej zaprojektowanej, zoptymalizowanej witryny i jej doskonałych produktów.

Szybkość strony wpływa na wartość życiową klienta (CLV, ang. Customer Lifetime Value)

Badania pokazują, że liczba odsłon wzrasta wraz z szybkością ładowania stron. Co ważne – nie mówimy tu jedynie o kilku punktach procentowych. Skrócenie czasu ładowania strony do jednej sekundy może zwiększyć wartość wyświetlenia strony o nawet 100%!

Skrócenie czasu ładowania strony do jednej sekundy może zwiększyć wartość wyświetlenia strony o nawet 100%!

Niska prędkość strony wywołuje negatywne efekty psychologiczne

Wolno ładujące się strony internetowe wywołują u klientów frustrację, a także sygnalizują brak profesjonalizmu całej firmy.

Gdy ładowanie strony trwa zbyt długo, ludzie zaczynają odczuwać autentyczny stres. Kiedy zaś potencjalny klient kojarzy już Twoją markę z negatywnym doświadczeniem, najprawdopodobniej jej postrzeganie w przyszłości nie będzie kształtować się najlepiej.

Ten sam mechanizm działa jednak i w drugą stronę: szybko ładująca się witryna zapewnia klientom pozytywne doświadczenia, komunikuje profesjonalizm Twojego sklepu i wysoką jakość produktów.

Jak sprawdzić aktualną szybkość strony: omówienie wyników Google PageSpeed ​​Insights

Obecnie znaleźć możemy naprawdę szeroki wachlarz narzędzi do testowania szybkości witryny. Niektóre z nich koncentrują się na konkretnych obszarach – takich jak szybkość dostawcy DNS czy czas do pierwszego bajta (TTFB) – inne są natomiast bardziej wszechstronne. Naszym zdaniem nie ma jednak lepszej opcji na początek niż Google PageSpeed ​​Insights.

Oto, w jaki sposób możesz dogłębnie przebadać swoją witrynę oraz zinterpretować otrzymane wyniki:

1. Otwórz Google PageSpeed ​​Insights i wpisz swój adres URL w polu tekstowym. Kliknij „Analizuj”, aby uzyskać wyniki.

Zappos posłuży nam w tym instruktażu za przykład. Google PageSpeed Insights, prawdopodobnie najlepsze narzędzie do testowania szybkości stron, jest całkowicie bezpłatne i zaskakująco wszechstronne.

2. Po wygenerowaniu wyników otrzymasz ogólną informację, czy Twoja strona sklasyfikowana została jako powolna, przeciętna, a może szybka. Otrzymasz także trzy zestawy wyników (zarówno dla urządzeń mobilnych, jak i komputerów):

• Dane zebrane w terenie (ang. Field Data) – bazują na danych historycznych, opierają się na próbie użytkowników śledzonych przez Google. Są o tyle przydatne, że pozwalają zauważyć trwałe problemy, które mogły wystąpić w przeszłości, ale przy pojedynczym teście prawdopodobnie zostałyby pominięte. Umieszczony pod nimi wielobarwny pasek pokazuje, jak Twoja witryna wypada w tym obszarze na tle innych stron (wszystkich indeksowanych w wyszukiwarce Google!) według raportu użytkowników Chrome.
• Podsumowanie pochodzenia (ang. Origin Summary) (nie pokazuje się automatycznie) – rozwijane kliknięciem podsumowanie pochodzenia pokazuje średnie dane dla całej witryny (a nie pojedynczej strony). „Pochodzenie” odnosi się do bazowego adresu URL.
• Dane laboratoryjne (ang. Lab Data) – są to wyniki danej strony internetowej, jakie uzyskiwane są natychmiast po kliknięciu „Analizuj”. Mówią o wydajności strony w momencie badania, nie uwzględniają żadnych innych danych. Ogólny wynik szybkości strony na górze strony jest oparty właśnie na danych laboratoryjnych.

Sekcja „Dane laboratoryjne” zawiera najbardziej szczegółowe omówienie wskaźników szybkości strony.

3. Pamiętaj, że wyświetlą Ci się dwie osobne karty (do wyboru w niebieskim menu) – jedna dla urządzeń mobilnych, druga dla komputerów stacjonarnych – które pokażą całkowicie odmienne dane. Otrzymane sugestie zwykle będziesz musiał zastosować dla każdej z wersji witryny indywidualnie.

4. W każdej sekcji znajdują się dwa kluczowe wskaźniki szybkości (FCP i FID) wraz z pięcioma oddzielnymi miernikami, omówionymi w sekcji „Dane laboratoryjne”:

• First Contentful Paint (FCP) – W kontekście wydajności witryn internetowych termin „First Contentful Paint” oznacza pierwszy element witryny, który pojawia się użytkownikowi przeglądarki. „First Contentful Paint” to pierwszy widoczny, spójny fragment treści. Jako “treść” rozumiemy tutaj zasadniczo każdy indywidualny, oddzielny elementem stanowiący część wczytywanej strony – na przykład obraz lub blok tekstu. Fragment treści to taki element, który może zostać “skonsumowany” przez użytkownika. W ten sposób odróżnia się go od „First Paint” (z wyłączeniem “Contentful”, które oznacza dosłownie “pełny treści”), który z kolei może być czymś tak prostym jak kolor tła lub pojedynczy piksel.
• First Input Delay (FID) – First Input Delay to miara szybkości reakcji witryny. Gdy użytkownik wchodzi w interakcję z daną witryną – klikając łącze, powiększając obraz czy wybierając wariant produktu – reakcja witryny może zająć trochę czasu z powodu zachodzących w tle procesów przeglądarki, które skutecznie „dezaktywują” interaktywne elementy witryny. FID oparty jest na zebranych przez Google danych rzeczywistych użytkowników, nie jest zatem uwzględniany w sekcji “Dane laboratoryjne”.
• First Meaningful Paint – Miara ta zasadniczo wskazuje, kiedy widzowie mogą faktycznie zacząć “konsumować” zawartość strony. Za “First Meaningful Paint” uznajemy załadowanie całej głównej zawartości strony powyżej linii przewijania. Google uznaje go za podstawowy wskaźnik szybkości witryny.
• Indeks szybkości (ang. Speed Index) – czas potrzebny do pełnego załadowania strony w sensie wizualnym. Mówi, po jakim czasie renderowanie przeglądarki przestaje się zmieniać klatka po klatce.
• Pierwszy moment bezczynności procesora (ang. First CPU Idle) – Pierwszy moment bezczynności procesora oznacza czas, w którym strona internetowa jest przynajmniej w pewnym stopniu interaktywna. Nie wszystkie elementy interaktywne muszą już wówczas być gotowe, ale kilka z pewnością.
• Czas do interaktywności (ang. Time to Interactive) – czas potrzebny na pełne załadowanie witryny i uzyskanie jej pełnej interaktywności, gotowości do reagowania na każdą akcję użytkownika.
• Maksymalny potencjalny FID (ang. Max Potential First Input Delay) – przewidywana najwyższa możliwa wartość FID. Co ważne, opiera się ona na danych laboratoryjnych, a nie rzeczywistych.

5. Pod tymi trzema sekcjami ukazuje się sekcja zatytułowana „Możliwości”, obok której wyświetlona zostaje ilość czasu, jaką możemy zaoszczędzić. To prawdziwy test – praktyczne sugestie, jak poprawić szybkość wczytywania stron (ang. page speed). Każdą z sugestii dotyczących instrukcji implementacji możesz dodatkowo rozwinąć.

Spójrzmy na kilka przykładów z poniższego zrzutu ekranu (większość z nich omówimy bardziej szczegółowo w poniższej sekcji):

Sekcja „Możliwości” zawiera konkretne sugestie dotyczące zwiększenia szybkości strony.

• Zminifikuj JavaScript – Minifikacja to proces kompresji plików zawierających jakikolwiek kod (HTML, CSS, JavaScript itp.), który pozwala szybciej przenosić je z serwerów do przeglądarek.
• Opóźnij ładowanie obrazów znajdujących się poza ekranem – Działanie to wiąże się z opóźnieniem czasu ładowania obrazów poniżej linii przewijania. W efekcie zmniejsza się rozmiar pierwszego żądania wysyłanego na serwer, co zapewnia szybszy ogólny czas początkowego wczytywania. Dopiero, gdy wszystkie obrazy powyżej linii przewijania zostaną wyświetlone, rozpocznie się ładowanie pozostałych obrazów na stronie.
• Usuń zbędne CSS – bardzo często arkusze stylów .css zawierają sporo niepotrzebnego kodu, którego usunięcie może znacznie zmniejszyć rozmiar całego pliku. Wrzucenie całego CSS do jednego pliku również pomoże skrócić czas potrzebny na interpretację danych przez przeglądarkę.
• Wykorzystuj formaty obrazów najnowszej generacji – Formaty obrazów takie jak JPEG 2000, JPEG XR i WebP (oraz kilka innych) zapewniają lepszą kompresję niż starsze alternatywy, nie powodując przy tym utraty jakości.
• Skróć czas odpowiedzi serwera (TTFB – Time To First Byte) – Czas odpowiedzi serwera można przyspieszyć na wiele sposobów, w tym poprzez optymalizację systemu zarządzania treścią (CMS) lub wybranie szybszego dostawcy hostingu.
• Kompresuj teksty – Po włączeniu funkcji gzip na serwerze tekst w plikach zostaje skompresowany, co zmniejsza ich rozmiar i przyspiesza transfer. Skompresowane pliki mogą być następnie przetwarzane przez przeglądarkę.

6. Wreszcie, pod sekcją „Możliwości” znajdują się sekcje „Diagnostyka” oraz “Spełnione kryteria”. Obejmują one (odpowiednio) dalsze możliwości poprawy szybkości w oparciu o najlepsze praktyki internetowe oraz kryteria, które już spełniasz.

W kolejnych sekcjach zobaczyć możesz jeszcze więcej sugestii dotyczących poprawy szybkości wczytywania stron (ang. page speed) oraz kryteria, które zostały już spełnione (pozwala to przekonać się, czy zmiany zostały wdrożone prawidłowo).

Google PageSpeed ​​Insights dostarcza pouczających, jasno udokumentowanych treści na temat wszystkich oferowanych funkcji i sugestii, które stanowią świetne źródło informacji, jeśli w Twojej głowie nadal kłębią się jakiekolwiek wątpliwości.

A inne narzędzia?

Pomimo ogromu zalet, PageSpeed ​​Insights ma także swoje wady.

Jedną z nich jest kwestia obszaru geograficznego. Lokalizacja serwera testowego nie jest znana, wyniki mogą zatem nie być miarodajne. Dla przykładu, jeżeli Twój serwer znajduje się w Wielkiej Brytanii, zaś serwer testowy znajduje się na zachodnim wybrzeżu USA, strona załaduje się znacznie szybciej osobie odwiedzającej Twoją witrynę w pierwszym z tych krajów.

Opcję samodzielnego wyboru pożądanej lokalizacji serwera testowego umożliwiają np. Pingdom oraz GTmetrix. Użyj ich, aby uzupełnić obraz, jaki dostarczy Ci PageSpeed ​​Insights.

O ile rośnie konwersja – twarde dane z e-commerce 2025

Najnowsze statystyki pokazują, że skrócenie czasu ładowania o 1 sekundę może podnieść konwersje mobilne nawet o 5,9 %.

Jednocześnie co druga osoba porzuca ładowanie strony, jeśli trwa dłużej niż 3 sekundy. To realne pieniądze – optymalizacja to nie kosmetyka, ale bezpośredni wpływ na przychody.

Jak udokumentować zysk z optymalizacji prędkości strony

Aby przekonać interesariuszy lub udowodnić ROI, warto porównać metryki przed i po optymalizacji: czas ładowania (LCP, TTFB), bounce rate, współczynnik konwersji, średnią wartość koszyka. Dzięki temu zyskujesz twarde dane zamiast domysłów – i łatwiej uzasadnić dalsze inwestycje w performance.

Najlepsze metody zwiększania szybkości strony (ang. page speed) z wykorzystaniem danych

OK, przejdźmy więc do kilku praktycznych wskazówek.

Oto dziesięć kroków, jakie możesz podjąć, aby Twoja witryna ładowała się w mgnieniu oka:

1. Sprawdź (i popraw!) szybkość swojego dostawcy usług hostingowych

W skrócie: Chociaż często istnieje możliwość wprowadzenia pozytywnych zmian na serwerach, a korzyści przynosi także przeniesienie się z planu współdzielonego na plan dedykowany – czasami najprostsze rozwiązanie okazuje się najlepsze: wystarczy zmienić dostawcę. Zanim zajmiesz się tym, co leży w Twojej gestii, sprawdź jakość usług Twojego dostawcy.

Jeśli Twój dostawca hostingu dysponuje powolnymi serwerami, niewiele możesz zrobić, aby rozwiązać ten problem.

Szybkość serwera hostingowego witryny możesz przetestować i porównać z innymi firmami za pomocą narzędzia takiego jak Bitcatcha.

Jeśli Twój dostawca hostingu dysponuje powolnymi serwerami, niewiele możesz zrobić, aby rozwiązać ten problem. Być może powinieneś rozważyć znalezienie nowego dostawcy. Jeśli prowadzisz sklep internetowy, zazwyczaj korzystny okazuje się wybór dedykowanej usługi hostingowej od dostawcy z doświadczeniem w branży e-commerce.

Tak kształtują się kluczowe różnice pomiędzy planami hostingowymi pod względem szybkości:

• Hosting współdzielony (ang. shared hosting) – hosting współdzielony jest najtańszą, ale też najbardziej powolną formą hostingu. Twoja strona internetowa przechowywana jest wówczas na tym samym serwerze, na którym znajdują się witryny innych użytkowników. Dużym minusem takiego rozwiązania jest fakt, że wszystkie zasoby serwera – w szczególności CPU i RAM – również są w tym przypadku współdzielone, co może mieć niekorzystny wpływ na szybkość strony. Szczególnie istotne okazuje się to w przypadku większych witryn, które wymagają dużej mocy obliczeniowej.
• Wirtualny serwer prywatny (VPS, ang. Virtual Private Server) – wirtualny serwer prywatny (VPS) jest pod wieloma względami podobny do serwera współdzielonego. Wiele witryn hostowanych jest w tym przypadku na pojedynczym serwerze, są one jednak oddzielone wirtualną barierą, co w efekcie pozwala cieszyć się wieloma zaletami prywatnego serwera. Główną zaletą tego rozwiązania jest wyodrębnienie zasobów serwera – co nie dopuszcza do sytuacji, w której któryś ze “współlokatorów” zużyłby wszystkie zasoby, zostawiając Cię z niczym. Wirtualne serwery prywatne pozwalają także na większą swobodę w administrowaniu serwerem. Ponadto, jeżeli potrzebujesz więcej miejsca – możesz po prostu je dokupić.
• Hosting dedykowany – hosting dedykowany jest zwykle następnym krokiem po hostingu VPS. Korzystając ze specjalnego planu wynajmujesz wówczas serwer, który jest wykorzystywany wyłącznie do prowadzenia Twojej witryny. Opcja ta umożliwia Ci trzymanie pełnej kontroli nad administracją i rdzeniem (np. wybór systemu operacyjnego czy ustawień bezpieczeństwa), co może pozwolić na optymalizację szybkości strony po stronie serwera. Dedykowany hosting jest idealnym rozwiązaniem dla większych witryn i firm z własnymi zespołami technicznymi.

Podsumowując: jeżeli prowadzisz witrynę e-commerce, najlepiej sprawdzi się u Ciebie albo hosting dedykowany, albo VPS.

Oto kilku najbardziej cenionych dostawców usług hostingowych dla sklepów internetowych:

• SiteGround – SiteGround oferuje wiele dedykowanych planów dla platform e-commerce, w tym Magento, WooCommerce i PrestaShop
• Liquid Web – Jedną z głównych propozycji wartości (ang. value proposition) Liquid Web jest doskonała obsługa klienta. Firma oferuje całodobowy dostęp do doradców, na których reakcję czas oczekiwania rzadko przekracza jedną minutę. Oferują oni różne plany specjalnie dla branży e-commerce (w tym hosting dedykowany dla WooCommerce). To świetna opcja dla małych i średnich sklepów internetowych, którzy planują skalować swój biznes w przyszłości.
• InMotion Hosting – InMotion jest bardzo popularny wśród sklepów internetowych. To jedna z najlepszych dostępnych opcji.
• Rackspace – Rackspace to jedno z najlepszych rozwiązań dla branży e-commerce, oferujące szereg dedykowanych rozwiązań w chmurze. Obsługa klienta i infrastruktura bezpieczeństwa tej firmy należą do najlepszych w całej branży.

Na usługach hostingowych nie warto oszczędzać. To jedyny obszar, który oddajesz pod kontrolę obcemu podmiotowi. Ograniczanie wydatków kosztem niższej wydajności w długim okresie przyczynia się wyłącznie do spadku osiąganych wyników.

2. Optymalizuj obrazy

W skrócie: Optymalizacja obrazów jest jednym z najłatwiejszych i najszybszych sposobów na zwiększenie szybkości ładowania strony (ang. page speed). Upewnij się, że format zdjęć został odpowiednio dobrany. Użyj sprite’ów CSS, aby przyspieszyć ich wczytywanie.

To właśnie obrazy są głównym winowajcą zbyt długiego czasu ładowania stron (ang. page load time). Nadmiernie duże pliki obrazów nie tylko zajmują niepotrzebnie miejsce na serwerze, ale też ich wysłanie do przeglądarki użytkownika wymaga o wiele więcej czasu.

Warto zoptymalizować obrazy w programie takim jak PhotoShop lub GIMP, które pozwalają zachować pełną kontrolę nad jakością obrazów. W zależności od typu obrazka najlepiej sprawdzają się różne formaty. JPEG’i na ogół nadają się idealnie do zapisywania zdjęć, podczas gdy prostsze grafiki w podstawowych kolorach będą mogły być szybciej renderowane, gdy użyjemy formatu PNG.

Oto krótki przegląd najpopularniejszych formatów oraz wskazówki odnośnie ich zastosowania:

• JPEG (Joint Photographics Expert Group) – JPEG jest prawdopodobnie najczęściej stosowanym formatem dla wysokiej jakości zdjęć oraz bogatych w szczegóły obrazów. Do jego kluczowych zalet z pewnością należy fakt, że pliki JPEG są dobrze renderowane, zapewniając wysoki poziom kompresji. To zdecydowanie najbardziej pożądany format do zapisywania zdjęć. Możesz również rozważyć użycie nowszych wariantów JPEG, takich jak JPEG 2000 czy JPEG XR, które oferują jeszcze lepszy poziom kompresji.
• PNG (Portable Network Graphics) – format PNG jest na dobrą sprawę czymś pomiędzy JPEG i GIF. Pozwala zachować równowagę pomiędzy jakością, szeroką gamą kolorów oraz rozmiarem pliku. Pliki PNG zazwyczaj są mniejsze niż JPEG, dzieje się to jednak kosztem jakości barw oraz szczegółowości obrazu. Niegdyś ich duży minus stanowił brak kompatybilności ze starszymi przeglądarkami, na tę chwilę problemy takie jednak nie występują.
• GIF (Graphic Interchange Format) – format GIF – będący jednym z najstarszych formatów w internecie – najlepiej sprawdza się dla obrazów mających ograniczoną paletę kolorów (jak np. logo). Jeżeli zamierzasz zamieścić na stronie obraz składający się głównie z tekstu, użycie formatu GIF będzie dobrym wyborem. Główną zaletą plików GIF jest ich stosunkowo niski rozmiar. Ze względu na ograniczoną pojemność kolorów pliki GIF nie powinny być jednak stosowane do zapisywania bogatych w szczegóły obrazów czy fotografii. GIFy mogą być stosowane także do podstawowych animacji. Nie używaj ich jednak do bardziej zaawansowanych multimediów – o wiele korzystniejsze dla szybkości strony będzie wykorzystanie treści udostępnionych przez osoby trzecie, np. na platformie YouTube.

Oprócz wyboru poprawnego formatu istnieje kilka innych rzeczy, które możesz zrobić, aby zaoszczędzić cenne milisekundy ładowania strony dzięki optymalizacji obrazów:

• Nie wstawiaj obrazów większych, niż jest to konieczne – wielu projektantów oraz programistów popełnia ten sam błąd: przesyłają niepotrzebnie duże obrazy (których rozdzielczość często przekracza kilka tysięcy pikseli!) na serwer, i dopiero wtedy zmieniają ich rozmiar. To duży błąd. Przesyłanie do przeglądarek użytkowników obrazów o szerokości 5000 pikseli nie ma absolutnie żadnego sensu, skoro na karcie produktu i tak wyświetlone zostać ma zdjęcie o szerokości jedynie 1000 px. Czasami rozmiar zdjęć musi być stosunkowo spory, aby pozwolić odwiedzającym na jego powiększenie, zadbaj jednak, aby pozostały tak małe, jak tylko możliwe.
• Kompresuj zdjęcia przed ich przesłaniem – niektóre „niewidzialne” szczegóły, takie jak czas wykonania zdjęcia, mogą być osadzone w pliku. Kompresja usuwa z plików wszystkie te niepotrzebne informacje, zmniejszając w ten sposób ich rozmiar. Istnieje wiele narzędzi, które pomogą Ci szybko uporać się z tym zadaniem – np. TinyPNG, JPEG Optimizer czy specjalne wtyczki, takie jak WPSmush. Przy intensywnym użytkowaniu warto skorzystać z płatnych pakietów, które oferowane są w bardzo rozsądnych cenach.
• Wyeliminuj zbędne obrazy ze stron – każdy kolejny obraz wydłuża czas potrzebny do pełnego załadowania strony. Zrezygnuj zatem ze wszystkich zdjęć, których umieszczenie nie jest absolutnie konieczne. Łatwo jest wpaść w pułapkę dodawania obrazów tylko dlatego, że są. Bo przecież jeszcze jedno zdjęcie produktu na pewno nie zaszkodzi, prawda? Warto jednak eliminować zbędne obrazy już na etapie tworzenia karty produktu (przy okazji: kliknij tutaj, aby poznać świetne szablony karty produktów). Możesz także wykorzystać tzw. „leniwe ładowanie” (ang. lazy-loading), aby najpierw wyrenderować te obrazy, które znajdują się powyżej linii przewijania (zamiast wszystkich obrazów na stronie jednocześnie). Obrazy, dla których ustawione zostanie „leniwe ładowanie” (w kodzie HTML) załadowane zostaną dopiero po tym, gdy informacje na górze strony staną się już widoczne dla odwiedzających lub nawet dopiero wtedy, gdy użytkownik zacznie przewijać stronę.

Na koniec, jeżeli zachodzi taka konieczność, prześlij na serwer zdjęcia w formie sprite’ów CSS. Sprite CSS jest zbiorem wielu obrazów połączonych w jeden plik. Zamiast ładowania obrazów z serwera pojedynczo, przeglądarka może pobrać odpowiednik pojedynczego obrazu, eliminując w ten sposób potrzebę wysyłania wielu żądań do serwera. Następnie kod strony dostosować można w taki sposób, aby wyświetlał określony obraz tylko wtedy, gdy jest potrzebny. Technika ta może być zastosowana nie tylko do optymalizacji obrazów, ale także przycisków CTA (ang. Call-to-Action, dosł. wezwanie do działania) czy też ikon mediów społecznościowych.

3. Włącz buforowanie przeglądarki

W skrócie: „Poproś” przeglądarki, aby zapisywały i ponownie wykorzystywały pliki witryny przy każdym powrocie użytkownika na stronę. W ten sposób czas ładowania strony (ang. page load time) dla powracających użytkowników ulega znacznemu zredukowaniu – bez praktycznie jakiegokolwiek udziału z Twojej strony.

Buforowanie przeglądarki to funkcja, dzięki której przeglądarka przechowuje istotne pliki witryny. Oznacza to, że gdy użytkownik powraca na daną stronę, jego przeglądarka nie musi ponownie pobierać każdego pliku bezpośrednio z serwerów. Wystarczy pobranie tych plików, które zostały w międzyczasie zaktualizowane. Pozwala to znacznie skrócić czas ładowania stron, zmniejsza bowiem liczbę żądań wysyłanych do serwera.

Aktywacja buforowania to dość prosty proces: wymaga jedynie dodania kilku linijek kodu do nagłówków HTTP, które pozwolą określić “terminy ważności” dla określonych plików. Jeżeli korzystasz z platformy WordPress, możesz skorzystać w tym celu z licznych wtyczek – np. W3 Total Cache – które pozwolą Ci usprawnić ten proces.

Buforowanie w przeglądarce bywa nieco bardziej kłopotliwe w przypadku sklepów internetowych, których strony często podlegają aktualizacjom ze względu na zmiany cen, wahania stanów magazynowych, modyfikacje warunków dostawy czy też dodawanie nowych recenzji. Z tego powodu ważne jest rozróżnienie pomiędzy plikami, które przechowują treści stabilne – style CSS, logo czy paski nawigacji – od tych, które na bieżąco ulegają zmianom, i odpowiednie wykorzystanie tej wiedzy przy tworzeniu kodu. Pamiętaj, że możliwe jest użycie buforowania wyłącznie dla niewrażliwych na czas elementów strony, (takich jak nagłówki i stopki). Nawet, jeżeli to jedyne elementy, dla których będziesz mógł włączyć buforowanie – wciąż pozwoli Ci to zaoszczędzić kilka cennych milisekund czasu ładowania strony.

4. Pamiętaj o minifikacji HTML, JavaScript i CSS

W skrócie: Użyj CDN (systemu dostarczania treści), aby włączyć zautomatyzowaną minifikację i zmniejszyć rozmiary plików nawet o 60%. Instalacja CDN jest stosunkowo prostym procesem, który umożliwiają dobrze znane usługi – jak np. CloudFlare czy Amazon AWS.

Minifikacja to proces minimalizacji kodu w plikach internetowych. Udowodniono, że znacząco skraca ona czas ładowania strony. Mniejsze pliki o wiele szybciej przetwarzane są zarówno przez serwer jak i przez przeglądarkę. To jedna z najskuteczniejszych strategii optymalizacji, jakie można wdrożyć – często rekomendowana również przez narzędzia do poprawy szybkości strony (ang. site speed).

Strategia ta bazuje przede wszystkim na rozbieżnościach pomiędzy pełną długością
kodu – obejmującą także komentarze, spacje, przecinki etc. – a pewnego rodzaju minimalną długością kodu, czyli taką, która jest niezbędna, aby przeglądarka mogła prawidłowo renderować stronę. Złożoność tego zjawiska świetnie rozumieją programiści. Oryginalną wersję niejednokrotnie udaje się zredukować o nawet 40%!

Minifikacja może znacznie zmniejszyć rozmiar plików internetowych.

Kluczowym problemem związany z minifikacją kodu jest fakt, że wykonanie jej ręcznie graniczy z cudem. Po pierwsze, zajmuje to zdecydowanie zbyt wiele czasu, po drugie zaś – naprawdę łatwo przy tym zadaniu o błędy. Nawet zastosowanie zautomatyzowanych narzędzi nie eliminuje ogromnego nakładu pracy przy ręcznym wprowadzaniu danych, jakiego wymaga przetworzenie i implementacja całego alternatywnego kodu.

O wiele lepszym rozwiązaniem będzie w tym wypadku użycie systemu dostarczania treści (CDN), który automatycznie zminifikuje kod przed dostarczeniem go do przeglądarki. Oryginalne pliki przechowywane będą na własnym serwerze, podczas gdy zminifikowane wersje znajdą się na serwerach CDN. Po każdej wprowadzonej na stronie zmianie zostanie ona zsynchronizowana z wersją przechowywaną na serwerze CDN. Systemy dostarczania treści (CDN) mają także wiele innych zalet – ale do tego dojdziemy później.

5. Wykorzystaj przyspieszone strony mobilne (AMP, ang. Accelerated Mobile Pages) oraz aplikacje progresywne (PWA, ang. Progressive Web Apps)

W skrócie: zarówno przyspieszone strony mobilne (AMP) jak i aplikacje progresywne (PWA) – oba opracowane przez Google – mogą znacznie przyspieszyć tempo ładowania mobilnych wersji stron internetowych. Biorąc pod uwagę stosunkowo wysoki koszt ich utworzenia, przejście na PWA lub AMP powinno być dobrze przemyślane i następować w oparciu o kilka czynników. Jeżeli jednak zdecydujesz się na ten krok, jego wpływ na szybkość Twojej witryny może okazać się naprawdę znaczący.

Przekształcenie mobilnej wersji swojej witryny na AMP wymaga sporego nakładu pracy. Ten krok zdecydowanie nie jest dla wszystkich. Warto go jednak rozważyć, szczególnie w kontekście długoterminowej strategii.

Czym dokładnie są przyspieszone strony mobilne (AMP) oraz aplikacje progresywne (PWA)? Oto krótkie wyjaśnienie:

• Przyspieszone strony mobilne (AMP) – to framework programistyczny. Składa się z podzbioru HTML (AMP HTML), framework’u JavaScript oraz, opcjonalnie, systemu dostarczania treści (CDN). Stworzony przez Google po to, aby umożliwić programistom tworzenie błyskawicznie szybkich mobilnych wersji witryn bez konieczności inwestowania znacznych zasobów w optymalizację szybkości. Początkowo AMP opracowane zostało z myślą o witrynach opartych na treści, staje się ono jednak coraz bardziej popularne także wśród sklepów internetowych.
• Aplikacje progresywne (PWA) – PWA są jak aplikacje mobilne dostępne za pośrednictwem przeglądarki mobilnej. Powielają wiele funkcji aplikacji (jak np. dostęp za pomocą ikony na ekranie głównym telefonu czy powiadomienia push) bez konieczności tworzenia własnego oprogramowania. Od użytkowników nie wymagają natomiast instalowania czegokolwiek na ich telefonach.

Pomiędzy opisanymi formami występują pewne kluczowe różnice, obie gwarantują jednak poprawę szybkości strony mobilnej. Aby zapoznać się z praktycznymi zastosowaniami zarówno AMP, jak i PWA, skorzystaj z obszernej dokumentacji Google.

6. Pozbądź się nieefektywnych wtyczek do WordPress’a

W skrócie: Wtyczki mogą powodować znaczne wydłużenie czasu ładowania strony (ang. page load time). Jeżeli Twoja witryna e-commerce znajduje się na platformie WordPress, warto przeprowadzić kompleksowy przegląd wykorzystywanych wtyczek. Pozbądź się tych, które okażą się zbędne, dla tych zaś, które pomimo znacznego wpływu na spowolnienie ładowania strony są ci potrzebne, postaraj się znaleźć “lżejsze” alternatywy.

Ogromną przewagą platform takich jak WooCommerce czy Shopify jest dostępność łatwych w obsłudze wtyczek. W większości przypadków przynoszą one sklepom internetowym same korzyści: zwiększają wydajność, eliminują potrzebę skomplikowanych operacji programistycznych, a przy tym często można skorzystać z nich za darmo.

Niektóre wtyczki mogą jednak znacznie obciążać serwer i negatywnie wpływać na czas ładowania strony. Dzieje się tak przede wszystkim, jeżeli dana wtyczka obarczona została jakimiś błędami w kodzie, powoduje konflikt z innymi elementami witryny, ma zbyt duży rozmiar lub też po prostu jest przestarzała.

Na całe szczęście, rozwiązywanie problemów z wtyczkami jest dosyć proste. Często najprostszą metodą jest wykorzystanie raportu szybkości w celu identyfikacji problemów, które mogą być wywoływane przez wtyczki, a następnie ich dezaktywacja i ponowne wygenerowanie raportu szybkości.

Możesz także skorzystać ze specjalnej wtyczki WordPress, takiej jak P3, która przeskanuje wykorzystywane przez Ciebie wtyczki i zidentyfikuje obszary o niskiej wydajności.

Będąc już przy temacie wtyczek, warto przytoczyć dosyć interesujący fakt, że wiele problemów, które rozwiązują, często można rozwikłać w o wiele prostszy sposób – poprzez drobne zmiany kodu w plikach internetowych. Nadużywanie wtyczek jest pewną oznaką braku wiedzy programistów. Łatwo jest wpaść w tę pułapkę i zacząć traktować wtyczki jako proste rozwiązanie każdego, nawet najmniejszego problemu, warto mieć jednak na uwadze, że szybko przełoży się to na coraz gorszy czas ładowania Twojej strony (ang. page load time).

7. Wykorzystaj systemy dostarczania treści (CDN, ang. Content Distribution / Delivery Network)

W skrócie: Systemy dostarczania treści (CDN, ang. Content Distribution / Delivery Networks) są nie tylko tanie w subskrypcji, ale też łatwe do wdrożenia.

O CDN wspominaliśmy już wcześniej w tym artykule, wielu dostawców ma bowiem w swojej ofercie opcję automatycznej minifikacji. Oprócz niej zapewniają jednak dodatkowo szereg innych korzyści.

Systemy dostarczania treści potrafią złagodzić negatywny wpływ dużych odległości geograficznych na transfer danych.

Idea CDN jest bardzo dobrze przemyślana. CDN to globalna sieć serwerów przechowujących w pamięci podręcznej wersje Twojej witryny. Dzięki niej odwiedzający cieszą się szybszym dostępem do Twojej witryny bez względu na to, gdzie aktualnie przebywają. Za każdym razem, gdy użytkownik wysyła za pośrednictwem przeglądarki żądanie do Twojej witryny, skierowane zostaje ono do najbliższego serwera przechowującego kopię Twojej witryny.

Korzystanie z CDN wspomaga również kontrolę kosztów przepustowości (jeżeli takie występują), a także pozwala lepiej radzić sobie z okresami zwiększonego natężenia ruchu.

8. Optymalizuj czas odpowiedzi serwera

W skrócie: co prawda nie zmienisz złego serwera – możesz jednak zoptymalizować taki, który działa dobrze. Do najważniejszych zadań, jakie możesz w tym celu zrealizować, należy oczyszczenie bazy danych, właściwy dobór ustawień w systemie CMS oraz wybór szybkiego dostawcy DNS.

Czas do pierwszego bajtu (TTFB, ang. Time to First Byte) to inaczej okres czasu, który jest potrzebny, aby przeglądarka otrzymała pierwszy bajt informacji z serwera. Zasadniczo istnieją trzy części żądania serwera, z których każde oznacza potencjalny obszar do optymalizacji: czas potrzebny na wysłanie żądania, czas potrzebny na przetworzenie żądania przez serwer oraz czas potrzebny na odesłanie żądanych informacji do przeglądarki.

Swój czas do pierwszego bajtu możesz sprawdzić za pomocą WebPageTest. Dobry wynik powinien wynosić poniżej 200 ms.

Korzystanie z CDN jest jednym z najlepszych sposobów na poprawę pierwszego oraz trzeciego etapu. System dostarczania treści zmniejsza bowiem dystans pomiędzy serwerem a przeglądarkami użytkowników.

W tym punkcie skupimy się jednak na drugim etapie. Optymalizacja szybkości serwera to bardzo szeroki temat, który znacznie wykracza poza zakres tego artykułu. Istnieje jednak kilka podstawowych zasad, których znajomość pomoże Ci zadbać o szybkość przetwarzania Twojego serwera.

Jeżeli chcesz zapewnić swojej witrynie dobry czas odpowiedzi serwera, skorzystaj z tej krótkiej checklisty:

• Skonfiguruj swój CMS (system zarządzania treścią) tak, aby uzyskać optymalną szybkość – Twój CMS jest odpowiedzialny za zarządzanie treścią oraz jej obsługę. Przejrzyj ustawienia swojego systemu CMS i sprawdź, czy istnieje w nim możliwość wyłączenia lub też włączenia takich opcji, które pozwoliłyby poprawić czas odpowiedzi. Na przykład w WordPressie warto upewnić się, czy zainstalowana została najnowsza wersja PHP, a także ograniczyć wszelkie procesy, które zajmują procesor (zasoby serwera).
• Oczyść bazę danych – kiedy przeglądarka wysyła żądanie strony dynamicznej, serwer musi w pierwszej kolejności wysłać zapytanie do bazy danych, aby pobrać informacje, a następnie „utworzyć” tę stronę. Źle zoptymalizowane bazy danych mogą powodować znaczne wydłużenie tego procesu. Świetnym rozwiązaniem tego problemu może okazać się buforowanie po stronie serwera, dzięki któremu kopia Twoich stron przechowywana będzie bez konieczności zaglądania do bazy danych.
• Rozważ skorzystanie z usługi wyszukiwania DNS (system nazw domen, ang. Domain Name System) premium – DNS zamienia nazwę domeny na adres IP. Twój adres jest przechowywany u Twojego dostawcy DNS, z którym należy się skonsultować, aby poznać dokładny adres IP, który mapuje twoją domenę. Wybór takiego dostawcy DNS, który zapewnia szybszą funkcjonalność wyszukiwania, może pozwolić Ci skrócić czas ładowania strony (ang. page load time) o milisekundy. Każda milisekunda ma jednak znaczenie. Skorzystaj z tej usługi, aby sprawdzić szybkość DNS.

Pamiętaj, że wszystkie wprowadzone zmiany powinieneś ocenić w kontekście swojego TTFB (ang. Time to First Byte). Ogólnie rzecz biorąc, zmiany po stronie serwera mogą być dość techniczne, dobrym rozwiązaniem może więc okazać się zatrudnienie doświadczonego, obeznanego w procesach optymalizacyjnych programisty, aby upewnić się, że sam nie popełnisz żadnych błędów. Zazwyczaj łatwiej jest zaimplementować zmiany na serwerze przy korzystaniu z dedykowanego pakietu hostingowego, ponieważ w przypadku hostingu współdzielonego lub VPS dostęp do niektórych funkcji może być ograniczony.

9. Kompresuj, co tylko możliwe

W skrócie: Gzip umożliwia kompresowanie plików przed wysłaniem ich do przeglądarki użytkownika. To łatwa do uruchomienia funkcja serwera, która pozwala znacząco zmniejszyć rozmiar plików (co skutkuje zwiększeniem szybkości transferu plików).

Zdjęcia to nie jedyny element, jakiego dotyczy ten podpunkt – kompresować warto także inne pliki. Funkcję gzip stosować możesz do kompresji wszystkich plików CSS, HTML i JavaScript, których rozmiar przekracza 150 bajtów. Pozwala to znacznie zwiększyć szybkość ich transferu.

Jak dokładnie to działa?

Gdy serwer wysyła pliki do przeglądarki użytkownika, ich rozmiar ma kluczowy wpływ na czas ich przetwarzania. Gzip to aplikacja, która przed wysłaniem kompresuje Twoje pliki (nawet o 70%). Ponieważ skompresowane pliki mają mniejszy rozmiar, zostają dostarczone do przeglądarki o wiele szybciej.

Aby skorzystać z gzip, wystarczy uruchomić go na swoim serwerze, dodając jedynie kilka linijek kodu do pliku .htaccess bądź też za pośrednictwem panelu sterowania (dla serwerów IIS).

10. Ładuj pliki asynchronicznie zawsze, gdy jest to możliwe

W skrócie: ładowanie asynchroniczne przeprowadzane jest o wiele szybciej niż ładowanie synchroniczne. Możesz uruchomić tę funkcję za pomocą swojego CMS (systemu zarządzania treścią, ang. Content Management System).

Ładowanie synchroniczne to takie, w trakcie którego pliki ładują się kolejno, jeden po drugim. Ładowanie asynchroniczne polega zaś na ładowaniu wszystkich plików jednocześnie.

Podczas ładowania asynchronicznego ładowanych jest wiele plików jednocześnie.

Ponieważ przeglądarki przetwarzają pliki w sposób hierarchiczny – najpierw ładują te elementy strony, które występują na jej początku – synchroniczne ładowanie może znacznie wydłużyć czas potrzebny do pełnego załadowania strony. Ładowanie asynchroniczne pozwala przeglądarce ładować wiele elementów jednocześnie, nie oczekując na zakończenie poprzedniego ładowania, co niejednokrotnie oszczędza wiele cennych sekund.

Zazwyczaj oprogramowanie CMS posiada opcję zmiany ustawień ładowania strony, pozwalając na samodzielny wybór preferowanego sposobu wczytywania plików. Jeśli korzystasz z WordPressa, istnieje kilka wtyczek, z których możesz skorzystać, aby zastąpić ładowanie synchroniczne bardziej wydajnym ładowaniem asynchronicznym

11. Ogranicz przekierowania

W skrócie: eliminując niepotrzebne przekierowania, możesz zaoszczędzić kilka sekund czasu ładowania strony. Pamiętaj, że każde przekierowanie wymaga wysłania oddzielnego żądania na serwer.

Przekierowania to wróg numer jeden szybkiego wczytywania stron. No… może nie numer jeden. Aczkolwiek znajdują się całkiem wysoko na liście.

Każde przekierowanie z Twojej witryny na inny adres URL wiąże się z dodatkowym oczekiwaniem użytkownika na odpowiedź serwera.

Liczne przekierowania pojawiają się często w odpowiedzi na pojedyncze żądanie – w szczególności, jeżeli strony przeznaczone dla komputerów przekierowują na ich wersje mobilne. Taka sytuacja ma zdecydowanie negatywny wpływ na ​​szybkość ładowania strony (ang. page speed).

Warto wykorzystać odpowiednie narzędzia – takie jak np. Screaming Frog – aby sprawdzić, w których miejscach w witrynie występują przekierowania, a następnie przejrzeć wszystkie zidentyfikowane strony i zastanowić się, czy nie warto się ich pozbyć.

Nie przejmuj się zbytnio spadkiem w rankingach wyszukiwań (strach przed utratą zdobytej pozycji rankingowej to jeden z głównych powodów, przez które webmasterzy nie decydują się na usunięcie zbędnych przekierowań). Prędzej czy później Twoja strona i tak nadrobi te straty.

Uważaj w szczególności na tzw. „łańcuchy przekierowań”, czyli sekwencje przekierowań pomiędzy więcej niż dwiema stronami. Jeżeli już musisz zachować przekierowania, rozbij łańcuch, upewniając się, że każde z przekierowań odsyła użytkownika na stronę główną.

Narzędzia, które pomogą zwiększyć szybkość strony

Oto krótki przegląd narzędzi, które mogą okazać się przydatne przy implementacji powyższych wskazówek:

• Google PageSpeed ​​Insights – to narzędzie zostało omówione szczegółowo powyżej. Naszym zdaniem najlepsze rozwiązanie dla przeprowadzania testów oraz optymalizacji witryny.
• Pingdom i GTmetrix – oba te narzędzia pozwalają świetnie rozszerzyć wiedzę, jaką dostarczają nam wyniki Google PageSpeed Insights – w szczególności biorąc pod uwagę rozbieżności geograficzne. Świetnie ukazują całościowy obraz szybkości strony, dzięki czemu pozwalają zidentyfikować występujące problemy.
• WebPageTest – proste narzędzie służące do testowania TTFB.
• DNSPerf – świetnie narzędzie do testowania szybkości Twojego dostawcy DNS.
• Google Test My Site – dzięki Google Test My Site możesz wygenerować dosyć obszerny raport na temat wydajności mobilnej wersji Twojej strony, zawierający m. in. informacje o szybkości strony. Świetnie sprawdza się jako uzupełnienie statystyk otrzymanych dzięki Google PageSpeed Insights.
• Google Analytics – wprowadzane zmiany należy łączyć z konkretnymi, wymiernymi rezultatami na wszystkich etapach procesu optymalizacji. Google Analytics umożliwia śledzenie, w jaki sposób optymalizacja szybkości wpływa na ruch w witrynie, zaangażowanie użytkowników oraz konwersje.
• Narzędzia kompresji obrazu – przy edycji obrazów powinieneś zadbać o zachowanie jak największej kontroli. Photoshop oraz GIMP (który jest bezpłatny!) to dwa bogate w funkcje programy do edycji obrazów, które pozwolą Ci skompresować obrazy dokładnie tak, jak zechcesz.
• Narzędzia CSS Sprite (ang. CSS Sprite Tools) – istnieje wiele darmowych narzędzi do tworzenia sprite’ów CSS (kompilacji obrazów), np. Toptal, Spritegen czy Sprite Cow.
• Systemy dostarczania treści (CDN, ang. Content Delivery Network) – istnieje wiele fantastycznych systemów dostarczania treści, zawierających szereg dodatkowych funkcji. Warto poznać chociażby kilka, jak np. CloudFlare, Amazon AWS czy Google Cloud CDN.
• Narzędzia minifikacji (ang. Minify Tools) – Minifikację najlepiej wykonać za pomocą CDN, który zautomatyzuje cały proces. W tym celu wypróbuj Minifier lub JSCompress.

Czy jesteś gotowy, aby poprawić szybkość strony e-commerce?

Zwiększanie szybkości strony to spore wyzwanie, ale jego efekty są warte wysiłku. Szybko ładująca się strona zapewnia zarówno obecnym, jak i potencjalnym klientom pozytywne doświadczenia, które mogą sprawić, że chętnie wrócą do Twojego sklepu.

Nie zapominaj jednak, jak ważna jest konsekwencja w działaniu. Regularnie monitoruj swoje wyniki i optymalizuj. Aby uzyskać optymalne wyniki, testowanie szybkości i optymalizacja muszą być przeprowadzane regularnie (jak zwykle, gdy mówimy o optymalizacji e-commerce).

Najlepiej byłoby, gdyby testy szybkości strony zostały wbudowane w szerszą strategię optymalizacji. Przeprowadzane powinny być dla każdej nowej strony w witrynie oraz każdorazowo po modyfikacji strony już istniejącej, a także okresowo ponawiane w całej witrynie.

Najwyższy czas zatem, aby przejść do PageSpeed Insights.