Core Web Vitals PrestaShop: monitoring CrUX i diagnostyka modułów (dfcoreweb)

DataFirefly Core Web Vitals sprowadza do zaplecza sklepu pomiary wydajności rzeczywiście odczuwanej przez Twoich użytkowników Chrome (raport CrUX od Google), osobno dla każdego typu strony: strona główna, kategoria, strona produktu, koszyk, strona CMS i cała domena. Moduł przechowuje historię, powiadamia e-mailem, gdy wskaźnik się pogorszy, porównuje Twój sklep z konkurencją i za pomocą diagnostyki PageSpeed Insights wyjaśnia, który moduł, plik motywu lub usługa zewnętrzna spowalnia stronę.

Wymaganie wstępne: klucz API Google

Moduł korzysta z dwóch bezpłatnych interfejsów API Google z tym samym kluczem: Chrome UX Report (rzeczywiste pomiary) i PageSpeed Insights (zakładka Diagnostyka).

1. Otwórz Google Cloud Console i utwórz projekt lub wybierz istniejący.
2. W sekcji Interfejsy API i usługi > Biblioteka włącz Chrome UX Report API.
3. W tej samej bibliotece włącz PageSpeed Insights API.
4. W sekcji Interfejsy API i usługi > Dane logowania kliknij Utwórz dane logowania > Klucz API i skopiuj klucz (zaczyna się od AIzaSy).

Instalacja i aktualizacja

1. Otwórz Moduły > Menedżer modułów i kliknij Zainstaluj moduł.
2. Wgraj plik dfcoreweb-1.3.0.zip.
3. Kliknij Konfiguruj: otworzy się pulpit modułu.

Instalacja tworzy 5 tabel i menu Core Web Vitals w sekcji Usprawnienia, z 5 stronami: Pulpit, Zalecenia, Historia, Diagnostyka i Ustawienia.

Moduł wymaga PHP 8.1. Na starszym serwerze (PrestaShop 8.0 i 8.1 nadal akceptują PHP 7.2) instalacja jest odrzucana z komunikatem podającym wersję PHP serwera, zamiast uszkodzić zaplecze.

Aktualizacja do wersji 1.3.0

Zainstaluj dfcoreweb-1.3.0.zip na bieżącą wersję, bez odinstalowywania: ustawienia, pomiary, analizy i zdarzenia zostają zachowane, a adres URL zaplanowanego zadania się nie zmienia. Aktualizacja dodaje kolumnę odróżniającą zaimportowane analizy i tłumaczy menu na polski, niderlandzki i portugalski.

Aktualizacja z wersji 1.0.0

Zainstaluj nowy plik ZIP na poprzednią wersję, bez odinstalowywania. Aktualizacja porządkuje menu, naprawia pomiary zapisane przez wersję 1.0.0 (brakujące wskaźniki były w niej zapisywane jako 0), dodaje nowe tabele i usuwa stare pliki.

Ustawienia

Klucz API

Wklej klucz i kliknij Zapisz i przetestuj. Moduł odpytuje CrUX dla domeny sklepu i wyświetla jeden z poniższych wyników:

• Klucz prawidłowy: CrUX zwraca dane: wszystko gotowe.
• Klucz prawidłowy. CrUX nie ma jeszcze wystarczającego ruchu z Chrome dla domeny: klucz działa, niektóre często odwiedzane strony mogą mimo to zwracać pomiary, a Diagnostyka pozostaje dostępna.
• Google odrzucił klucz API: sprawdź klucz i to, czy Chrome UX Report API jest włączone w projekcie.
• Klucz prawidłowy, ale API nie jest włączone: klucz działa, ale Chrome UX Report API nie jest włączone w jego projekcie Google Cloud; komunikat wskazuje, gdzie je włączyć.
• Serwer sklepu nie może połączyć się z serwerami Google: zobacz rozwiązywanie problemów na końcu strony.

Monitorowane urządzenia

• Telefon: włączony domyślnie, to typ urządzenia, którego Google używa do oceny wrażeń użytkownika strony.
• Komputer: włączony domyślnie.
• Tablet: wyłączony domyślnie, CrUX rzadko ma wystarczająco danych dla tego segmentu.

Co najmniej jedno urządzenie jest zawsze aktywne: jeśli odznaczysz wszystkie, ponownie włączany jest Telefon.

Mierzone strony

