Core Web Vitals: قياس وتحسين أداء الويب

يتوقع مستخدموك تجارب سريعة وسلسة. تُحدد مقاييس Core Web Vitals (CWV) من Google هذه التجربة كمياً: Largest Contentful Paint (LCP)، وFirst Input Delay (FID)، وCumulative Layout Shift (CLS). تؤثر الدرجات الضعيفة سلباً على تحسين محركات البحث ومعدلات التحويل. يوضح هذا الدليل كيفية قياس وتحسين كل مقياس بخطوات قابلة للتنفيذ.

ما هي Core Web Vitals؟

Core Web Vitals هي ثلاثة مقاييس تركز على المستخدم وتستخدمها Google كإشارات ترتيب:

• LCP: الوقت الذي يستغرقه أكبر عنصر محتوى (صورة، كتلة نصية) ليصبح مرئياً. جيد: ≤2.5 ثانية.
• FID: الوقت من أول تفاعل للمستخدم (نقرة، لمسة) إلى استجابة المتصفح. جيد: ≤100 مللي ثانية.
• CLS: الاستقرار البصري - مقدار تحرك تخطيط الصفحة بشكل غير متوقع. جيد: ≤0.1.

تعكس هذه المقاييس تجربة المستخدم في العالم الحقيقي، وليس فقط ظروف المختبر. تحسينها يجعل موقعك يبدو أسرع وأكثر استقراراً.

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

تحتاج إلى بيانات المختبر والبيانات الميدانية. تساعد أدوات المختبر في تصحيح الأخطاء؛ بينما تُظهر البيانات الميدانية (مراقبة المستخدمين الحقيقيين) الأداء الفعلي.

أدوات المختبر

• Lighthouse (في Chrome DevTools): قم بإجراء عمليات تدقيق للأداء وإمكانية الوصول وتحسين محركات البحث. يُبلغ عن LCP وCLS وTBT (بديل عن FID).
• WebPageTest: اختبار متقدم مع شرائط أفلام ومخططات انسيابية.
• لوحة الأداء في Chrome DevTools: سجل وحلل أداء وقت التشغيل.

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

• تقرير تجربة مستخدم Chrome (CrUX): مجموعة بيانات عامة لمقاييس المستخدمين الحقيقيين لملايين المواقع.
• Google Search Console: تقرير Core Web Vitals يُظهر مجموعات عناوين URL التي تحتاج إلى اهتمام.
• مكتبة web-vitals JavaScript: اجمع مقاييس المستخدمين الحقيقيين وأرسلها إلى تحليلاتك.

استخدم البيانات الميدانية لتحديد الصفحات التي بها مشكلات، ثم أدوات المختبر لتشخيصها وإصلاحها.

تحسين Largest Contentful Paint (LCP)

غالباً ما يكون LCP هو الصورة الرئيسية أو العنوان الرئيسي. لتسريعه:

1. حسّن الصور: اضغط، واستخدم تنسيقات حديثة (WebP، AVIF)، وقدم أحجاماً متجاوبة. يمكن أن تساعد أدوات مثل ضاغط الصور في تقليل حجم الملف دون فقدان الجودة.
2. قم بتحميل الموارد الحرجة مسبقاً: استخدم <link rel="preload"> للصور الرئيسية والخطوط وCSS الأساسي.
3. قلل وقت استجابة الخادم: استخدم التخزين المؤقت وشبكات CDN وحسّن استعلامات الواجهة الخلفية.
4. تخلص من الموارد التي تعيق العرض: قم بتأجيل JS وCSS غير الضروري، وقم بتضمين CSS الحرج.
5. استخدم CDN: قدم الأصول من مواقع قريبة من المستخدمين.

مثال: قم بتحميل صورة LCP مسبقاً:

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

تحسين First Input Delay (FID)

يقيس FID الاستجابة. التأخير الطويل يعني أن الخيط الرئيسي مشغول. للتحسين:

• قسّم المهام الطويلة: استخدم setTimeout أو requestIdleCallback للتنازل عن الخيط الرئيسي.
• حسّن JavaScript: قم بتقسيم الكود وإزالة الكود غير المستخدم وتأجيل البرامج النصية غير الحرجة.
• قلل تأثير الطرف الثالث: قم بتحميل التحليلات والإعلانات بشكل غير متزامن أو بعد التفاعل.
• استخدم web workers للعمليات الحسابية الثقيلة.

ضع في اعتبارك أيضاً Interaction to Next Paint (INP)، الذي يحل محل FID في مارس 2024. يقيس INP الاستجابة الشاملة طوال دورة حياة الصفحة. تنطبق نفس التحسينات.

تحسين Cumulative Layout Shift (CLS)

يحدث CLS عندما تتحرك العناصر بشكل غير متوقع. الأسباب الشائعة: الصور بدون أبعاد، الإعلانات، الخطوط، والمحتوى الديناميكي. الإصلاحات:

• قم دائماً بتعيين العرض والارتفاع للصور ومقاطع الفيديو، أو استخدم CSS aspect-ratio.
• احجز مساحة للإعلانات والتضمينات: استخدم عناصر نائبة بحجم ثابت.
• تجنب إدراج محتوى فوق المحتوى الموجود إلا استجابةً لتفاعل المستخدم.
• استخدم font-display: swap وقم بتحميل الخطوط مسبقاً لتجنب النص غير المرئي (FOIT) وتحولات التخطيط.
• قم بالتحريك باستخدام transform بدلاً من الخصائص التي تؤدي إلى إعادة التخطيط.

مثال: تعيين نسبة العرض إلى الارتفاع للصور المتجاوبة:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

الأدوات وسير العمل

دمج الأداء في سير عمل التطوير الخاص بك:

1. قم بتشغيل Lighthouse في CI لاكتشاف الانحدارات.
2. استخدم مكتبة web-vitals لإرسال البيانات الميدانية إلى تحليلاتك.
3. راقب CrUX وSearch Console لاتجاهات المستخدمين الحقيقيين.
4. حدد أولويات الإصلاحات حسب التأثير: غالباً ما يحقق LCP وCLS أكبر المكاسب.

لتحسين الصور بسرعة، جرب ضاغط الصور لتقليل الصور الحرجة لـ LCP.

الأسئلة الشائعة

ما هي العتبات الحالية لـ Core Web Vitals؟

LCP: جيد ≤2.5 ثانية، يحتاج إلى تحسين ≤4 ثوانٍ، ضعيف >4 ثوانٍ. FID: جيد ≤100 مللي ثانية، يحتاج إلى تحسين ≤300 مللي ثانية، ضعيف >300 مللي ثانية. CLS: جيد ≤0.1، يحتاج إلى تحسين ≤0.25، ضعيف >0.25.

كم مرة يجب أن أقيس Core Web Vitals؟

راقب البيانات الميدانية باستمرار عبر RUM. قم بإجراء عمليات تدقيق المختبر في كل تغيير كبير في الكود وعلى الأقل شهرياً لاكتشاف الانحدارات.

هل تحسين Core Web Vitals يؤثر حقاً على تحسين محركات البحث؟

نعم، تستخدم Google تجربة الصفحة (بما في ذلك CWV) كإشارة ترتيب. بينما يظل المحتوى أساسياً، يمكن أن تمنحك CWV الجيدة ميزة وتحسن رضا المستخدم.