perf-web-optimization

Optimize web performance: Core Web Vitals (LCP, CLS, INP), bundle size, images, caching. Use when site is slow, optimizing for Lighthouse scores, reducing bundle size, fixing layout shifts, or improving Time to Interactive. Triggers on: web performance, Core Web Vitals, LCP, CLS, INP, FID, bundle size, page speed, slow site.

1. Zainstaluj umiejętność w swoim agencie AI (Claude, Copilot lub innym wspieranym systemie) poprzez dodanie jej do katalogu skills.

2. Uruchom umiejętność gdy pracujesz nad wydajnością strony — agent automatycznie zareaguje na słowa kluczowe takie jak: wydajność web, rozmiar bundla, szybkość strony, wolna strona, lazy loading.

3. Zmierz bieżące metryki swojej strony (LCP, INP, CLS, TTFB) za pomocą narzędzi takich jak Lighthouse lub Web Vitals. Agent pomoże Ci zidentyfikować, które metryki wymagają poprawy.

4. Wdrażaj konkretne optymalizacje zaproponowane przez agenta: dla obrazów ustaw loading="eager" i fetchpriority="high" dla LCP, loading="lazy" dla reszty; dla czcionek użyj preconnect i załaduj je bez blokowania renderowania; dla skryptów trzecich stron odłóż ich ładowanie do interakcji użytkownika (scroll, click).

5. Zawsze ustaw atrybuty width i height na obrazach, aby zapobiec przesunięciom layoutu (CLS).

6. Po wdrożeniu zmian ponownie zmierz metryki i zweryfikuj poprawę wyników — agent pomoże Ci śledzić postęp w kierunku dobrych wartości (LCP < 2.5s, INP < 200ms, CLS < 0.1).