# Core Web Vitals: kompletny przewodnik dla PrestaShop i WordPressa w 2026 > Kompletny przewodnik po Core Web Vitals (LCP, CLS, INP) dla PrestaShop i WordPressa w 2026 roku: pomiar, optymalizacja, narzędzia, częste błędy. - Strona: - Język: pl - Opublikowano: 2026-05-01 - Zaktualizowano: 2026-08-11 - Inne języki: [fr](https://www.datafirefly.com/2026/05/01/core-web-vitals-guide-prestashop-wordpress-2026/index.md), [en](https://www.datafirefly.com/en/2026/05/01/core-web-vitals-prestashop-wordpress-guide-2026/index.md), [es](https://www.datafirefly.com/es/2026/05/01/core-web-vitals-guia-prestashop-wordpress-2026/index.md), [de](https://www.datafirefly.com/de/2026/05/02/core-web-vitals-leitfaden-prestashop-wordpress-2026/index.md), [it](https://www.datafirefly.com/it/2026/05/01/core-web-vitals-guida-prestashop-wordpress-2026/index.md), [nl](https://www.datafirefly.com/nl/2026/05/01/core-web-vitals-gids-prestashop-wordpress-2026/index.md), [pt](https://www.datafirefly.com/pt/2026/05/01/core-web-vitals-guia-completo-prestashop-wordpress-2026/index.md) - Indeks: Core Web Vitals to nie tylko temat dla technicznych zapaleńców. Od 2024 roku Google używa ich jako realnego sygnału rankingowego na zapytaniach komercyjnych, a wpływ na konwersję jest mierzalny: witryna, która schodzi z 4 sekund do 2 sekund LCP, zyskuje zwykle od 10 do 25 % konwersji mobilnej. Ten przewodnik precyzyjnie omawia trzy aktualne metryki, sposoby ich pomiaru oraz optymalizację w PrestaShop i WordPressie w 2026 roku. ## Trzy Core Web Vitals, które trzeba znać ### LCP: Largest Contentful Paint LCP mierzy czas od rozpoczęcia ładowania strony do pojawienia się największego widocznego elementu w oknie przeglądarki. W sklepie internetowym tym elementem niemal zawsze jest obraz: główne zdjęcie produktu na karcie, hero na stronie głównej, baner kategorii. Oficjalne progi Google: - **Dobry**: poniżej 2,5 sekundy - **Do poprawy**: od 2,5 do 4 sekund - **Słaby**: powyżej 4 sekund ### CLS: Cumulative Layout Shift CLS mierzy stabilność wizualną strony w trakcie ładowania. Konkretnie: przycisk, który przesuwa się, gdy użytkownik zaczyna klikać, obraz, który spycha treść w dół, docierając z opóźnieniem, baner cookies, który przesuwa całą stronę. Im niższy wynik, tym lepiej. - **Dobry**: poniżej 0,1 - **Do poprawy**: od 0,1 do 0,25 - **Słaby**: powyżej 0,25 ### INP: Interaction to Next Paint INP zastąpiło FID (First Input Delay) w marcu 2024 roku. Mierzy opóźnienie między interakcją użytkownika (kliknięcie, dotknięcie, wpisanie znaku) a widoczną reakcją przeglądarki, w całej sesji, a nie tylko przy pierwszej interakcji. - **Dobry**: poniżej 200 ms - **Do poprawy**: od 200 do 500 ms - **Słaby**: powyżej 500 ms INP jest bardziej wymagające niż FID, bo obejmuje wszystkie interakcje, nie tylko pierwszą. Witryny, które ledwo zaliczały FID, często oblewają INP, zwłaszcza WooCommerce ze skryptami wariantów i dodawaniem do koszyka przez AJAX. ## Jak mierzyć Core Web Vitals Cztery uzupełniające się narzędzia: - **PageSpeed Insights** (darmowe, od Google): daje syntetyczną ocenę wraz z konkretnymi zaleceniami. Rozróżnia dane laboratoryjne (test symulowany) i terenowe (rzeczywiste, z Chrome User Experience Report) - **Lighthouse** (wbudowany w Chrome DevTools): pełny audyt lokalny, przydatny do wykrywania wąskich gardeł - **Google Search Console → Wrażenia → Core Web Vitals**: zagregowany widok witryny na podstawie rzeczywistych danych użytkowników Chrome - **WebPageTest**: szczegółowy test z wykresem waterfall i wyborem parametrów łącza Ważne: dane laboratoryjne z pojedynczego testu nie odzwierciedlają tego, czego doświadczają Twoi użytkownicy. Dane terenowe w Search Console są bardziej reprezentatywne i to one liczą się dla Google. ## Optymalizacja LCP ### Zidentyfikuj element LCP W Lighthouse sekcja _Largest Contentful Paint element_ wskazuje dokładnie, który element strony jest elementem LCP. Na karcie produktu w PrestaShop albo WooCommerce jest to niemal zawsze główne zdjęcie. ### Zoptymalizuj obrazy Trzy kluczowe działania: 1. **Konwersja do WebP albo AVIF**: zmniejsza rozmiar pliku o 30 do 60 % bez widocznej straty jakości. W PrestaShop konwersję automatyzują dedykowane moduły. W WordPressie wtyczki takie jak _ShortPixel_, _Imagify_ czy _Smush_. 2. **Serwuj właściwe wymiary**: nie wysyłaj obrazu 2000 na 2000 pikseli do miejsca o rozmiarze 400 na 400. Używaj `srcset` i `sizes`, aby dopasować obraz do każdego viewportu. 3. **Wczytuj wstępnie obraz LCP**: dodaj `` w sekcji `` dla głównego zdjęcia. Przeglądarka pobierze je z absolutnym priorytetem. ### Włącz cache HTTP W PrestaShop: cache Smarty plus cache pełnostronicowy przez moduł albo reverse proxy typu Varnish. W WordPressie: wtyczka cache (LiteSpeed Cache, jeśli serwer działa na LiteSpeed Web Server, w przeciwnym razie WP Rocket). Zysk na LCP przy poprawnie skonfigurowanym cache HTTP to zwykle 1 do 2 sekund. ### Wykorzystaj CDN Cloudflare, BunnyCDN albo CDN wbudowany w usługę hostingową. Do obrazów, wideo i zasobów statycznych. Obniża LCP użytkownikom oddalonym geograficznie od Twojego serwera. ## Optymalizacja CLS CLS jest zwykle najłatwiejsze do naprawienia. Trzy główne działania: ### Zawsze podawaj `width` i `height` przy obrazach Przeglądarka musi zarezerwować miejsce na obraz, zanim zostanie on wczytany. Bez wymiarów zarezerwowana przestrzeń jest zerowa, a treść poniżej przesuwa się w momencie dotarcia obrazu. ``` ... ``` Liczy się proporcja wymiarów. Przeglądarka użyje CSS do dopasowania do rzeczywistego rozmiaru wyświetlania, ale zarezerwuje miejsce w poprawnych proporcjach. ### Rezerwuj miejsce na banery i popupy Paski cookies, popupy newslettera i banery pilności na górze strony generują CLS, jeśli wstrzykują się po załadowaniu. Rozwiązania: renderowanie po stronie serwera (HTML obecny już przy ładowaniu, tylko uwidaczniany przez CSS) albo zarezerwowanie wysokości w CSS od samego początku. ### Poprawnie ładuj fonty webowe Zjawiska FOUT (Flash of Unstyled Text) i FOIT (Flash of Invisible Text) wywołują CLS, gdy font zastępczy i docelowy mają różne wymiary. Rozwiązania: `font-display: swap` z dobrze dobranym fontem awaryjnym (zbliżony rozmiar), wstępne wczytywanie krytycznych fontów przez `` albo użycie `font-size-adjust` do zrównania metryk. ## Optymalizacja INP INP jest najtrudniejsze z całej trójki. Zależy od jakości JavaScriptu wykonywanego w momencie interakcji użytkownika ze stroną. ### Ogranicz blokujący JavaScript Zaudytuj skrypty zewnętrzne: analitykę, czat, testy A/B, remarketing, popupy. Każdy dokłada czas wykonania na głównym wątku. Bądź bezlitosny: jeśli skrypt nie generuje mierzalnego przychodu, usuń go. Dla skryptów, które zostają: ładuj je z atrybutem `defer` albo `async`, gdy tylko to możliwe. Tagi śledzące niemal zawsze da się odroczyć. ### Dziel JavaScript na części W witrynach z dużą ilością JS code splitting (ładowanie tylko kodu potrzebnego na bieżącej stronie) obniża INP. W PrestaShop 8 z jego bundlami możliwości są ograniczone, ale w WordPressie z ciężkimi wtyczkami to często optymalizacja o dużym znaczeniu. ### Optymalizuj same interakcje Częste interakcje, które psują INP: - Dodanie do koszyka (szczególnie w WooCommerce) - Wybór wariantu produktu - Wyszukiwanie w mega menu z autouzupełnianiem - Zastosowanie filtra na liście produktów W każdym przypadku optymalizacja prowadzi przez profilowanie w Chrome (zakładka Performance), aby zidentyfikować wolne funkcje, a następnie ich refaktoryzację. ## Specyfika PrestaShop W PrestaShop najbardziej opłacalne działania to: - Włączenie cache Smarty oraz łączenia i minifikacji zasobów w **Parametry zaawansowane → Wydajność** - Kompilacja szablonów Smarty i wyłączenie rekompilacji przy każdej wizycie - Użycie modułu generującego krytyczny CSS dla obszaru widocznego bez przewijania - Audyt modułów zewnętrznych: jeden źle napisany moduł potrafi dołożyć 500 ms czasu po stronie serwera ## Specyfika WordPress i WooCommerce W WordPressie główne działania to: - Obowiązkowa wtyczka cache (LiteSpeed Cache, WP Rocket, W3 Total Cache) - Audyt wtyczek: wyłącz i usuń te nieużywane - Masowa konwersja obrazów do WebP przez ShortPixel albo odpowiednik - Ograniczenie skryptów WooCommerce na stronach, gdzie nie są potrzebne (strona główna, wpisy blogowe). Pozwala na to wtyczka typu _Asset CleanUp_ - Poważny hosting: na tanim współdzielonym nigdy nie przekroczysz wyniku Lighthouse mobile na poziomie 50 ## Częste błędy - Optymalizowanie wyłącznie wyniku Lighthouse dla desktopu. Dla Google liczy się mobile. - Ignorowanie danych terenowych na rzecz laboratoryjnych - Instalowanie 5 wtyczek cache „na wszelki wypadek”. Wchodzą sobie w drogę, a efekt jest gorszy - Kompresowanie obrazów do granic brzydoty. Celuj w 75 do 85 % jakości, nie niżej - Blokowanie z nadgorliwości niezbędnego JavaScriptu (przycisk dodania do koszyka przestaje działać) ## Aby pójść dalej Wszystkie nasze artykuły o wydajności znajdziesz w kategorii [Wydajność i Core Web Vitals](https://www.datafirefly.com/pl/kategoria/wydajnosc-core-web-vitals/). Po rozwiązania techniczne zajrzyj do [modułów SEO do PrestaShop](https://www.datafirefly.com/pl/categorie-produit/moduly-prestashop/seo-pozycjonowanie/), które zawierają optymalizacje Core Web Vitals (generowanie krytycznego CSS, zaawansowany lazy loading, konwersja WebP). Szybki sklep to sklep, który konwertuje, i prawdopodobnie najlepsza inwestycja techniczna 2026 roku. Aby przejść do działania: nasze zestawienia modułów przyspieszających sklep [dla PrestaShop](https://www.datafirefly.com/pl/solutions/prestashop/wydajnosc-i-szybkosc/) oraz [dla WooCommerce](https://www.datafirefly.com/pl/solutions/wordpress/wydajnosc-i-szybkosc/).