هل تعلم أن Google تقيس أداء موقعك بناءً على تجربة المستخدمين الحقيقيين وليس فقط اختبارات المعمل؟ ما تسمعه صحيح. Core Web Vitals هي ثلاثة مقاييس تقيس أداء صفحتك من وجهة نظر الزوار الفعليين: سرعة تحميل المحتوى الرئيسي، استجابة الصفحة للتفاعلات، واستقرار التخطيط أثناء التحميل. منذ 2024، أصبح INP محل FID، مما رفع معايير الاستجابة.
ما هي Core Web Vitals؟
Core Web Vitals هي مجموعة من المقاييس التي تركز على المستخدم وتستخدمها Google كإشارة ترتيب. تقاس من مستخدمين حقيقيين عبر Chrome User Experience Report (CrUX) عند المئين 75 لمدة 28 يوماً.
LCP - Largest Contentful Paint (سرعة التحميل): يقيس الوقت الذي يستغرقه أكبر عنصر مرئي في الظهور. العنصر عادةً هو صورة الهيرو، نص كبير، أو فيديو. الحد الجيد: ≤ 2.5 ثانية. الضعيف: > 4.0 ثوان.
INP - Interaction to Next Paint (الاستجابة): يقيس زمن استجابة الصفحة لأي تفاعل (نقر، لمس، لوحة مفاتيح) طوال عمر الصفحة. استبدل FID في مارس 2024. الحد الجيد: ≤ 200 مللي ثانية. الضعيف: > 500 مللي ثانية.
CLS - Cumulative Layout Shift (الاستقرار): يقيس مقدار الاهتزاز غير المتوقع في تخطيط الصفحة أثناء التحميل. الحد الجيد: ≤ 0.1. الضعيف: > 0.25.
لماذا هي مهمة للسيو في 2026؟ - عامل ترتيب مؤكد من Google منذ 2021 - تؤثر على تجربة المستخدم ومعدل الارتداد - المواقع التي تجتاز CWV تحصل على ميزة تنافسية في الاستعلامات التنافسية - أنظمة AI تفضل الصفحات السريعة
كيف تحسن LCP (Largest Contentful Paint)؟
- حمّل صورة LCP مبكراً: أضف preload في <head> مع fetchpriority="high". هذا وحده يقلص LCP بمقدار 500ms-1.5s.
- استخدم WebP/AVIF: الصيغ الحديثة أصغر 30-50%. صورة الهيرو يجب ألا تتجاوز 500KB.
- حسّن TTFB: TTFB تحت 800ms هو الأساس. استخدم CDN (Cloudflare، Fastly) وخادم قريب من المستخدمين.
- أزل CSS و JS المعطلة: الـ render-blocking resources تؤخر أول رسم. استخدم critical CSS مضمّن.
- لا تستخدم loading="lazy" على صورة LCP أبداً.
كيف تحسن INP (Interaction to Next Paint)؟
- قسّم Long Tasks: أي سكريبت يعمل لأكثر من 50ms يحجب الاستجابة. استخدم scheduler.yield() أو setTimeout(0).
- أجّل السكريبتات غير الضرورية: أدوات التحليلات، ويدجت الشات، والإعلانات - كلها تستهلك main thread.
- قلّل JavaScript: كل كيلوبايت JS هو INP محتمل. استخدم partial hydration (Astro، Qwik، React Server Components).
- استخدم Web Workers: العمليات الثقيلة (فرز، معالجة نصوص) خارج main thread.
كيف تحسن CLS (Cumulative Layout Shift)؟
- أضف width/height لكل الصور: هذا هو الإصلاح رقم 1 لـ CLS. المتصفح يحسب aspect ratio قبل تحميل الصورة.
- استخدم font-display: swap مع fallback مطابق لمنع إعادة التدفق النصي.
- احجز مساحة للإعلانات والـ embeds: استخدم CSS min-height أو aspect-ratio.
- تجنب إدراج محتوى فوق موجود (cookie banners، إشعارات) - استخدم position: sticky.
- استخدم transform و opacity للحركات، وليس top/left/width/margin.
الترتيب الصحيح للإصلاح: 1. ابدأ بـ LCP - الأكثر فشلاً والأكثر تأثيراً 2. ثم CLS - الأسهل في الإصلاح 3. أخيراً INP - الأكثر تعقيداً
الأخطاء الشائعة: - استخدام loading="lazy" على صورة الهيرو (يدمر LCP) - عدم تحديد أبعاد الصور (CLS)\n- تجاهل الـ third-party scripts (INP)\n- عدم استخدام CDN (TTFB مرتفع) - تحسين سطح المكتب فقط وإهمال الموبايل - عدم التحقق من بيانات CrUX الحقيقية
افحص Core Web Vitals لموقعك مع Waxbix SEO Tool واعرف أي من المقاييس الثلاثة يحتاج تحسين.