Core Web Vitals 2026: ما تحتاج معرفته لتتصدّر جوجل

Core Web Vitals ليست رفاهية — هي عامل ترتيب رسمي في جوجل منذ 2021، وفي 2026 أصبحت أهم من أي وقت مضى. إذا كان موقعك بطيئًا أو يقفز بصريًا أو يتأخر في الاستجابة، فأنت تخسر زوارًا قبل أن تصلهم. هذا الدليل يشرح كل مؤشر ويعطيك خطوات عملية لتحسينه.

ما هي Core Web Vitals؟

ثلاثة مقاييس تقيس تجربة المستخدم الحقيقية على موقعك من بيانات حقيقية (CrUX — Chrome User Experience Report) لا من اختبار مختبر:

1. LCP (Largest Contentful Paint)

سرعة ظهور أكبر عنصر مرئي (صورة hero، عنوان رئيسي، فيديو، مقطع نص كبير).

• ممتاز: < 2.5 ثانية
• يحتاج تحسين: 2.5–4 ثانية
• سيء: > 4 ثانية

2. INP (Interaction to Next Paint)

(حلّ محل FID في مارس 2024) زمن استجابة الموقع لتفاعل المستخدم (ضغطة زر، نقرة، input). يقيس أسوأ تفاعل خلال الجلسة.

• ممتاز: < 200ms
• يحتاج تحسين: 200–500ms
• سيء: > 500ms

3. CLS (Cumulative Layout Shift)

مقدار "القفزات البصرية" في الصفحة أثناء التحميل. صورة بدون أبعاد تظهر فجأة وتدفع المحتوى للأسفل = CLS مرتفع.

• ممتاز: < 0.1
• يحتاج تحسين: 0.1–0.25
• سيء: > 0.25

كيف تقيس؟

الأدوات المجانية

• PageSpeed Insights (pagespeed.web.dev): تقرير شامل بضغطة، يعطيك بيانات Field (حقيقية) ومحاكاة
• Search Console → Core Web Vitals: بيانات حقيقية من زوارك الفعليين، مُصنّفة Good/Needs Improvement/Poor
• Lighthouse في Chrome DevTools: محاكاة محلية سريعة
• Web Vitals Chrome Extension: قياس مباشر أثناء التصفّح
• CrUX Dashboard: تاريخ شامل من بيانات Chrome

Field vs Lab

• Field: من زوار حقيقيين (الأهم لجوجل في الترتيب)
• Lab: من محاكاة مختبرية (مفيد للديباغ)

دائمًا اهتم بـ Field. لو Field سيء و Lab جيد، فالمشكلة عند مستخدمي 3G/4G في السعودية، ليس على شبكة الفايبر في مكتبك.

تحسين LCP

الأسباب الشائعة للبطء

1. صور كبيرة بدون تحسين
2. خادم بطيء (TTFB طويل — راجع استضافة سعودية)
3. CSS و JavaScript يحجبون التصيير (Render-blocking)
4. خطوط من مصادر بعيدة (Google Fonts)
5. عدم استخدام CDN

الحلول

<!-- Preload الصورة الأساسية -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- استخدم WebP أو AVIF (50% أصغر من JPG) -->
<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="..." width="1200" height="630">
</picture>

• استخدم CDN (Cloudflare، BunnyCDN)
• نظّف CSS غير المستخدم (PurgeCSS، Critical CSS)
• استخدم font-display: swap للخطوط
• HTTP/3 و Server Timing لتسريع TTFB
• خوادم في السعودية لتقليل Network Latency

تحسين INP

INP صعب لأنه يقيس كل تفاعل خلال الجلسة، وأسوأ نتيجة هي الدرجة. تفاعل بطيء واحد = درجة سيئة.

المشاكل الشائعة

1. JavaScript ثقيل يحجب الـ Main Thread
2. React/Vue Re-renders ضخمة (10,000 element re-render)
3. مهام طويلة (Long Tasks > 50ms)
4. Event listeners ثقيلة (scroll، input بدون debounce)
5. Third-party scripts (تتبع، إعلانات)

الحلول

• Code Splitting: حمّل JS عند الحاجة فقط (import() ديناميكي)
• useMemo و useCallback في React لتقليل re-renders
• Web Workers للمهام الثقيلة (تشفير، معالجة JSON كبير)
• requestIdleCallback للمهام غير العاجلة
• Debounce/Throttle على event listeners
• قلّل عدد المكتبات الخارجية
• استبدل jQuery بـ Vanilla JS لمواقع بسيطة
• استخدم React 19 Server Components لتقليل JS المُرسَل للمتصفح

