Core Web Vitals وتحسين سرعة الصفحة: دليل 2026

ما هي Core Web Vitals؟

Core Web Vitals هي المقاييس الثلاثة الرئيسية التي يستخدمها Google لقياس تجربة المستخدم الفعلية على صفحات الويب.

أصبحت عاملاً في الترتيب عام 2021. وفي عام 2026، باتت أكثر أهمية من أي وقت مضى — إذ يزيد Google من الوزن الممنوح لتجربة المستخدم مع كل تحديث جديد.

هذه المقاييس ليست مجرد شأن "تقني". فهي تؤثر مباشرة على معدلات التحويل؛ فالصفحة البطيئة تدفع العملاء المحتملين مباشرةً إلى منافسيك.

المقاييس الثلاثة الأساسية

LCP — Largest Contentful Paint

هو الوقت الذي يستغرقه المحتوى الرئيسي في الصفحة ليصبح مرئياً.

عندما يصل مستخدم إلى صفحتك، كم يستغرق تحميل أكبر عنصر مرئي — سواء كان صورة رئيسية، أو كتلة نصية كبيرة، أو فيديو؟

العوامل التي تضر بـ LCP:

• بطء استجابة الخادم (TTFB)
• ملفات CSS وJavaScript التي تعيق التصيير
• بطء تحميل الصور والفيديوهات
• تأخيرات التصيير من جانب العميل

INP — Interaction to Next Paint

يقيس سرعة استجابة الصفحة لتفاعلات المستخدم.

حلّ INP محل FID (First Input Delay) عام 2024. فبينما كان FID يقيس التفاعل الأول فقط، يغطي INP كل التفاعلات — النقرات، واللمسات، وإدخالات لوحة المفاتيح.

العوامل التي تضر بـ INP:

• مهام JavaScript طويلة الأمد
• سكريبتات الطرف الثالث الثقيلة
• العمليات التي تحجب الخيط الرئيسي
• حجم DOM الكبير جداً

CLS — Cumulative Layout Shift

يقيس الإزاحات غير المتوقعة في تخطيط الصفحة أثناء التحميل.

لا بد أنك مررت بهذا: كنت على وشك النقر على زر فقفزت الصفحة، وذهب نقرتك في مكان آخر تماماً. هذه بالضبط مشكلة CLS.

العوامل التي تضر بـ CLS:

• الصور والفيديوهات بدون أبعاد محددة
• المحتوى المُحقن ديناميكياً (الإعلانات، البانرات)
• الخطوط التي تُحمَّل متأخرة
• الـ iframes بدون أحجام محددة

كيفية قياس Core Web Vitals

بيانات المختبر (المحاكاة)

• Google PageSpeed Insights: يوفر بيانات المختبر والميدان معاً
• Lighthouse: مدمج في Chrome DevTools
• WebPageTest: تحليل تفصيلي للتحميل

بيانات المختبر تُقاس في بيئة متحكم فيها. قد لا تعكس تجربة المستخدم الفعلية بدقة، لكنها مثالية لتحديد المشكلات.

البيانات الميدانية (المستخدمون الفعليون)

• Google Search Console: تقرير CWV مبني على بيانات مستخدمين حقيقيين
• Chrome UX Report (CrUX): بيانات مجهولة الهوية مجمّعة من مستخدمي Chrome
• PageSpeed Insights: قسم "بيانات الميدان لهذا العنوان"

يستخدم Google البيانات الميدانية للترتيب. حتى لو بدت نتائج المختبر ممتازة، فإن البيانات الميدانية الضعيفة ستضر بترتيبك.

تحسين LCP

تقليل وقت استجابة الخادم (TTFB)

وقت استجابة الخادم هو أساس LCP.

• استخدم CDN: قدّم المحتوى من الخادم الأقرب للمستخدم
• التخزين المؤقت من جانب الخادم: احتفظ بنسخ مؤقتة من استعلامات قاعدة البيانات والصفحات
• استخدم HTTP/2 أو HTTP/3: يتيح التحميل الموازي للموارد
• هدف TTFB: أقل من 800 مللي ثانية

تحسين الصور

الصور هي عنصر LCP في معظم الصفحات.

• استخدم WebP أو AVIF — أصغر بنسبة 25–50% من JPEG
• الصور المتجاوبة: استخدم خاصية srcset وsizes لتقديم الحجم المناسب لكل جهاز
• التحميل الكسول: أضف loading="lazy" للصور خارج نطاق العرض
• التحميل المسبق لصورة LCP: <link rel="preload" as="image" href="hero.webp">
• التقديم عبر CDN: Imgix أو Cloudinary أو Cloudflare Images

