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

لماذا تُعد مؤشرات الويب الأساسية مهمة لموقعك

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

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

قبل التحسين، اعرف ما يقيسه كل مؤشر وحدوده.

تستند هذه الحدود إلى بيانات ميدانية (مستخدمين حقيقيين)، وليس اختبارات معملية. استهدف النطاق "الجيد" لما لا يقل عن 75% من تحميلات الصفحة.

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

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

أدوات معملية

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

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

• PageSpeed Insights: يعرض كلاً من البيانات المعملية والميدانية لعنوان URL.
• Google Search Console: تقرير مؤشرات الويب الأساسية يجمع عناوين URL حسب الحالة.
• مكتبة web-vitals JavaScript: اجمع مقاييس المستخدم الحقيقي في تحليلاتك الخاصة.

لأتمتة جمع البيانات على موقعك، قم بتضمين مكتبة web-vitals وأرسل المقاييس إلى نقطة نهاية التحليلات:

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

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

يمنحك هذا تدفقًا مستمرًا من البيانات الميدانية لتتبع التحسينات.

تحسين Largest Contentful Paint (LCP)

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

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

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

<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
<img src="/hero.avif" alt="Hero" width="1200" height="600" fetchpriority="high">

قم دائمًا بتعيين العرض والارتفاع لتجنب تحولات التخطيط.

تحسين Interaction to Next Paint (INP)

يقيس INP الاستجابة. المهام الطويلة تحجب الخيط الرئيسي، مما يؤخر التغذية الراجعة المرئية. لتحسين INP:

• قسّم المهام الطويلة: استخدم setTimeout أو scheduler.yield للتنازل للمتصفح.
• حسّن معالجات الأحداث: استخدم debounce للإدخال، وتجنب العمل المتزامن الثقيل.
• قلل JavaScript: قسّم الكود، واستخدم tree-shaking، وأجّل البرامج النصية غير الحرجة.
• استخدم web workers للمهام كثيفة المعالجة.
• تجنب تحديثات DOM الكبيرة: اجمع تغييرات DOM واستخدم requestAnimationFrame.

مثال: تنازل للخيط الرئيسي أثناء حلقة طويلة:

async function processItems(items) {
  for (let i = 0; i < items.length; i++) {
    // do work
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

يحافظ هذا على استجابة الصفحة أثناء المعالجة الثقيلة.

تحسين Cumulative Layout Shift (CLS)

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

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

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

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

يمنع هذا التحولات عند تحميل الفيديو.

المراقبة والتكرار

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

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

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

LCP: جيد ≤2.5 ثانية، يحتاج تحسينًا 2.5–4.0 ثانية، ضعيف >4.0 ثانية. INP: جيد ≤200 مللي ثانية، يحتاج تحسينًا 200–500 مللي ثانية، ضعيف >500 مللي ثانية. CLS: جيد ≤0.1، يحتاج تحسينًا 0.1–0.25، ضعيف >0.25.

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

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

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

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

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