Core Web Vitals: شرح LCP وINP وCLS لتحسين سرعة الموقع والسيو

آخر تحديث ومراجعة للحدود: 10 أغسطس 2026.

Core Web Vitals هي مقاييس من Google تقيس تجربة الصفحة الحقيقية: هل يظهر المحتوى الرئيسي بسرعة؟ هل تستجيب الصفحة للتفاعل؟ وهل يبقى التصميم ثابتا أثناء التحميل؟ أهم المقاييس حاليا هي LCP وINP وCLS، وتحسينها يساعد الزائر أولا، ثم يدعم SEO عندما تكون الصفحة مفيدة وقابلة للفهرسة.

إذا كانت المشكلة أن الصفحة لا تظهر في نتائج البحث أصلا، فابدأ بدليل لماذا موقعي لا يظهر في جوجل؟ قبل تحسين السرعة. ولو كان الموقع ووردبريس، راجع أيضا تحسين سرعة موقع ووردبريس لأنه يربط Core Web Vitals بالصور والكاش والإضافات.

سرعة الموقع ليست رفاهية. الزائر لا ينتظر كثيرا، ومحركات البحث تهتم بتجربة المستخدم. لذلك ظهرت مقاييس Core Web Vitals لتساعد أصحاب المواقع والمطورين على فهم جودة التجربة بأرقام واضحة.

الموضوع قد يبدو تقنيا في البداية: LCP وINP وCLS. لكن الفكرة بسيطة: هل الصفحة تظهر بسرعة؟ هل تستجيب بسرعة؟ هل تبقى مستقرة أثناء التحميل؟

هذا المقال يشرح المقاييس الثلاثة بلغة عملية، ثم يعطيك خطوات لتحسينها.

إذا كانت نتيجة PageSpeed منخفضة وتريد مراجعة عملية للصور، الخطوط، JavaScript، والكاش، راجع خدمة تحسين سرعة الموقع والسيو التقني.

ما هي Core Web Vitals؟

Core Web Vitals هي مجموعة مقاييس من Google تركز على تجربة المستخدم الحقيقية في الصفحة:

• LCP: سرعة ظهور أكبر عنصر مهم في الشاشة.
• INP: سرعة استجابة الصفحة لتفاعل المستخدم.
• CLS: مدى ثبات التصميم وعدم قفز العناصر.

هذه المقاييس لا تقيس كل شيء، لكنها تعطي صورة جيدة عن مشاكل الأداء التي يشعر بها المستخدم فعلا.

الحدود الجيدة الحالية

تقيّم Google التجربة من بيانات المستخدمين الحقيقيين عند المئين 75. لكي تُصنف الصفحة أو مجموعة الصفحات “جيدة”، يجب أن تحقق 75% على الأقل من الزيارات الحدود التالية:

المقياس	جيد	يحتاج تحسين	ضعيف
LCP	2.5 ثانية أو أقل	أكثر من 2.5 حتى 4 ثوانٍ	أكثر من 4 ثوانٍ
INP	200ms أو أقل	أكثر من 200 حتى 500ms	أكثر من 500ms
CLS	0.1 أو أقل	أكثر من 0.1 حتى 0.25	أكثر من 0.25

المصدر: كيف حُددت حدود Core Web Vitals.

بيانات المستخدمين أم اختبار Lighthouse؟

النوع	ماذا يخبرك؟	أين تجده؟
Field data	تجربة مستخدمين حقيقيين خلال فترة زمنية وعلى أجهزة وشبكات مختلفة	CrUX، PageSpeed Insights، تقرير Core Web Vitals في Search Console، أو RUM خاص بك
Lab data	تشغيل مضبوط يساعدك على إعادة المشكلة وتشخيص السبب	Lighthouse وChrome DevTools

قد تحصل على Lighthouse جيد بينما بيانات المستخدمين ضعيفة بسبب أجهزة أبطأ أو زيارات من مناطق بعيدة أو تفاعلات لا يغطيها الاختبار. وقد يحدث العكس إذا اختبرت لحظة سيئة واحدة. ابدأ ببيانات آخر 28 يومًا، ثم استخدم المختبر لتشخيص الصفحة أو القالب المتأثر. راجع سير عمل Core Web Vitals بأدوات Google.