إزالة الموارد التي تعيق التصيير

ملفات CSS وJavaScript قد تمنع الصفحة من التصيير.

• ضَمِّن CSS الحرجة: ضع أنماط الجزء الأعلى من الصفحة مباشرة في وسم <style>
• تحميل CSS بشكل غير متزامن: media="print" onload="this.media='all'"
• تأجيل أو استخدام async لـ JavaScript: <script defer>
• إزالة CSS غير المستخدم: استخدم PurgeCSS أو أدوات مماثلة

تحسين الخطوط

الخطوط يمكن أن تؤخر LCP بشكل كبير.

• استخدم font-display: swap — يعرض الخط الافتراضي حتى تحميل خطك المخصص
• حمّل ملفات الخطوط مسبقاً: <link rel="preload" as="font" type="font/woff2">
• حمّل المجموعات الفرعية من الأحرف التي تستخدمها فعلاً
• فكّر في خطوط النظام عند الإمكان

تحسين INP

تقسيم مهام JavaScript الطويلة

إذا كان الخيط الرئيسي للمتصفح مشغولاً بمهام تستغرق أكثر من 50 مللي ثانية، فلن يستطيع الاستجابة لتفاعلات المستخدم.

• قسّم حزم JavaScript الكبيرة
• قسّم المهام الطويلة باستخدام requestIdleCallback أو scheduler.yield()
• انقل العمل إلى Web Workers: معالجة في الخلفية تعمل باستقلالية عن الخيط الرئيسي

فحص سكريبتات الطرف الثالث

التحليلات، الإعلانات، أدوات الدردشة المباشرة، التضمينات الاجتماعية — كل واحدة تتنافس على وقت الخيط الرئيسي.

• قِس تأثير كل سكريبت
• احذف ما ليس ضرورياً
• حمّل السكريبتات المتبقية بـ defer أو الاستيرادات الديناميكية
• استخدم نمط الواجهة — مثلاً، اعرض صورة مصغرة بدلاً من تحميل تضمين YouTube فوراً

تقليص حجم DOM

حجم DOM الضخم يُبطئ كل تفاعل.

• تجنب تجاوز 1,500 عنصر DOM
• احتفظ بعمق التداخل تحت 32 مستوى
• أزل divs التغليف غير الضرورية
• استخدم التمرير الافتراضي للقوائم الطويلة — صيّر فقط العناصر الموجودة في نطاق العرض

تحسين CLS

تحديد أبعاد الصور والفيديوهات بشكل صريح

أضف خاصية width وheight لكل عنصر <img> و<video>.

<img src="photo.webp" width="800" height="600" alt="وصف">

يحجز المتصفح المساحة قبل تحميل الصورة، فلا يتزعزع التخطيط أبداً.

للنهج الحديث، يمكنك أيضاً استخدام خاصية CSS aspect-ratio.

الإعلانات والمحتوى الديناميكي

الإعلانات هي أكبر عدو لـ CLS.

• احجز مساحة ثابتة لفتحات الإعلانات باستخدام min-height
• امنع الحاوية من الانهيار عند غياب الإعلان
• فضّل مواضع الإعلانات الثابتة

منع إزاحة الخطوط

عند تحميل خط مخصص، قد تتغير أبعاد النص وتسبب إزاحة في التخطيط.

• استخدم font-display: swap أو optional
• طابق مقاييس الخط مع خط النظام الاحتياطي باستخدام size-adjust
• حمّل الخطوط مسبقاً في <head>

تحسين سرعة الصفحة العام

استراتيجية التخزين المؤقت

إعداد التخزين المؤقت الجيد يسرّع الزيارات المتكررة بشكل كبير.

• تخزين المتصفح المؤقت: اضبط ترويسات Cache-Control بشكل صحيح
• Service Worker: يتيح الوصول دون اتصال والتحكم الدقيق في التخزين المؤقت
• تخزين CDN المؤقت: خزّن الملفات الثابتة في خوادم الحافة

استخدم التخزين المؤقت طويل الأمد (سنة) للملفات الثابتة كـ CSS وJS والصور. استخدم التخزين المؤقت قصير الأمد أو بدون تخزين مؤقت لـ HTML.

تقليل طلبات HTTP

