Optymalizacja pagespeed projektu e-commerce z kursami
W tym case study przedstawiamy jak wygląda optymalizacja pagespeed projektu e-commerce oferującego kursy windykacji online. Działania skoncentrowane były na poprawie szybkości ładowania strony, dostępności oraz doświadczenia użytkownika (UX).
1. Techniczne optymalizacje WordPressa – szybkość ładowania i struktura
Pierwszym krokiem była optymalizacja techniczna strony, która działała na WordPressie. Wykorzystaliśmy sprawdzone metody, aby usprawnić ładowanie strony i poprawić strukturę jej elementów.
Działania:
- Optymalizacja cache: Wdrożenie wtyczki LiteSpeed Cache, która wykorzystuje możliwości LiteSpeed Server do efektywnego zarządzania pamięcią podręczną.
- Minimalizacja zasobów: Zoptymalizowaliśmy pliki CSS i JavaScript, zmniejszając ich rozmiar i liczbę żądań HTTP.
- Obrazy w formacie WebP: Wszystkie grafiki na stronie zostały przekonwertowane do nowoczesnego formatu WebP, co zmniejszyło ich wagę bez utraty jakości.
- Lazy-loading: Wprowadziliśmy leniwe ładowanie obrazów, co pozwoliło znacząco zmniejszyć czas wstępnego ładowania strony.
- Struktura strony: Poprawiliśmy hierarchię nagłówków oraz oznaczenia sekcji, co wpłynęło pozytywnie na czytelność strony zarówno dla użytkowników, jak i robotów wyszukiwarek.
2. Optymalizacja PageSpeed – przed i po
W ramach optymalizacji prędkości wykonaliśmy audyt PageSpeed dla strony głównej oraz kluczowych podstron.
Audyt strony przed rozpoczęciem prac
Wyniki przed optymalizacją:
- Desktop: 70–90 punktów w Google PageSpeed Insights.
- Mobile: 60–80 punktów, z problemami dotyczącymi render-blocking scripts i nieoptymalnych obrazów.
Nasze działania:
- Krytyczny CSS: Wygenerowaliśmy krytyczne style CSS, które ładowały się w pierwszej kolejności, aby przyspieszyć wyświetlanie widocznych treści.
- Caching oraz CDN: Wprowadziliśmy caching oraz CDN vimeo do dystrybucji zasobów video, co skróciło czas ładowania dla użytkowników z różnych lokalizacji.
- Eliminacja render-blocking scripts: Przebudowaliśmy kolejność ładowania zasobów, dzięki czemu kluczowe elementy ładowały się w pierwszej kolejności.
Rezultaty optymalizacji:
- Desktop: 95+ punktów w Google PageSpeed Insights.
- Mobile: 95+ punktów – znacząca poprawa czasu ładowania i wydajności na urządzeniach mobilnych.
3. Optymalizacja dostępności strony (Accessibility)
Dostępność strony była kluczowym elementem projektu, aby zapewnić łatwy dostęp do kursów dla wszystkich użytkowników. Wprowadziliśmy poprawki zgodne z wytycznymi WCAG (Web Content Accessibility Guidelines).
Działania
- Kontrast kolorów: Zwiększyliśmy kontrast tekstów i tła, aby poprawić czytelność dla użytkowników z wadami wzroku.
- Alt text dla obrazów: Wszystkie obrazy otrzymały opisy alternatywne, co wspiera zarówno użytkowników korzystających z czytników ekranowych, jak i SEO.
- Struktura nagłówków: Poprawiliśmy hierarchię nagłówków (H1, H2, H3), co ułatwiło nawigację po stronie.
- Dostępne formularze: Formularze rejestracji i logowania zostały wzbogacone o etykiety oraz komunikaty walidacyjne.
Podsumowanie efektów optymalizacji
Dzięki przeprowadzonym działaniom projekt zyskał na jakości i funkcjonalności, co przełożyło się na lepsze wyniki biznesowe oraz pozytywny odbiór wśród użytkowników.
- Szybkość ładowania strony: Strona osiągnęła wynik 90+ w narzędziach Google PageSpeed zarówno na urządzeniach mobilnych, jak i desktopowych.
- Dostępność (Accessibility): Usprawnienia zgodne z WCAG pozwoliły osiągnąć wynik 90+ w narzędziach do analizy dostępności.
- Ulepszona struktura strony: Poprawa hierarchii nagłówków i danych strukturalnych przyczyniła się do lepszej widoczności w wynikach wyszukiwania.
- Lepsze doświadczenie użytkownika: Strona stała się bardziej intuicyjna i szybka, co przełożyło się na wzrost satysfakcji użytkowników i lepsze wyniki konwersji.
