Next.js static export и Core Web Vitals: playbook 2026
За постигнување 95+ PageSpeed на мобилен во Next.js static export: сами хостирајте фонтови преку raw @font-face, пред-товарете LCP фонт со fetchPriority=high, избегнувајте Framer Motion above-the-fold, користете само transform/opacity за анимации, резервирајте layout простор за i18n содржина, сервирајте зад Cloudflare free tier.
По 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
- Origin хост — било кој статички хост.
- Cloudflare free tier напред — HTTP/3, Brotli 11, edge cache.
- Early Hints (103) — елиминира TTFB wait од critical path.
- Cache правило _next/static/* — Cache Everything, Edge TTL 1 година.
- Purge cache при deploy — wrangler или Cloudflare API во CI.
Како да се debug-ира PageSpeed регресија
- Споредете извештаи — која метрика падна.
- Critical request chain — што блокира render сега.
- Chrome DevTools Performance — localhost со throttling.
- Git diff deps — нов npm пакет?
- next build output — рута +20KB = сомнителна.
