Core Web Vitals PrestaShop: monitoring CrUX według szablonu (dfcoreweb)

DataFirefly Core Web Vitals odpytuje API Chrome UX Report (CrUX) Google i sprowadza do panelu administracyjnego metryki wydajności rzeczywiście zmierzone u odwiedzających, osobno dla każdego typu strony: strona główna, kategoria, karta produktu, koszyk, strona CMS i zagregowany origin. Moduł przechowuje pełną historię, wykrywa regresje i przekłada każdą pogorszoną metrykę na konkretne działania po stronie PrestaShop.

Wymaganie wstępne: klucz API Chrome UX Report

Moduł potrzebuje klucza API Google, aby odpytywać CrUX. Klucz jest darmowy i uzyskuje się go w czterech krokach:

1. Otwórz Google Cloud Console i utwórz projekt (albo wybierz istniejący).
2. W sekcji Interfejsy API i usługi > Biblioteka wyszukaj Chrome UX Report API i kliknij Włącz.
3. W sekcji Interfejsy API i usługi > Dane logowania kliknij Utwórz dane logowania, a następnie Klucz API.
4. Skopiuj wygenerowany klucz (zaczyna się od AIzaSy) i wklej go w konfiguracji modułu.

Instalacja

1. W panelu administracyjnym otwórz Moduły > Menedżer modułów.
2. Kliknij Zainstaluj moduł i wgraj plik dfcoreweb.zip.
3. Po zakończeniu instalacji kliknij Konfiguruj.

Instalacja tworzy trzy tabele (monitorowane adresy URL, historyczne snapshoty, dziennik ukrytych rekomendacji) i dodaje menu DataFirefly Core Web Vitals w sekcji Usprawnienia, z czterema zakładkami: Pulpit, Konfiguracja, Historia i Rekomendacje.

Konfiguracja

Klucz API

Wklej klucz Chrome UX Report w przeznaczonym polu i zapisz. Dopóki pole jest puste, pulpit wyświetla ostrzeżenie i żadna synchronizacja nie jest możliwa.

Monitorowane typy urządzeń

CrUX publikuje metryki osobno dla każdego typu urządzenia. Trzy pola wyboru pozwalają wskazać, które śledzisz:

• Mobile: włączone domyślnie, to typ urządzenia używany przez Google do oceny doświadczenia strony.
• Desktop: włączone domyślnie, przydatne przy znaczącym ruchu z komputerów.
• Tablet: wyłączone domyślnie, CrUX rzadko dysponuje wystarczającymi danymi dla tego segmentu.

Każdy dodatkowy typ urządzenia zwiększa liczbę dziennych wywołań, bez ryzyka przekroczenia limitu przy tych wolumenach.

Monitorowane adresy URL

Domyślnie moduł sam wybiera reprezentatywny adres URL dla każdego typu strony: stronę główną, kategorię z największą liczbą produktów, najlepiej sprzedający się produkt, stronę koszyka i pierwszą aktywną stronę CMS. Odpytuje również origin, czyli agregację całej domeny.

Trzy pola pozwalają przejąć kontrolę, wpisując identyfikatory rozdzielone przecinkami:

• ID produktów: aby śledzić konkretną kartę produktu zamiast bieżącego bestsellera.
• ID kategorii: aby śledzić strategiczną kategorię.
• ID stron CMS: aby śledzić landing page lub stronę treściową o dużym ruchu.

Retencja danych

Pole Okres retencji (domyślnie 365 dni) określa wiek, powyżej którego snapshoty są czyszczone. Czyszczenie wykonuje się przy każdej synchronizacji, a przycisk na pulpicie pozwala uruchomić je ręcznie.

Alerty regresji

• Powiadamiaj o regresji: włącza wysyłkę e-maili.
• Adres e-mail: odbiorca alertów; pozostaw puste, aby użyć adresu sklepu.
• Próg regresji: procent pogorszenia wywołujący alert, domyślnie 15%.

Po każdej synchronizacji nowa wartość każdej metryki jest porównywana ze średnią z ostatnich siedmiu dni. Jeśli różnica przekracza próg, wysyłany jest e-mail w wersji HTML i tekstowej ze szczegółami zmiany oraz bezpośrednim linkiem do pulpitu.

Automatyczna synchronizacja

Strona konfiguracji wyświetla adres URL synchronizacji chroniony tokenem wyprowadzonym z klucza bezpieczeństwa sklepu. Wywołuj go raz dziennie z harmonogramu zadań:

0 6 * * * curl -s "https://twoj-sklep.com/index.php?fc=module&module=dfcoreweb&controller=cron&token=TWOJ_TOKEN" > /dev/null

W systemie Windows użyj Harmonogramu zadań; na hostingu współdzielonym sprawdzą się moduł Crontab Manager dla PrestaShop albo harmonogram panelu administracyjnego hostingu.

Przycisk Uruchom synchronizację na pulpicie pozwala natychmiast wywołać pobranie danych, co przydaje się do zweryfikowania konfiguracji tuż po instalacji.

Odczyt pulpitu

Pulpit wyświetla kafelek dla każdego typu strony, z ostatnią znaną wartością każdej metryki i kolorystyką odzwierciedlającą oficjalne progi Google:

