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.
Optymalizacja pagespeed przed i po

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.
Optymalizacja pagespeed przed i po

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.