Case Study: Jak przyspieszyliśmy sklep internetowy o 3,8 sekundy i uratowaliśmy sprzedaż

Wstęp: Klienci uciekają, zanim strona zdąży się załadować

Budżet reklamowy rośnie, ruch na stronie jest, ale sprzedaż stoi w miejscu? To najczęstszy problem, z jakim trafiają do nas właściciele sklepów internetowych. W tym konkretnym przypadku klient przepalał budżet w Google Ads, ponieważ na urządzeniach mobilnych współczynnik odrzuceń przekraczał 70%. Użytkownicy po prostu zamykali stronę z frustracji.

W software house Kodolit nie zgadujemy. Odpalamy narzędzia diagnostyczne i sprawdzamy logi. Poniżej rozkładamy na czynniki pierwsze to, co spowalniało sklep, i pokazujemy, jak nasza ingerencja w kod uratowała konwersję.

1. Diagnoza: Dlaczego sklep "zamarzał" na telefonach?

Analiza w narzędziu Google PageSpeed Insights to dopiero wierzchołek góry lodowej. Sprawdziliśmy realne dane od użytkowników. Okazało się, że czas reakcji strony po kliknięciu (tzw. wskaźnik INP) wynosił aż 650 milisekund. Wyobraź sobie, że klikasz "Dodaj do koszyka" na ekranie smartfona i przez ponad pół sekundy nic się nie dzieje. Klient myśli, że sklep się zawiesił i klika jeszcze raz, powodując błędy w zamówieniu.

Co zapychało procesory w telefonach klientów?

Gdy użytkownik wchodził na kartę produktu, serwer ładował gigantyczną ilość niepotrzebnego na starcie kodu. Główne problemy to:

• Skrypty śledzące i marketingowe: Kody z Facebooka, analityka i widgety remarketingowe ładowały się w tym samym momencie co główna treść strony, blokując jej wyświetlenie.
• Zbyt ciężki czat obsługi klienta: Moduł czatu ładował swoje własne pliki graficzne i czcionki, zanim klient w ogóle zdążył zobaczyć cenę produktu.
• Przeładowany kod (nadmiar HTML/CSS): Efekt używania tanich, gotowych szablonów, które ładują funkcje dla całego sklepu, nawet jeśli w danym miejscu nie są używane.

2. Naprawa: Jak realnie przyspieszyliśmy stronę?

Zamiast maskować problem wtyczkami, które dają iluzję szybkości, weszliśmy w kod i wycięliśmy zbędny balast. Oto co konkretnie zrobiliśmy:

Inteligentne opóźnianie skryptów (Lazy Loading dla kodu)

Wszystkie skrypty marketingowe, analityczne oraz wspomniany czat, zostały skonfigurowane tak, by ładować się dopiero wtedy, gdy klient zacznie przewijać stronę (scrollować) lub ruszy myszką. Dzięki temu w pierwszych ułamkach sekundy telefon klienta skupia się wyłącznie na załadowaniu zdjęcia produktu i przycisku zakupu.

Błyskawiczne ładowanie zdjęcia głównego

Zmusiliśmy przeglądarkę, by zdjęcie sprzedawanego przedmiotu było traktowane jako absolutny priorytet (za pomocą specjalnego znacznika w kodzie strony). Dodatkowo zautomatyzowaliśmy konwersję ciężkich zdjęć JPG do najnowocześniejszych formatów kompresji (WebP i AVIF). Waga głównego obrazka spadła z 450 KB do zaledwie 48 KB – i to bez żadnej widocznej utraty jakości.

3. Twarde liczby: Wyniki po naszej optymalizacji

W SEO i e-commerce liczą się tylko fakty. Oto jak zmieniły się kluczowe wskaźniki szybkości od Google (Core Web Vitals) po naszych pracach inżynieryjnych:

Co to oznacza dla biznesu? Klienci przestali masowo opuszczać sklep na telefonach. Współczynnik odrzuceń spadł o 28%, a ilość dodanych do koszyka produktów wzrosła o 15% w ciągu pierwszych dwóch tygodni. Optymalizacja kodu po prostu na siebie zarobiła.