• LCP (Largest Contentful Paint): dobry do 2,5 s, do poprawy do 4 s, zły powyżej.
• INP (Interaction to Next Paint): dobry do 200 ms, do poprawy do 500 ms, zły powyżej.
• CLS (Cumulative Layout Shift): dobry do 0,1, do poprawy do 0,25, zły powyżej.
• FCP (First Contentful Paint): dobry do 1,8 s, do poprawy do 3 s.
• TTFB (Time To First Byte): dobry do 0,8 s, do poprawy do 1,8 s.

Wszystkie wartości są wyrażone na 75. percentylu: reprezentują doświadczenie 25% najgorzej obsłużonych odwiedzających, zgodnie z metodologią Google. Sklep „zalicza” ocenę, gdy LCP, INP i CLS znajdują się jednocześnie w strefie zielonej.

Historia

Zakładka Historia nakłada na siebie przebieg każdej metryki w okresie 30, 90, 180 lub 365 dni, dla wybranego typu strony i typu urządzenia. Wykresy pokazują linią przerywaną progi Google, dzięki czemu przejście z jednej strefy do drugiej jest natychmiast czytelne. Dodatkowa krzywa śledzi odsetek wizyt sklasyfikowanych jako „dobre” dla trzech głównych metryk.

To widok do sprawdzenia po wdrożeniu produkcyjnym, migracji motywu lub dodaniu skryptu zewnętrznego: pogorszenie LCP pojawia się zazwyczaj w kolejnych dniach, przesunięte przez 28-dniowe okno ruchome.

Rekomendacje

Każda metryka poza progiem generuje jedną lub więcej rekomendacji przypisanych do danego typu strony, posortowanych według wagi:

• Krytyczna: metryka w strefie czerwonej, bezpośredni wpływ na pozycjonowanie i konwersję.
• Ostrzeżenie: metryka w strefie pomarańczowej, znaczący margines poprawy.
• Informacja: dobra praktyka do zastosowania nawet w strefie zielonej.

Wskazówki są sformułowane w słownictwie PrestaShop: format i preload obrazu okładkowego na karcie produktu, jawne wymiary miniatur w siatce kategorii, liczba modułów podpiętych do hooków nagłówka, kompresja i cache serwera dla TTFB, odroczenie skryptów zewnętrznych dla INP. Każda rekomendacja zawiera szacunek wpływu biznesowego skalibrowany na badaniu Deloitte „Milliseconds Make Millions”.

Przycisk Ukryj usuwa rekomendację z listy na 30 dni, dając czas na zajęcie się tematem lub uznanie go za niepriorytetowy.

Status „niewystarczające dane”

CrUX publikuje metrykę tylko wtedy, gdy wystarczająca liczba odwiedzających z Chrome załadowała dany adres URL w badanym okresie. Poniżej tego progu API odpowiada, że rekord nie istnieje: moduł zapisuje wtedy status „niewystarczające dane”, bez błędu i bez przerywania zbierania.

Jeśli dotyczy to większości Twoich stron, oprzyj się na wierszu Origin: agregacja całej domeny osiąga próg znacznie łatwiej i pozostaje reprezentatywna dla średniego doświadczenia Twojego sklepu.

Prywatność i przechowywanie danych

Żadne dane klientów nie są przekazywane do Google. Do API CrUX wysyłane są wyłącznie publiczne adresy URL, które wybrałeś do monitorowania, a zwracane metryki są już zanonimizowane i zagregowane przez Google. Wszystkie pomiary są przechowywane w Twojej własnej bazie danych PrestaShop. Biblioteka wykresów jest wbudowana w moduł: żadnych wywołań do zewnętrznego CDN, żadnej telemetrii, żadnego skryptu analitycznego po stronie odwiedzającego.

Rozwiązywanie problemów

• Błąd uwierzytelnienia przy synchronizacji: klucz API jest nieobecny, błędnie skopiowany albo API Chrome UX Report nie zostało włączone w projekcie Google Cloud. Sprawdź też, czy do klucza nie zastosowano ograniczeń adresu IP lub referera HTTP.
• Wszystkie wiersze ze statusem „niewystarczające dane”: ruch z Chrome na tych adresach jest zbyt mały. Śledź origin i wybierz ręcznie strony o dużym ruchu.
• Wywołanie crona zwraca błąd autoryzacji: token w adresie URL już nie pasuje. Zależy on od nazwy sklepu i klucza bezpieczeństwa instalacji: skopiuj ponownie adres wyświetlany w konfiguracji po każdej zmianie nazwy sklepu.
• Menu nie pojawia się po instalacji: wyczyść cache w Zaawansowane > Wydajność, a następnie sprawdź uprawnienia profilu pracownika do nowych zakładek.
• Wykresy pozostają puste: do narysowania krzywej potrzebne są co najmniej dwie synchronizacje z różnych dat. Odczekaj 24 godziny po pierwszym pobraniu.

Odinstalowanie

Odinstalowanie usuwa trzy tabele modułu, wszystkie klucze konfiguracji i zakładki panelu administracyjnego. Historia pomiarów jest bezpowrotnie tracona: wyeksportuj dane wcześniej, jeśli chcesz je zachować. Przed operacją wymagane jest jawne potwierdzenie.