Next.js static export и Core Web Vitals: playbook 2026

По 12 месеци на производствени податоци на 40+ Next.js страници со static export, еве го точниот playbook што го применуваме за постигнување 95+ PageSpeed на мобилен. Без теорија — само она што функционира мерливо.

Baseline: што static export дава бесплатно

Ванила Next.js static export страница постигнува 95-100 мобилен затоа што сиот HTML е пред-рендиран, низок TTFB, без cold starts. Додавајќи Framer Motion, Google Fonts, иконки, analytics, паѓате на 70-85.

LCP: битката против render-blocking CSS

PageSpeed извештаи покажуваат ист проблем: две render-blocking CSS датотеки додаваат ~500ms render delay на throttled мобилен. Тоа е 100% од LCP буџетот.

@font-face {
  font-family: 'Space Grotesk';
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
}

Стратегија за фонтови што функционира

• Display фонт (headings) — 1 variable font преку raw @font-face, preload fetchPriority=high.
• Body фонт — next/font/google Inter со 2 тежини (400, 600), само latin.
• Monospace — next/font/google JetBrains Mono, preload=false.

INP: замки Framer Motion

// ❌ Лошо
<motion.h1 initial={{ opacity: 0 }} animate={{ opacity: 1 }}>Наслов</motion.h1>

// ✅ Добро
<h1 className="ow-anim-fade-up">Наслов</h1>

Правила: никогаш не анимирајте width/height/top/left. Само transform/opacity. Максимум 1-2 анимации по viewport. useReducedMotion.

CLS: шема за резервација i18n

На i18n страници, CLS се појавува кога преводите се вчитуваат по initial render. Решение: резервирајте min-height по breakpoint.

<div className="min-h-[280px] sm:min-h-[220px] md:min-h-[160px] lg:min-h-[130px]">
  <p>{t('tldr.content')}</p>
</div>

Слики: AVIF, priority, fetchPriority

images: { unoptimized: true, formats: ['image/avif', 'image/webp'] }

Хостинг: Brotli 11, HTTP/3, Early Hints

1. Origin хост — било кој статички хост.
2. Cloudflare free tier напред — HTTP/3, Brotli 11, edge cache.
3. Early Hints (103) — елиминира TTFB wait од critical path.
4. Cache правило _next/static/* — Cache Everything, Edge TTL 1 година.
5. Purge cache при deploy — wrangler или Cloudflare API во CI.

Како да се debug-ира PageSpeed регресија

1. Споредете извештаи — која метрика падна.
2. Critical request chain — што блокира render сега.
3. Chrome DevTools Performance — localhost со throttling.
4. Git diff deps — нов npm пакет?
5. next build output — рута +20KB = сомнителна.