مؤشرات الويب الأساسية: قياس وتحسين أداء الويب

لقد قمت ببناء موقع ويب سريع، لكن المستخدمين لا يزالون يشتكون من البطء. أو ربما انخفضت تصنيفات تحسين محركات البحث (SEO) بعد تحديث Google. قد يكون السبب هو مؤشرات الويب الأساسية (Core Web Vitals) — مقاييس Google لتجربة المستخدم. في هذا الدليل، ستتعرف على ماهيتها، وكيفية قياسها، وخطوات ملموسة لتحسين كل منها.

ما هي مؤشرات الويب الأساسية؟

مؤشرات الويب الأساسية هي ثلاثة مقاييس تحدد جوانب رئيسية من تجربة المستخدم:

• Largest Contentful Paint (LCP): الوقت الذي يستغرقه أكبر عنصر محتوى (صورة أو فيديو أو كتلة نصية) ليصبح مرئيًا. جيد: ≤2.5 ثانية.
• Interaction to Next Paint (INP): يقيس الاستجابة — الوقت من تفاعل المستخدم (نقرة، لمسة، ضغطة مفتاح) إلى الإطار التالي المرسوم. جيد: ≤200 مللي ثانية.
• Cumulative Layout Shift (CLS): يحدد التحولات غير المتوقعة في التخطيط أثناء التحميل. جيد: ≤0.1.

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

كيفية قياس مؤشرات الويب الأساسية

تحتاج إلى بيانات المختبر والبيانات الميدانية معًا. بيانات المختبر (الاختبار الاصطناعي) تساعد في التصحيح؛ البيانات الميدانية (مراقبة المستخدم الحقيقي) تعكس التجربة الفعلية.

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

• Lighthouse في Chrome DevTools: قم بإجراء عمليات تدقيق والحصول على درجات مع فرص للتحسين.
• WebPageTest: اختبار متقدم مع شرائط الأفلام ومخططات الشلال.
• PageSpeed Insights: يجمع بين بيانات المختبر والبيانات الميدانية من CrUX.

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

• Chrome User Experience Report (CrUX): مجموعة بيانات عامة لمقاييس المستخدمين الحقيقيين.
• مكتبة web-vitals JavaScript: اجمع المقاييس من المستخدمين الحقيقيين عبر التحليلات.
• Search Console: تقرير مؤشرات الويب الأساسية يظهر مجموعات عناوين URL التي تحتاج إلى اهتمام.

إليك كيفية استخدام مكتبة web-vitals لإرسال المقاييس إلى التحليلات:

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use navigator.sendBeacon if available
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

تحسين LCP

غالبًا ما يكون LCP هو المقياس الأكثر تأثيرًا. لتحسينه:

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

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

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

تحسين INP

يقيس INP الاستجابة. غالبًا ما يأتي INP المرتفع من المهام الطويلة التي تعيق الخيط الرئيسي.

1. قسّم المهام الطويلة: استخدم setTimeout أو requestIdleCallback أو scheduler.yield() للتنازل عن الخيط الرئيسي.
2. حسّن معالجات الأحداث: استخدم debounce أو throttle للعمليات المكلفة.
3. قلل تنفيذ JavaScript: قم بتقسيم الكود وإزالة غير المستخدم وتأجيل البرامج النصية غير الحرجة.
4. تجنب تحديثات DOM الكبيرة: اجمع تغييرات DOM واستخدم DOM الافتراضي بحكمة.
5. استخدم web workers للعمل المكثف على وحدة المعالجة المركزية.

مثال: التنازل باستخدام scheduler.yield() (حيثما كان مدعومًا):

async function handleClick() {
  // Do some work
  await scheduler.yield();
  // Continue after yielding
}

تحسين CLS

CLS يتعلق بالاستقرار البصري. امنع التحولات غير المتوقعة:

1. قم دائمًا بتضمين سمات العرض والارتفاع على الصور ومقاطع الفيديو.
2. احجز مساحة للإعلانات والتضمينات باستخدام CSS aspect-ratio أو أبعاد ثابتة.
3. تجنب إدراج محتوى فوق المحتوى الحالي إلا إذا كان triggered بواسطة تفاعل المستخدم.
4. استخدم تحويلات CSS للرسوم المتحركة بدلاً من الخصائص التي تؤدي إلى إعادة التخطيط.
5. قم بتحميل الخطوط مسبقًا واستخدم font-display: swap لتجنب تحولات النص غير المرئي.

مثال: احجز مساحة باستخدام aspect-ratio:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

مقارنة مؤشرات الويب الأساسية

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

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

• قم بتشغيل Lighthouse في CI لاكتشاف الانحدارات.
• استخدم RUM (مراقبة المستخدم الحقيقي) لتتبع البيانات الميدانية.
• ضع ميزانيات الأداء والتنبيهات.
• قم بتدقيق البرامج النصية الخارجية بانتظام — غالبًا ما تؤثر على INP و LCP.

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

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

ما هي العتبات الحالية لمؤشرات الويب الأساسية؟

LCP جيد ≤2.5 ثانية، يحتاج إلى تحسين ≤4 ثوانٍ؛ INP جيد ≤200 مللي ثانية، يحتاج إلى تحسين ≤500 مللي ثانية؛ CLS جيد ≤0.1، يحتاج إلى تحسين ≤0.25.

كم مرة يجب أن أقيس مؤشرات الويب الأساسية؟

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

هل يمكنني تحسين مؤشرات الويب الأساسية دون إعادة بناء موقعي؟

نعم — العديد من الإصلاحات مثل تحسين الصور والتحميل المسبق وتأجيل البرامج النصية يمكن تطبيقها بشكل تدريجي.