PageSpeed 95+ mobile przy pełnych animacjach Elite to osiągalne — ale wymaga precyzyjnego podejścia do każdego aspektu ładowania strony.
LCP (Largest Contentful Paint) — jak zejść poniżej 2s
LCP to najważniejsza metryka. Preloaduj hero image z fetchpriority="high", użyj format WebP/AVIF, inlineuj Critical CSS. Biblioteki CDN wczytuj przed zawartością.
CLS (Cumulative Layout Shift) — zero przesunięć
Definiuj wymiary dla każdego obrazu i elementu rezervującego miejsce. Unikaj wstrzykiwania contentu po załadowaniu above-the-fold. Font-display: swap to konieczność.
INP (Interaction to Next Paint) — responsywność
Ciężkie skrypty JS opóźniaj z defer lub wczytuj po interakcji. Zdarzenia mousemove powinny być throttlowane. GSAP używa rAF — jest naturalnie zoptymalizowany.
Deferowanie bibliotek bez utraty UX
Ładuj Swiper, Alpine.js i Lucide z defer. GSAP możesz wczytać synchronicznie (jest mały), ale ScrollTrigger dodaj z defer. Three.js wczytaj dynamicznie po załadowaniu viewport.