LCP: متى يظهر المحتوى الرئيسي؟

LCP اختصار لـ Largest Contentful Paint. يقيس الوقت الذي يحتاجه أكبر عنصر مرئي في الشاشة الأولى حتى يظهر للمستخدم. هذا العنصر قد يكون:

• صورة hero.
• عنوان كبير.
• بلوك نصي كبير.
• صورة منتج.

إذا كان LCP بطيئا، يشعر الزائر أن الموقع بطيء حتى لو ظهرت عناصر صغيرة بسرعة.

كيف تحسن LCP؟

ابدأ بهذه الخطوات:

• اضغط الصور الكبيرة.
• استخدم WebP أو AVIF عند الإمكان.
• لا تستخدم loading="lazy" على صورة hero أو الصورة الرئيسية أعلى الصفحة.
• اجعل الصورة المهمة موجودة في HTML مباشرة، لا تحملها عبر JavaScript متأخر.
• قلل CSS وJavaScript الذي يمنع العرض الأول.
• استخدم استضافة سريعة وCDN.
• فعّل cache للملفات الثابتة.

في مواقع Astro مثلا، غالبا يكون LCP جيدا إذا كانت الصفحة static والصور مضغوطة. المشكلة تظهر عادة من صورة كبيرة جدا أو خط خارجي بطيء أو فيديو في أول الشاشة.

INP: هل الصفحة تستجيب بسرعة؟

INP اختصار لـ Interaction to Next Paint. يقيس استجابة الصفحة لتفاعلات المستخدم مثل:

• الضغط على زر.
• فتح قائمة.
• الكتابة في input.
• اختيار filter.

إذا ضغط المستخدم على زر ولم يحدث شيء بسرعة، فهذا يؤثر على INP.

كيف تحسن INP؟

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

خطوات عملية:

• قلل JavaScript غير الضروري.
• قسم الكود إلى أجزاء أصغر.
• لا تحمل مكتبات كبيرة لزر بسيط.
• أجل السكربتات غير المهمة.
• تجنب إعادة render كبيرة في React.
• استخدم debounce للبحث أثناء الكتابة.
• لا تنفذ عمليات ثقيلة داخل حدث click مباشرة.

إذا كان موقعك عبارة عن صفحات محتوى، لا تضف مكتبات تفاعلية ضخمة بدون سبب. كل كيلوبايت JavaScript يجب أن يخدم هدفا واضحا.

CLS: هل التصميم يقفز؟

CLS اختصار لـ Cumulative Layout Shift. يقيس مقدار تغير أماكن العناصر أثناء تحميل الصفحة.

مثال مزعج: تبدأ في قراءة عنوان، ثم تظهر صورة فوقه فينزل النص فجأة. أو تحاول الضغط على زر، ثم يتحرك بسبب إعلان أو خط لم يكتمل تحميله.

كيف تحسن CLS؟

• ضع width وheight لكل صورة.
• احجز مساحة للفيديو والإعلانات قبل تحميلها.
• لا تضف عناصر فوق المحتوى بعد التحميل بدون مساحة محفوظة.
• استخدم خطوطا بطريقة تقلل تغير الحجم عند التحميل.
• تجنب إدخال banners متأخرة في أعلى الصفحة.

في المدونات، أكثر سبب شائع لـ CLS هو الصور بدون أبعاد. بمجرد إضافة width وheight أو aspect-ratio، تتحسن المشكلة كثيرا.

العلاقة بين السرعة والسيو

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

Core Web Vitals تساعدك على تحسين:

• بقاء المستخدم في الصفحة.
• سهولة التصفح على الموبايل.
• معدل التحويل.
• جودة تجربة صفحات المقالات والخدمات.

لا تتعامل معها كأرقام لإرضاء أداة فقط. تعامل معها كطريقة لفهم إحساس الزائر.