Strona główna, koszyk i cała domena są mierzone zawsze. Dla pozostałych typów pozostaw pole puste, aby wybór był automatyczny, lub wpisz identyfikatory rozdzielone przecinkami:

• ID produktów: puste = 3 najlepiej sprzedające się produkty z ostatnich 90 dni (zatwierdzone zamówienia sklepu), a w razie ich braku 3 najnowsze produkty.
• ID kategorii: puste = 3 kategorie zawierające najwięcej aktywnych produktów, z wyłączeniem kategorii głównej i kategorii strony głównej.
• ID stron CMS: puste = żadna strona CMS nie jest mierzona.

Konkurenci

Wpisz do 5 domen, jedną na linię (konkurent.pl lub https://www.konkurent.com). Pomiary CrUX są publiczne, więc moduł mierzy całą domenę każdego konkurenta bez instalowania czegokolwiek po jego stronie. Konkurenci nie są uwzględniani w alertach ani w rekomendacjach.

Automatyczna synchronizacja

• Zezwalaj na wywołania poniższego adresu URL synchronizacji: włącza zaplanowane zadanie opisane niżej.
• Importuj cotygodniową historię CrUX: pobiera do 40 tygodni wcześniejszych pomiarów dla każdej strony, a następnie odświeża je raz w tygodniu.
• Automatyczna analiza laboratoryjna: zaplanowane zadanie analizuje jedną stronę dziennie w PageSpeed Insights (mobile), dzięki czemu każda strona jest sprawdzana mniej więcej raz w tygodniu.
• Przechowywanie historii: domyślnie 365 dni, od 30 do 3650. Starsze pomiary, analizy i zdarzenia są usuwane przy każdej synchronizacji.

Alerty o regresji

• Wysyłaj e-mail, gdy wskaźnik się pogorszy: włącza alerty.
• Odbiorca: puste = adres e-mail sklepu.
• Próg pogorszenia: domyślnie 15%, od 5 do 100%.

Przy każdej synchronizacji LCP, INP, CLS i TTFB każdej strony i każdego urządzenia są porównywane ze średnią z poprzednich 7 dni (co najmniej 3 pomiary). Alert jest wysyłany, gdy wzrost przekracza próg i wartość nie mieści się już w zielonej strefie Google. Wszystkie regresje z jednej synchronizacji trafiają do jednego e-maila, a ta sama strona nie wywołuje alertu dla tego samego wskaźnika przez 7 dni. Przycisk Wyślij testowy e-mail pozwala sprawdzić adres i konfigurację e-mail sklepu.

Pulpit PrestaShop

Opcja Pokazuj podsumowanie dla urządzeń mobilnych dodaje na stronie głównej zaplecza blok z mobilnymi wartościami LCP, INP i CLS według typu strony oraz ich statusem.

Zaplanowane zadanie

Zakładka Ustawienia wyświetla adres URL do wywoływania raz dziennie oraz gotową do skopiowania linię crontab:

17 6 * * * curl -fsS "https://twoj-sklep.pl/module/dfcoreweb/cron?token=TWOJ_TOKEN" > /dev/null

Na hostingu współdzielonym użyj harmonogramu w panelu administracyjnym hostingu lub usługi takiej jak cron-job.org. Każde wywołanie:

1. aktualizuje listę monitorowanych stron (bestsellery, kategorie);
2. odpytuje CrUX dla każdej strony, urządzenia i konkurenta;
3. w razie potrzeby wysyła e-mail z alertem;
4. importuje tygodniową historię, gdy przychodzi na to pora;
5. uruchamia dzienną analizę laboratoryjną;
6. usuwa dane starsze niż okres przechowywania.

Adres URL odpowiada w formacie JSON z kodem 200, gdy wszystko przebiegło poprawnie, i 502 w razie niepowodzenia, aby Twoja usługa cron mogła Cię powiadomić. Uruchomienie, w którym żadne zapytanie się nie powiodło, liczy się jako niepowodzenie, a synchronizacja zatrzymuje się, gdy tylko Google trzy razy z rzędu zwróci błąd serwera, zamiast ponawiać próby dla każdej strony. Nieprawidłowy token otrzymuje kod 403. Zadanie działa także wtedy, gdy sklep jest w trybie konserwacji, i nie uruchomi się dwa razy jednocześnie dla tego samego sklepu (blokada na 15 minut).

Pulpit ostrzega, jeśli zadanie nie zostało jeszcze ani razu wywołane lub jeśli od ponad 3 dni nie było synchronizacji. Przycisk Synchronizuj teraz uruchamia natychmiastowe pobranie danych, co przydaje się tuż po instalacji.

Pulpit

Kafelek dla każdego typu strony pokazuje, dla każdego urządzenia, pięć wskaźników na poziomie 75. percentyla z kroczących 28 dni, w kolorach progów Google:

• LCP (wyświetlenie głównej treści): dobry do 2,5 s, słaby powyżej 4 s.
• INP (responsywność na interakcje): dobry do 200 ms, słaby powyżej 500 ms.
• CLS (stabilność wizualna): dobry do 0,1, słaby powyżej 0,25.
• FCP (pierwsze wyświetlenie): dobry do 1,8 s, słaby powyżej 3 s.
• TTFB (czas odpowiedzi serwera): dobry do 0,8 s, słaby powyżej 1,8 s.

Oznaczenie Zaliczono lub Nie zaliczono działa według reguły Google: LCP, INP i CLS w zielonej strefie (INP jest pomijany, gdy CrUX go nie publikuje, co często zdarza się w koszyku). Pod każdą wartością strzałka pokazuje zmianę w porównaniu z sytuacją sprzed 4 tygodni: czerwona, gdy wskaźnik się pogarsza, zielona, gdy się poprawia. Gdy typ strony obejmuje kilka adresów URL, kafelek pokazuje ich średnią.

Niżej sekcja Porównanie z konkurencją szereguje Twoją domenę i domeny konkurentów według LCP, dla każdego urządzenia. Tabela Śledzone adresy URL pokazuje szczegóły każdej strony z jej pomiarami, ostatnim wynikiem PageSpeed (kolumna Lab) i dwoma skrótami: do jej historii i do jej diagnostyki.

Zalecenia

Każdy wskaźnik poza zieloną strefą generuje rekomendację. Rekomendacje o tej samej przyczynie są łączone w jedną kartę, która wymienia strony, których dotyczy, wraz z ich wartościami (na przykład TTFB na stronie głównej, w kategoriach i na stronach produktów). Każda karta zawiera:

• poziom ważności: Krytyczne (strefa czerwona), Do poprawy (strefa pomarańczowa) lub Wskazówka;
• prawdopodobną przyczynę na tym typie strony PrestaShop i kroki naprawcze;
• rząd wielkości wpływu, zaczerpnięty z publicznych badań i przedstawiony jako szacunek;
• linki do odpowiednich ekranów (Wydajność, Ustawienia zdjęć, Pozycje modułów, Reguły koszyka) i do Diagnostyki.

Odrzuć na 30 dni ukrywa kartę dla wszystkich jej stron. Karta wraca, jeśli problem obejmie nową stronę, a link u góry strony wyświetla odrzucone zalecenia, aby można je było przywrócić.

Historia

Wybierz typ strony, adres URL (lub średnią ze wszystkich adresów URL tego typu), urządzenie i okres (30, 90, 180 lub 365 dni). Wyświetla się sześć wykresów: LCP, INP, CLS, TTFB, FCP oraz odsetek zaliczonych adresów URL, z progami Google zaznaczonymi linią przerywaną.

Przed pierwszą synchronizacją każdy punkt odpowiada jednemu tygodniowi zaimportowanemu z historii CrUX; później jest jeden punkt na synchronizację. Każdy punkt obejmuje 28 poprzedzających go dni: pełny efekt zmiany widać po około 4 tygodniach.

Zdarzenia

Instalacje i odinstalowania modułów są zapisywane automatycznie i wyświetlane liniami przerywanymi na wykresach. Dodaj własne znaczniki z datą i opisem (aktualizacja motywu, zmiana hostingu, kampania), aby powiązać zmianę z jej przyczyną. Po najechaniu na punkt wyświetlają się pobliskie zdarzenia.

Przycisk Eksport CSV pobiera wyświetlany wybór wraz ze źródłem każdego punktu (tygodniowy lub dzienny).

Diagnostyka strony

Wybierz monitorowaną stronę i urządzenie (Telefon lub Komputer), a następnie kliknij Uruchom analizę. Google wczytuje stronę ze swoich serwerów, a wynik pojawia się w ciągu 20 do 60 sekund. Wynik zostaje zapisany: zmiana strony lub urządzenia wyświetla ostatnią analizę bez uruchamiania nowej.

Wynik i zrzut strony

Wynik wydajności (na 100), wartości LCP, TBT, CLS, FCP, Speed Index i TTFB, łączny rozmiar, liczba żądań oraz zrzut tego, co wyświetlił Google.

Element LCP

Element, który wyznacza LCP (obraz, baner, tytuł), wraz z jego kodem HTML oraz podziałem jego czasu na cztery etapy: odpowiedź serwera, oczekiwanie przed pobraniem, pobieranie zasobu i opóźnienie wyświetlenia. Wskazówka dotyczy najdłuższego etapu, na przykład wczytania obrazu z wyprzedzeniem, gdy przeglądarka wykrywa go późno, lub usunięcia loading="lazy", gdy obraz LCP jest wczytywany z opóźnieniem.

Co obciąża stronę

Każdy wczytany plik jest przypisywany do swojego źródła na podstawie ścieżki:

• Moduł: pliki w /modules/nazwa_modulu/, wyświetlane z nazwą modułu;
• Motyw: pliki w /themes/nazwa/;
• Sklep: pliki rdzenia PrestaShop, obrazy sklepu oraz strona HTML ze skryptami zapisanymi bezpośrednio w niej;
• Usługa zewnętrzna: każda inna domena, nazwana przez Google, jeśli ją rozpoznaje (Google Tag Manager, Facebook, narzędzia czatu…).

Dla każdego źródła: czas CPU (wykonywanie JavaScriptu podczas wczytywania, główna przyczyna wysokiego INP), rozmiar JS, CSS i pozostałych plików, nieużywany JavaScript oraz liczba żądań. Tabela jest posortowana według czasu CPU.

Pliki blokujące i problemy wykryte przez Google

Lista plików blokujących wyświetlanie, każdy z przypisanym modułem lub źródłem, oraz problemy wykryte przez Google (pamięć podręczna, format obrazów, nieużywany JavaScript…), uszeregowane według szacowanego zysku, każdy ze wskazówką dla PrestaShop. Opisy Google są wyświetlane w języku zaplecza.

Poprzednie analizy

Tabela ostatnich analiz strony (wynik, LCP, TBT, CLS, rozmiar lub napotkany błąd) pozwala sprawdzić efekt wprowadzonej poprawki.

Przykład: pomiar efektu poprawki

W sklepie demonstracyjnym (PrestaShop 9.1.5, motyw Hummingbird) przeanalizowaliśmy stronę produktu narzędziem Lighthouse 12 w trybie mobilnym, z wyłączoną, a następnie ponownie włączoną inteligentną pamięcią podręczną CSS i JavaScript (CCC): trzy analizy dla każdego stanu, uwzględnione mediany. Wynik wzrasta z 78 do 85, LCP spada z 4,96 s do 4,13 s, liczba żądań z 65 do 31, a liczba plików blokujących wyświetlanie z 15 do 2. Te wartości pochodzą z lokalnego sklepu w trybie debugowania: liczy się tylko różnica. Zysk daje ustawienie PrestaShop; moduł służy do wykrycia problemu, a następnie do sprawdzenia efektu poprawki.

Import raportu Lighthouse

Google nie może przeanalizować sklepu w środowisku testowym, chronionego hasłem lub w trybie konserwacji. Uruchom wtedy Lighthouse w Chrome (DevTools > Lighthouse) lub z wiersza poleceń, zapisz raport w formacie JSON i zaimportuj go w polu Importuj raport Lighthouse (JSON) w zakładce Diagnostyka, dla wybranej strony. Raport jest analizowany tak jak analiza PageSpeed Insights (element LCP, obciążenie według modułu, pliki blokujące). Urządzenie jest odczytywane z raportu, ostrzeżenie pojawia się, jeśli raport dotyczy innego adresu URL, a analiza jest oznaczona jako Zaimportowano na liście analiz. Pomiar wykonany z Twojego komputera zależy od Twojego łącza i sprzętu: porównuj go przede wszystkim z innymi pomiarami wykonanymi w ten sam sposób.

Analiza automatyczna

Przy włączonej opcji Automatyczna analiza laboratoryjna zaplanowane zadanie codziennie analizuje stronę, której ostatnia analiza mobilna jest najstarsza, o ile ma ona więcej niż 7 dni. W sklepie bez pomiarów CrUX dla poszczególnych stron jest to jedyny pomiar, który zmienia się w czasie.

Status „Za mały ruch z Chrome”

CrUX publikuje pomiar tylko wtedy, gdy wystarczająca liczba użytkowników Chrome wczytała dany adres URL w ciągu 28 dni. W przeciwnym razie moduł zapisuje ten status bez błędu, a synchronizacja jest kontynuowana. Oprzyj się wtedy na pomiarach dla całej domeny, która łatwiej osiąga próg, oraz na zakładce Diagnostyka dla tych stron.

Prywatność

Do Google wysyłane są wyłącznie monitorowane publiczne adresy URL oraz wpisane przez Ciebie domeny konkurentów. Żadne dane klientów nie opuszczają sklepu. Wszystkie pomiary, analizy i zdarzenia pozostają w Twojej bazie PrestaShop; każda analiza przechowuje podsumowanie i zrzut strony (około 50 KB) przez ten sam okres przechowywania. Chart.js jest wbudowany w moduł: żadnego CDN, żadnej telemetrii.

Rozwiązywanie problemów

• „Google odrzucił klucz API”: klucz został błędnie skopiowany, Chrome UX Report API nie jest włączone w projekcie lub dla klucza ustawiono ograniczenie według strony odsyłającej HTTP.
• „Klucz jest prawidłowy, ale interfejs Chrome UX Report API nie jest włączony”: włącz Chrome UX Report API w sekcji Interfejsy API i usługi > Biblioteka projektu, do którego należy klucz.
• „PageSpeed Insights API nie jest włączone” (zakładka Diagnostyka): włącz PageSpeed Insights API w bibliotece tego samego projektu Google Cloud.
• „Serwer sklepu nie może połączyć się z serwerami Google”: dostawca hostingu blokuje połączenia wychodzące. Poproś go o zezwolenie na wychodzący ruch HTTPS do googleapis.com. Synchronizacja zatrzymuje się po dwóch nieudanych próbach, zamiast czekać przy każdej stronie.
• „Przekroczono limit”: synchronizacja zostanie wznowiona przy następnym uruchomieniu zadania. W przypadku PageSpeed spróbuj ponownie za minutę.
• „Synchronizacja dla tego sklepu jest już w toku”: synchronizacja tego sklepu już trwa; spróbuj ponownie za kilka minut.
• Adres URL crona zwraca 502 z server_error lub all_requests_failed: Google nie odpowiedział poprawnie, zadanie zostanie wznowione przy następnym uruchomieniu. Jeśli problem się utrzymuje, sprawdź klucz i limity w Google Cloud Console.
• Adres URL crona zwraca 403: token nie jest już ważny (nowy token lub aktualizacja z wersji 1.0.0). Skopiuj ponownie adres URL z zakładki Ustawienia.
• Testowy e-mail nie dociera: sprawdź adres oraz ustawienia w Zaawansowane > E-mail.
• Diagnostyka nie pokazuje szczegółów modułów: wyłącz CCC na czas jednej analizy (patrz wyżej).
• Menu się nie pojawia: wyczyść pamięć podręczną w Zaawansowane > Wydajność i sprawdź uprawnienia profilu pracownika do zakładek modułu.

Historia wersji

• 1.3.0 (29.10.2026): instalacja odrzucana z jasnym komunikatem na PHP starszym niż 8.1 (blok na pulpicie mógł uszkodzić stronę główną zaplecza); synchronizacja zgłaszana jako nieudana, gdy wszystkie zapytania kończą się błędem; osobny komunikat, gdy Chrome UX Report API nie jest włączone; wprowadzone dane zachowywane, gdy konfiguracja zostanie odrzucona; import raportu Lighthouse w formacie JSON; poprawione przypisanie plików jQuery UI z rdzenia PrestaShop; wskazówki dla Lighthouse 13; tłumaczenia na polski, niderlandzki i portugalski.
• 1.2.0: zakładka Diagnostyka (PageSpeed Insights), porównanie z konkurencją, import historii CrUX, zdarzenia na wykresach, blok na pulpicie PrestaShop.
• 1.1.0: przeorganizowane menu, alerty o regresji e-mailem, losowy token zaplanowanego zadania, naprawa pomiarów zapisanych przez wersję 1.0.0.
• 1.0.0: pierwsza wersja.

Odinstalowanie

Po potwierdzeniu odinstalowanie usuwa 5 tabel modułu, jego konfigurację i zakładki. Historia zostaje bezpowrotnie utracona: jeśli chcesz ją zachować, wcześniej wyeksportuj ją do CSV w zakładce Historia.