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

Pas 12 muajsh të dhënash prodhimi në 40+ faqe Next.js me static export, ja playbook-u i saktë që aplikojmë për të arritur 95+ PageSpeed mobile. Pa teori — vetëm ajo që funksionon në mënyrë të matshme.

Baseline: çfarë të jep static export falas

Një faqe Next.js static export vanilje shënon 95-100 mobile sepse gjithë HTML-i është para-rendered, TTFB i ulët, pa cold starts. Duke shtuar Framer Motion, Google Fonts, ikonat, analytics, bini në 70-85.

LCP: beteja kundër CSS render-blocking

Raportet PageSpeed tregojnë të njëjtin problem: dy skedarë CSS render-blocking shtojnë ~500ms render delay në mobile throttled. Është 100% e buxhetit LCP.

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

Strategji font që funksionon

• Font display (headings) — 1 variable font përmes raw @font-face, preload fetchPriority=high.
• Font body — next/font/google Inter me 2 pesha (400, 600), vetëm latin.
• Monospace — next/font/google JetBrains Mono, preload=false.

INP: kurthet Framer Motion

// ❌ Keq
<motion.h1 initial={{ opacity: 0 }} animate={{ opacity: 1 }}>Titulli</motion.h1>

// ✅ Mirë
<h1 className="ow-anim-fade-up">Titulli</h1>

Rregulla: kurrë mos animoni width/height/top/left. Vetëm transform/opacity. Max 1-2 animacione për viewport. useReducedMotion.

CLS: modeli i rezervimit i18n

Në faqe i18n, CLS shfaqet kur përkthimet ngarkohen pas render-it fillestar. Zgjidhja: rezervoni min-height për breakpoint.

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

Imazhet: AVIF, priority, fetchPriority

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

Hosting: Brotli 11, HTTP/3, Early Hints

1. Host origin — çdo host statik.
2. Cloudflare free tier para — HTTP/3, Brotli 11, edge cache.
3. Early Hints (103) — eliminon wait TTFB nga critical path.
4. Cache rule _next/static/* — Cache Everything, Edge TTL 1 vit.
5. Purge cache në deploy — wrangler ose API Cloudflare në CI.

Si të debug-oni regresion PageSpeed

1. Krahaso raportet — cila metrikë ra.
2. Critical request chain — çfarë bllokon tani render-in.
3. Chrome DevTools Performance — localhost me throttling.
4. Git diff deps — paketë e re npm?
5. next build output — rrugë +20KB = e dyshimtë.