Next.js static export و Core Web Vitals: دليل 2026

بعد 12 شهراً من بيانات الإنتاج على 40+ موقع Next.js مع static export، إليك الـ playbook الدقيق الذي نطبقه للوصول إلى 95+ PageSpeed على الجوال. بدون نظرية — فقط ما يعمل بشكل قابل للقياس.

الأساس: ما يقدمه static export مجاناً

موقع Next.js static export فانيلا يسجل 95-100 موبايل لأن كل HTML مُصير مسبقاً، TTFB منخفض، بدون cold starts. عند إضافة Framer Motion، Google Fonts، الأيقونات، analytics، تنخفض إلى 70-85.

LCP: معركة ضد CSS render-blocking

تقارير PageSpeed تُظهر نفس المشكلة: ملفا CSS render-blocking يضيفان ~500ms render delay على موبايل مخنوق. هذا 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 (العناوين) — 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 يظهر عندما تُحمل الترجمات بعد التصيير الأولي. الحل: حجز 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 من critical path.
4. قاعدة cache _next/static/* — Cache Everything، Edge TTL سنة.
5. تفريغ cache عند النشر — wrangler أو Cloudflare API في CI.

كيفية تصحيح تراجع PageSpeed

1. قارن التقارير — أي مقياس انخفض.
2. Critical request chain — ما الذي يعرقل التصيير الآن.
3. Chrome DevTools Performance — localhost مع throttling.
4. Git diff deps — حزمة npm جديدة؟
5. next build output — مسار +20KB = مشبوه.