core-web-vitals

Skill do optymalizacji trzech kluczowych metryk wydajności strony: LCP (szybkość ładowania), INP (responsywność) i CLS (stabilność wizualna). Każda metryka ma konkretne progi — Google ocenia na 75. percentylu, więc 75% odwiedzin musi spełniać standardy "Dobrze". Otrzymasz konkretne rozwiązania dla typowych problemów: wolnej odpowiedzi serwera, zasobów blokujących renderowanie, powolnego ładowania obrazów i opóźnień renderowania po stronie klienta.

1. Zainstaluj skill core-web-vitals w swoim środowisku Claude lub kompatybilnym narzędziu AI. Skill automatycznie aktywuje się, gdy poprosisz o poprawę Core Web Vitals, naprawę LCP, zmniejszenie CLS, optymalizację INP lub ogólnie o optymalizację doświadczenia użytkownika strony.

2. Przygotuj informacje o swojej stronie: zmierz aktualne wartości LCP, INP i CLS za pomocą narzędzi takich jak PageSpeed Insights, Web Vitals Library lub Chrome DevTools. Zanotuj, które metryki nie spełniają progów (LCP ≤2,5s, INP ≤200ms, CLS ≤0,1).

3. Opisz skill'owi konkretny problem — na przykład "moja LCP wynosi 5 sekund" lub "mam problemy z layout shifts". Skill przeanalizuje przyczynę na podstawie trzech głównych kategorii: wolna odpowiedź serwera (TTFB), zasoby blokujące renderowanie (CSS, JavaScript) lub powolne ładowanie zasobów (obrazy, wideo).

4. Wdrażaj rekomendacje w kolejności priorytetów. Dla LCP: użyj CDN i cache'owania, wbuduj krytyczny CSS bezpośrednio w HTML, preload'uj hero image z atrybutem fetchpriority="high". Dla CLS: ustaw wymiary kontenerów, unikaj wstawiania treści powyżej istniejącej zawartości. Dla INP: zoptymalizuj JavaScript, podziel długie zadania na mniejsze bloki.

5. Po zmianach zmierz ponownie metryki — celem jest osiągnięcie statusu "Dobrze" dla wszystkich trzech na 75. percentylu wizyt. Skill może pomóc w interpretacji wyników i sugerowaniu kolejnych kroków, jeśli któraś metryka wciąż nie spełnia standardów.