التحدى
منصة التجارة الإلكترونية لعميلنا كانت تحمل في 4+ ثواني. كانت قيمات Core Web Vitals فاشلة في جميع الأماكن، مما يؤثر على تجربة المستخدمين وترتيب SEO. إليك كيفية إصلاحها.
استراتيجية التحسين
1. تحسين الصور
كانت الصور مسؤولة عن 60% من وزن الصفحة. قمنا بتحويلها إلى Next.js Image component مع تحويل WebP التلقائي، والتناسق الإيجابي، وتحميل الصور بشكل متأخر.
import Image from "next/image";
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={600}
priority
sizes="(max-width: 768px) 100vw, 1200px"
/>2. تقسيم الكود باستخدام التحميل الديناميكي
قمنا بتقسيم المكونات الثقيلة مثل النافذة الرئيسية للشحن واللوحة التحليلية إلى قطع فرعية تتحمل فقط عند الحاجة.
const CheckoutModal = dynamic(() => import("@/components/CheckoutModal"), {
loading: () => <CheckoutSkeleton />,
ssr: false
});3. استراتيجية التخزين
نفذنا تخزين stale-while-revalidate للردود API و ISR (تجديد إحصائي incremental) للصفحات الفئة التي تتغير بانتظام.
النتائج
| المتغير | قبل | بعد |
|---|---|---|
| LCP | 4.2ث | 0.8ث |
| FID | 180م | 45م |
| CLS | 0.15 | 0.02 |
| حجم الحزمة | 420KB | 185KB |
ملاحظات رئيسية
تحسين الأداء يتعلق بآلاف التحسينات الصغيرة التي تتراكم. انصب تركيزك على أكبر العوائق أولاً - عادة ما تكون الصور والمكتبات غير المستخدمة.
