Shoper jako SaaS rozdziela odpowiedzialność między platformę, konfigurację sklepu, motyw i zewnętrzne skrypty. Nie każda warstwa jest dostępna właścicielowi sklepu, dlatego zaczynamy od pomiaru konkretnego elementu LCPCzas, po którym ładuje się największy widoczny element strony — kluczowy wskaźnik szybkości i czynnik rankingowy. Pełna definicja w słowniku → i jego łańcucha ładowania. Nie obiecujemy wyniku poniżej dwóch sekund bez danych z danej witryny.
Co mierzę i jak
CrUX i PageSpeed Insights pokazują dane polowe, gdy dla danego adresu lub źródła jest wystarczająca próbka. Test laboratoryjny nie zastępuje danych użytkowników, ale pomaga odtworzyć waterfall, kod i element LCP. Używaj obu rodzajów pomiaru do różnych zadań.
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
Sprawdź, czy font rzeczywiście znajduje się w łańcuchu krytycznym, ile wariantów jest pobieranych i czy preload wskazuje dokładnie używany plik. Nie preloaduj wszystkich wag.
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
Lazy loading stosuj do obrazów poza pierwszym viewportem. Obrazu LCP nie odkładaj; nadaj mu prawidłowy priorytet, wymiary oraz wariant dopasowany do viewportu.
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".
Po wdrożeniu porównaj ten sam typ strony, urządzenie i warunki testu. Liczba miniatur w pierwszym viewportcie zależy od układu, więc nie kopiuj jednego progu do każdego sklepu.
Fix 3: Critical CSS inline
Krytyczny CSS powinien być częścią kontrolowanej warstwy motywu lub procesu budowania. Nie wstrzykuj stylów odpowiedzialnych za pierwsze renderowanie przez GTM.
Critical CSS to style potrzebne do wyrenderowania pierwszego widoku. Jego zakres wyznacza pomiar i struktura motywu, nie uniwersalny limit rozmiaru.
Narzędzie do generowania critical CSS: criticalcss.com lub purgecss lokalnie.
Po zbudowaniu i przetestowaniu motywu niewielki zestaw stylów krytycznych może trafić do <head>. Resztę CSS ładuj bez ryzyka pozostawienia strony bez stylów:
<link rel="stylesheet" href="style.css" media="print"
onload="this.media='all'">Wpływ zależy od obecnego CSS, cache i elementu LCP. Sprawdź regresje wizualne oraz zachowanie bez JavaScript.
Fix 4: Obrazy produktowe — format, warianty i wymiary
Sprawdź format, rozmiary wariantów, kompresję i faktyczny adres zwracany przez sklep. Nie zakładaj obsługi konkretnego formatu na podstawie rozszerzenia albo niezweryfikowanej wersji platformy.
Dodaj prawidłowe width i height albo zarezerwuj miejsce przez aspect-ratio. Przeglądarka powinna znać proporcje obrazu przed pobraniem pliku, aby ograniczyć przesunięcia układu.
Protokół wyniku przed i po zmianie
| Pole | Co zapisać |
|---|---|
| Typ strony | Strona główna, kategoria albo produkt |
| Element LCP | Konkretny selektor i zasób |
| Dane polowe | Zakres dat, urządzenie i 75. percentyl |
| Laboratorium | Profil sieci, CPU, liczba prób i mediana |
| Zmiana | Jeden opisany wariant wdrożenia |
| Regresje | CLS, INP, błędy obrazu, wygląd i checkout |
Taki zapis pozwala wykazać efekt konkretnej decyzji bez publikowania anonimowych benchmarków.
Gdzie sprawdzić granicę odpowiedzialności
- TTFB i nagłówki cache — zmierz odpowiedzi oraz sprawdź aktualny kontrakt platformy.
- CDN i protokół — potwierdź w dokumentacji i z pomocą techniczną Shopera.
- Kod motywu, obrazy i skrypty zewnętrzne — zinwentaryzuj elementy, które kontrolujesz.
Jeśli nie wiesz, od czego zacząć, zamów diagnozę sklepu Shoper. Wskażemy element LCP, granicę platformy i kolejność testów — bez deklarowania wyniku przed pomiarem.
Źródła referencyjne i dalsza weryfikacja
Materiały poniżej prowadzą do dokumentacji właścicieli platform i instytucji. Są punktem kontroli aktualności, a nie automatycznym potwierdzeniem każdego zdania w artykule.
Opublikowano: · Zaktualizowano:
Masz pytania do tego artykułu lub chcesz żebym spojrzał na Twój sklep?
Napisz do CyberSolus →