Shoper jako SaaS ma ograniczoną kontrolę nad infrastrukturą serwerową. Nie możesz zoptymalizować nginx, Redis ani zmienić CDN. Ale możesz zrobić dużo w warstwie front-endu — i to zwykle wystarczy żeby zejść poniżej 2s LCP.
Poniżej konkretna lista zmian, które wdrożyłem w ostatnich 12 miesiącach w sklepach Shoper z benchmarkami przed/po.
Co mierzę i jak
Zawsze używam CrUX (dane realne użytkowników z 28 dni) przez PageSpeed Insights, nie laboratoryjne wyniki z DevTools. Laboratoryjne wyniki są symulacją i nie korelują z tym co widzi Google.
Narzędzie: https://pagespeed.web.dev → wklej URL → zakładka „Field Data”.
Jeśli CrUX pokazuje za mało danych (mały ruch) — używam danych z GSC → Core Web Vitals.
Fix 1: Preload czcionek
Przed: LCP +800ms z powodu czcionek blokujących renderowanie
Po: LCP -400ms
Shoper Premium pozwala edytować <head> szablonu. Dodaj:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="font" type="font/woff2"
href="TWÓJ_URL_CZCIONKI.woff2" crossorigin>Jeśli używasz Google Fonts przez @import w CSS — zmień na <link> w <head> z &display=swap.
Fix 2: Lazy load dla obrazów
Przed: 48 miniatur ładowanych na starcie = 3-4s opóźnienie
Po: Tylko 4-6 obrazów w viewport przy starcie
W edytorze szablonu Shoper znajdź tagi <img> w listingach produktów i dodaj:
<img src="..." alt="..." loading="lazy" decoding="async">Obrazy hero sekcji (above the fold) — loading="eager", reszta — loading="lazy".
Efekt: strona lądowania z 48 miniaturami idzie z 3.8s do 1.4s czasu ładowania pierwszej interakcji.
Fix 3: Critical CSS inline
Trudniejszy w Shoper, ale możliwy przez GTM.
Critical CSS to style potrzebne do wyrenderowania tego co widać bez scrollowania — typowo 5-20KB. Reszta CSS może ładować się asynchronicznie.
Narzędzie do generowania critical CSS: criticalcss.com lub purgecss lokalnie.
Wynik wklejasz do Custom HTML w GTM i dodajesz do <head>. Resztę CSS ładujesz przez:
<link rel="stylesheet" href="style.css" media="print"
onload="this.media='all'">Efekt na sklepach Shoper: LCP -600ms do -1s.
Fix 4: Obrazy produktowe — WebP i wymiary
Przed: Obrazy JPEG 150-400KB bez wymiarów → CLS 0.3+
Po: WebP 30-80KB z wymiarami → CLS 0.02
Shoper od wersji 6.x generuje WebP automatycznie jeśli prześliesz obraz w JPEG/PNG. Upewnij się że używasz nowych URL-i z .webp.
Bezwzględnie dodaj width i height do każdego <img>. Bez nich przeglądarka nie zna rozmiaru obrazu przed załadowaniem → layout shift podczas ładowania → CLS rośnie.
Wyniki zbiorowe z 8 sklepów Shoper (2025-2026)
| Sklep | LCP przed | LCP po | Zmiana |
|---|---|---|---|
| Meble B2C | 5.4s | 1.8s | -67% |
| Odzież damska | 4.1s | 1.6s | -61% |
| Elektronika | 8.2s | 1.9s | -77% |
| Kosmetyki | 3.8s | 1.4s | -63% |
| Artykuły dla dzieci | 6.1s | 2.1s | -66% |
| Sport | 4.9s | 1.7s | -65% |
| Dom i ogród | 5.7s | 1.9s | -67% |
| Biżuteria | 3.2s | 1.3s | -59% |
Wszystkie sklepy: bez zmiany hostingu, bez nowej infrastruktury.
Czego nie możesz zoptymalizować na Shoper SaaS
- TTFB — serwer Shoper, brak dostępu
- CDN konfiguracja — zarządzana przez Shoper
- HTTP/3, server push — Shoper decyduje
- Cache-Control headers — Shoper ustawia
To co możesz: wszystko w warstwie HTML/CSS/JS szablonu i konfiguracja obrazów.
Jeśli Twój sklep Shoper ma LCP > 3s i nie wiesz od czego zacząć — wpisz domenę w komentarzu. Sprawdzę CrUX i powiem gdzie jest największy problem.
Masz pytania do tego artykułu lub chcesz żebym spojrzał na Twój sklep?
Napisz do mnie →