كل طلب HTTP يضيف زمن استجابة.

• اجمع ملفات CSS وJavaScript
• استخدم مجموعات SVG للأيقونات بدلاً من صور منفردة
• أزل طلبات الطرف الثالث غير الضرورية
• استخدم dns-prefetch وpreconnect لتقليص وقت حل DNS

الضغط

• استخدم ضغط Gzip أو Brotli — يقلص حجم الملف بنسبة 60–80%
• Brotli يضغط بنسبة 15–20% أفضل من Gzip
• فعّل الضغط في إعدادات الخادم

صيغ الصور الحديثة

ابنِ استراتيجية احتياطية لكل صيغة صورة.

ميزانية الأداء

أكثر طريقة فعّالة لحماية سرعة صفحتك هي تحديد ميزانية أداء من البداية.

مثال على ميزانية أداء:

• الحجم الإجمالي للصفحة: < 1.5 ميغابايت
• JavaScript: < 300 كيلوبايت (مضغوط)
• الصور: < 500 كيلوبايت
• LCP: < 2 ثانية
• INP: < 150 مللي ثانية
• طلبات HTTP: < 50

ادمج هذه الميزانية في خط CI/CD الخاص بك وامنع النشر الذي يتخطاها.

أداء الجوال

أجهزة الجوال تمتلك معالجات أبطأ واتصالات أبطأ من أجهزة سطح المكتب.

يستخدم Google الفهرسة التي تُعطي الأولوية للجوال. إذا كان أداء جوالك ضعيفاً، يتأثر ترتيب سطح المكتب أيضاً.

• اختبر على اتصال 3G
• اختبر على أجهزة منخفضة المستوى باستخدام تقليد Chrome DevTools
• فكّر في AMP أو أطر العمل التي تُعطي الأولوية للأداء

Core Web Vitals والـ SEO

يستخدم Google مؤشر CWV كإشارة ترتيب — لكن ماذا يعني ذلك عملياً؟

لن ترفعك CWV وحدها إلى المركز الأول. لكن عندما تتساوى صفحتان في جودة المحتوى وملف الروابط الخلفية، يمكن لـ CWV أن تكون عامل الترجيح.

التأثيرات غير المباشرة لا تقل أهمية:

• صفحة سريعة → معدل ارتداد أقل
• تجربة مستخدم رائعة → تفاعل أعلى
• تفاعل أعلى → إشارات مستخدم أقوى
• إشارات مستخدم أقوى → ترتيب أفضل

تأثير الدومينو هذا يجعل CWV أكثر قيمة من مجرد عامل ترتيب بسيط.

التجارة الإلكترونية وسرعة الصفحة

في مواقع التجارة الإلكترونية، تترجم سرعة الصفحة مباشرة إلى إيرادات.

• تحسين السرعة بنسبة 1% → ~2% زيادة في التحويلات (بالمتوسط)
• الصفحات الأبطأ من 3 ثوانٍ → 53% من الزوار يغادرون
• معدلات تحويل الجوال نصف سطح المكتب أصلاً — تحسين السرعة يُقلّص هذه الفجوة

مراقبة CWV باستمرار

التحسين لمرة واحدة لا يكفي. المحتوى الجديد، الإضافات، والتحديثات — كل ذلك قد يُدهور الأداء.

أدوات المراقبة المستمرة:

• Google Search Console — تقرير CWV
• PageSpeed Insights — تحليل على مستوى الصفحة
• امتداد Web Vitals لـ Chrome — قياس في الوقت الفعلي
• Lighthouse CI — اختبار آلي في خط نشرك

متابعة مشاكل السيو التقني يدوياً أمر بطيء وعرضة للخطأ. DexterGPT يزحف تلقائياً إلى موقعك، يرصد مشاكل CWV وسرعة الصفحة، ويقدم توصيات قابلة للتنفيذ.

الخلاصة

Core Web Vitals وسرعة الصفحة تشكّلان الأساس التقني للـ SEO.

تحسين LCP وINP وCLS يُحسّن تجربة المستخدم والترتيب معاً — وله تأثير مباشر وقابل للقياس على التحويلات.

الأداء ليس مهمة تُنجز مرة واحدة. إنه عملية مستمرة. قِس، وحسّن، وقِس مجدداً. لا تكسر هذه الدورة أبداً.

قائمة فحص السيو التقني تغطي كل ما هو أبعد من سرعة الصفحة بتفصيل شامل.