Core Web Vitals: شرح LCP وINP وCLS وكيف تحسّنها

شرح مبسط لمقاييس Core Web Vitals الثلاثة: LCP وINP وCLS، والقيم التي يعتبرها جوجل جيدة، وأهم طرق تحسين كل مقياس، وكيف تتابعها في Search Console.

بقلم قراءة 3 دقائق

Core Web Vitals: شرح LCP وINP وCLS وكيف تحسّنها

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

ما هي مقاييس Core Web Vitals؟

المقياسماذا يقيسجيديحتاج تحسينضعيف
LCP (Largest Contentful Paint)وقت ظهور أكبر عنصر مرئي≤ 2.5 ثانية2.5 – 4 ثوانٍ> 4 ثوانٍ
INP (Interaction to Next Paint)سرعة الاستجابة لنقرات الزائر وكتابته≤ 200 ملي ثانية200 – 500 ملي ثانية> 500 ملي ثانية
CLS (Cumulative Layout Shift)اهتزاز العناصر وتحركها أثناء التحميل≤ 0.10.1 – 0.25> 0.25

يقيس جوجل هذه القيم من زيارات حقيقية، ويعتبر الصفحة جيدة إذا حققت 75% من الزيارات النطاق الجيد في المقاييس الثلاثة. مقياس INP حل محل المقياس القديم FID في مارس 2024.

كيف تحسّن LCP؟

أكبر عنصر في الصفحة يكون غالبًا الصورة الرئيسية أو العنوان الكبير أعلى الصفحة.

  • اضغط الصورة الرئيسية واستخدم WebP أو AVIF بالمقاس الصحيح لكل شاشة.
  • لا تجعل الصورة الرئيسية تُحمَّل تحميلًا كسولًا، بل أعطها أولوية تحميل عالية.
  • حسّن زمن استجابة الخادم بالاستضافة الجيدة والتخزين المؤقت وشبكة CDN.
  • قلّل ملفات CSS وJavaScript التي تمنع عرض الصفحة.
  • استخدم العرض من جهة الخادم (SSR) أو الصفحات المولدة مسبقًا كما في Next.js.

كيف تحسّن INP؟

INP يتأثر بكمية العمل الذي ينفذه المتصفح عند كل نقرة.

  • قلّل JavaScript وقسّمه بحيث يُحمَّل كل جزء عند الحاجة فقط.
  • قسّم المهام الطويلة التي تجمّد الصفحة إلى مهام أصغر.
  • أجّل سكربتات الطرف الثالث مثل أدوات الدردشة والتتبع.
  • تجنب تحديث أجزاء كبيرة من الصفحة مع كل حرف يكتبه الزائر.

كيف تحسّن CLS؟

CLS يحدث عندما تتحرك عناصر الصفحة فجأة، فيضغط الزائر على شيء لم يقصده.

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

كيف تتابع Core Web Vitals لموقعك؟

  1. افتح تقرير Core Web Vitals في Google Search Console لرؤية حالة كل الصفحات على الجوال والكمبيوتر.
  2. افحص الصفحات المصنفة "ضعيفة" في PageSpeed Insights لمعرفة السبب.
  3. بعد الإصلاح، استخدم زر التحقق من الإصلاح في Search Console، فالتقرير يعتمد على بيانات آخر 28 يومًا.

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

أسئلة شائعة

هل Core Web Vitals عامل ترتيب مهم؟

هي إشارة ضمن تجربة الصفحة، لكن جوجل يقدّم المحتوى الأكثر فائدة أولًا. تأثيرها يظهر أكثر عندما تتقارب الصفحات المتنافسة في جودة المحتوى.

لماذا لا تظهر بيانات Core Web Vitals لموقعي؟

لأن جوجل يحتاج عددًا كافيًا من الزيارات الحقيقية. للمواقع الجديدة أو قليلة الزيارات، استخدم بيانات المختبر في PageSpeed Insights مؤقتًا.

كم يستغرق ظهور أثر التحسينات في Search Console؟

حتى 28 يومًا تقريبًا، لأن التقرير يعتمد على بيانات الزوار خلال هذه الفترة.

حسّن Core Web Vitals مع ديفلابيكو

نبني في ديفلابيكو مواقع تحقق نتائج جيدة في Core Web Vitals من البداية بتقنيات مثل Next.js، ونصلح مشكلات المقاييس في المواقع القائمة. تواصل معنا وأرسل رابط موقعك.


الوسوم:السيو التقنيتجربة المستخدمسرعة الموقع

تصميم موقع شركة سياحة وسفر: 10 عناصر تحوّل الزوار إلى حجوزات

تصميم موقع مصنع: 9 عناصر تجلب طلبات التوريد من الشركات والموزعين

برمجة تطبيق توصيل طلبات: الأنواع والمميزات وكيف تبدأ مشروعك

ربط نظامك بالفاتورة الإلكترونية: دليل منصة فاتورة في السعودية ومنظومة الضرائب في مصر

شركة تصميم مواقع في جدة: ماذا تقدم وكيف تختار الشركة المناسبة لمشروعك؟

شركات برمجة في مصر: كيف تختار شركة برمجة وتصميم مواقع مناسبة لمشروعك؟