خطوات عملية لتحسين موقعك

1. ابدأ بالصور

الصور غالبا أكبر سبب للبطء.

افعل التالي:

• حول الصور إلى WebP.
• أنشئ أحجاما متعددة للصورة.
• استخدم srcset وsizes.
• اجعل الصور تحت الشاشة lazy.
• لا تجعل صورة LCP lazy.

2. قلل JavaScript

اسأل عن كل سكربت:

• هل نحتاجه في أول تحميل؟
• هل يعمل في كل الصفحات؟
• هل يمكن تحميله عند الحاجة؟
• هل يوجد بديل أخف؟

مواقع المحتوى لا تحتاج غالبا JavaScript كثير.

3. استخدم cache

الملفات الثابتة مثل CSS وJS والصور يجب أن تحصل على cache طويل عند النشر. أما HTML وXML فيفضل أن يبقيا قابلين للتحديث بسرعة.

4. حسّن الخطوط

الخطوط الخارجية قد تؤخر العرض. استخدم أوزانا قليلة، وفكر في استضافة الخط محليا إذا كان مهما جدا للأداء.

5. راقب على الموبايل

كثير من المواقع تبدو سريعة على جهاز المطور، لكنها بطيئة على هاتف متوسط واتصال ضعيف. اختبر دائما على الموبايل.

أدوات القياس

استخدم:

• PageSpeed Insights.
• Lighthouse.
• Chrome DevTools Performance.
• Search Console Core Web Vitals.
• أداة فحص سيو الموقع والسرعة لمراجعة مؤشرات السرعة مع العنوان والوصف وcanonical وrobots وSchema في نفس التقرير.

لا تعتمد على نتيجة واحدة فقط. افحص الصفحة الرئيسية، صفحة مقال، وصفحة خدمة.

Checklist سريع

• هل صورة hero مضغوطة؟
• هل الصور لها width وheight؟
• هل الصور البعيدة lazy؟
• هل JavaScript ضروري؟
• هل الخطوط قليلة؟
• هل cache مضبوط؟
• هل الاستضافة مستقرة؟
• هل اختبرت على الموبايل؟

خلاصة

Core Web Vitals ليست مجرد مصطلحات تقنية. LCP يعني أن المحتوى الرئيسي يظهر بسرعة. INP يعني أن الصفحة تستجيب للمستخدم. CLS يعني أن التصميم ثابت ولا يقفز.

ابدأ بالصور، ثم JavaScript، ثم cache، ثم الخطوط والاستضافة. غالبا ستحصل على تحسن كبير بدون إعادة بناء الموقع من الصفر.

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

ولتحسين الصور تحديدا، اقرأ دليل تحسين صور الموقع لأن الصور غالبا هي السبب الأسرع في بطء LCP على صفحات الشركات والمتاجر.

مراجع مفيدة

• Web Vitals على web.dev
• Largest Contentful Paint
• Optimize Largest Contentful Paint
• How Core Web Vitals thresholds were defined
• Core Web Vitals workflows with Google tools

الخطوة التالية

هل تريد تحسين سرعة موقعك والسيو التقني؟

إذا كانت المشكلة في Core Web Vitals أو CDN أو بطء الصفحات، ابدأ بفحص تقني يحدد أكبر سبب يؤثر على الزائر والترتيب.

راجع خدمة السرعة والسيو

نماذج عملية

مشاريع مرتبطة بما قرأته

هذه روابط داخلية لدراسات حالة قريبة من موضوع المقال حتى ترى كيف يظهر نفس القرار في مشروع حقيقي.

متجر إلكتروني للجمال والعناية

Laftah Care

العطور، العناية، المكياج، الأجهزة، العدسات، الرموش، العروض، والماركات

تطوير قالب ووردبريس

HomeSecure Theme

الخدمات، المشاريع، الثقة، المستندات، وتجميع العملاء المحتملين

تطوير إضافة ووردبريس

Simple Bio Links

صفحات Bio Links، لوحة مستخدمين، تحليلات، جدولة، وسيو