تحسين CLS

الأسباب

1. صور بدون width و height
2. إعلانات تظهر فجأة فوق المحتوى
3. خطوط ويب تُغيّر الحجم بعد التحميل (FOUT/FOIT)
4. محتوى يُحقن ديناميكيًا (popups، banners)
5. iframes بدون أبعاد محددة

الحلول

<!-- حدّد الأبعاد دائمًا -->
<img src="/photo.jpg" width="800" height="600" alt="...">

<!-- استخدم aspect-ratio في CSS -->
<style>
.video-container { aspect-ratio: 16 / 9; }
</style>

<!-- احجز مكانًا للإعلانات -->
<div style="min-height: 250px"><!-- ad slot --></div>

• استخدم font-display: optional للخطوط الثانوية
• لا تُحقن محتوى فوق المحتوى الموجود (popups في الأسفل، ليس فوق الـ Hero)
• احجز مكان للـ iframes (<iframe width=560 height=315>)
• في الـ Markdown/MDX، أضف أبعاد للصور تلقائيًا

تأثير CWV على السيو

جوجل أكّد رسميًا أن Core Web Vitals عامل ترتيب — خصوصًا عند تقارب جودة المحتوى بين عدة نتائج. مواقع بـ CWV ممتازة تحصل على:

• ترتيب أعلى في النتائج المنافسة (يفصل بين مواقع متقاربة الجودة)
• معدل ارتداد أقل (-30%)
• نسبة تحويل أعلى (دراسات: +24% في التحويل عند تحسين LCP فقط)
• زحف أكثر من Googlebot (يفهرس محتوى جديد أسرع)
• تجربة Page Experience أعلى (جزء من خوارزمية كاملة)

اقرأ كيف تكمل الصورة في أساسيات السيو السعودي.

نصائح خاصة للمواقع العربية

1. الخطوط

خطوط Tajawal و Almarai ثقيلة (300+ KB كاملة). استخدم:

• font-display: swap
• subset العربية فقط (يقلّل 60%)
• preload للخط الأساسي

<link rel="preload" href="/fonts/tajawal-arabic.woff2"
      as="font" type="font/woff2" crossorigin>

2. RTL

dir="rtl" قد يُعيد تخطيط الصفحة. احسب CLS مع dir="rtl" تحديدًا. تأكد أن CSS يدعم RTL بدون "flash" of LTR في البداية.

3. CDN مع نقاط حضور في الشرق الأوسط

Cloudflare يدعم الرياض والدوحة ودبي. زمن الوصول < 30ms من السعودية. لو سيرفرك بعيد لكن CDN قريب، تحسّن LCP بشكل ملحوظ.

4. ابدأ بـ استضافة سعودية

أكبر تحسين منفرد لـ LCP هو خادم قريب من جمهورك. كل ms يحسبه جوجل.

مثال قبل/بعد

عميل لنا (متجر عبايات في الرياض):

المؤشر	قبل	بعد	التحسين
LCP	4.2s	1.8s	-57%
INP	350ms	120ms	-66%
CLS	0.32	0.04	-88%
Pageviews	8,500/شهر	14,200/شهر	+67%
التحويلات	2.1%	3.6%	+71%

ما أجرينا:

1. نقل من استضافة دولية إلى بيست هوست (LCP)
2. تحويل الصور إلى WebP + lazy loading
3. تأجيل scripts الإعلانات (INP)
4. إضافة أبعاد لكل الصور (CLS)
5. تحسين الخطوط بـ preload + subset

أدوات للديباغ المتقدم

الأداة	استخدامها
Chrome DevTools Performance	تحليل main thread
WebPageTest	محاكاة من مواقع جغرافية مختلفة
Speedlify	تتبع زمني للأداء
Calibre	مراقبة CWV مع تنبيهات
New Relic / Datadog	RUM (Real User Monitoring)

الخلاصة

Core Web Vitals ممكنة لكل موقع. ابدأ بقياس وضعك الحالي، ركّز على أسوأ المؤشرات، وحسّن تدريجيًا. مواقع بيست هوست تخرج من البداية بـ CWV ممتازة — استضافة سريعة + صور مُحسّنة + كود نظيف + CDN عالمي.

لو موقعك يعاني من CWV ضعيفة، تواصل معنا لتدقيق أداء مجاني.