perf-astro

Skill do automatycznej optymalizacji stron Astro pod kątem wydajności. Wbudowuje krytyczne CSS, kompresuje zasoby i optymalizuje ładowanie czcionek, aby osiągnąć wyniki 95+ w Lighthouse. Integruje się z astro-critters do ekstrakcji CSS powyżej linii widoku oraz @playform/compress do minifikacji HTML, CSS i JavaScript. Idealny dla deweloperów, którzy chcą szybko poprawić metryki wydajności bez ręcznej konfiguracji.

1. Zainstaluj wymagane pakiety: npm install astro-critters @playform/compress. 2. Otwórz plik astro.config.mjs i dodaj importy: import critters from 'astro-critters' oraz import compress from '@playform/compress'. 3. Zarejestruj oba integracje w konfiguracji: critters() automatycznie wyodrębni i wbuduje CSS powyżej linii widoku, a compress() zminifikuje HTML, CSS i JavaScript w finalnym buildie. 4. Skonfiguruj opcje compress() — ustaw CSS, HTML i JavaScript na true, a Image i SVG na false, jeśli używasz zewnętrznej optymalizacji obrazów. 5. Uruchom build: npm run build. Sprawdź logi, aby zobaczyć, ile CSS zostało wbudowane (np. 40.70 kB z 50.50 kB). 6. Uruchom audit Lighthouse, aby potwierdzić osiągnięcie wyników 95+.