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

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

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

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

• LCP يقيس أداء التحميل. يحدد متى يصبح أكبر عنصر محتوى (صورة، كتلة نصية، فيديو) مرئيًا. استهدف ≤2.5 ثانية.
• INP يقيس الاستجابة. يلتقط زمن الوصول لجميع التفاعلات (النقرات، اللمسات، ضغطات المفاتيح) ويبلغ عن أسوأ تأخير (أو قريب من الأسوأ). استهدف ≤200 مللي ثانية.
• CLS يقيس الاستقرار البصري. يحدد التحولات غير المتوقعة في التخطيط أثناء التحميل. استهدف ≤0.1.

يتم قياس هذه المؤشرات ميدانيًا (من المستخدمين الحقيقيين) ومختبريًا (في بيئات خاضعة للرقابة). كلاهما مهم.

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

تحتاج إلى بيانات ميدانية ومخبرية لتشخيص المشكلات.

البيانات الميدانية (مراقبة المستخدم الحقيقي)

تعكس البيانات الميدانية تجارب المستخدمين الفعلية عبر الأجهزة والشبكات. استخدم هذه المصادر:

• تقرير تجربة مستخدم Chrome (CrUX): مجموعة بيانات عامة لمقاييس المستخدمين الحقيقيين لملايين المواقع. يمكن الوصول إليها عبر PageSpeed Insights أو واجهة برمجة تطبيقات CrUX.
• Google Search Console: يعرض تقرير مؤشرات الويب الأساسية مجموعات عناوين URL التي تحتاج إلى اهتمام بناءً على بيانات CrUX.
• مكتبة 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);

البيانات المخبرية (الاختبار الاصطناعي)

تحاكي الأدوات المخبرية التحميل في بيئة خاضعة للرقابة، مما يجعلها رائعة لتصحيح الأخطاء والتكامل مع CI.

• Lighthouse: مدمج في Chrome DevTools، ومتوفر كأداة سطر أوامر، ومتكامل في PageSpeed Insights. يبلغ عن المقاييس المخبرية والفرص.
• WebPageTest: اختبار متقدم مع ظروف شبكة مخصصة وشرائط فيلم.
• لوحة الأداء في Chrome DevTools: سجل وحلل أداء وقت التشغيل، بما في ذلك المهام الطويلة التي تؤثر على INP.

أفضل ممارسة: استخدم البيانات المخبرية لتحديد الإصلاحات، والبيانات الميدانية للتحقق من التأثير.

تحسين Largest Contentful Paint (LCP)

عادةً ما يهيمن على LCP صورة البطل أو كتلة نصية كبيرة. حسّن هذه:

1. حسّن مورد LCP: اضغط الصور (استخدم WebP/AVIF)، وقدم أحجامًا متجاوبة باستخدام srcset، وقم بتحميل صورة LCP مسبقًا إذا كانت حرجة.
2. أزل الموارد التي تعيق العرض: ضمّن CSS الحرج، وأجّل CSS وJavaScript غير الحرجة.
3. حسّن وقت استجابة الخادم (TTFB): استخدم CDN، ومكّن التخزين المؤقت، وحسّن استعلامات الواجهة الخلفية.
4. قلل العرض من جانب العميل: بالنسبة لتطبيقات الصفحة الواحدة (SPA)، فكر في العرض من جانب الخادم (SSR) أو التوليد الثابت للعرض الأولي.

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

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

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

يقيس INP التأخير بين تفاعل المستخدم والرسم التالي. المهام الطويلة وJavaScript الثقيل هي الأسباب الشائعة.

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

مثال: التنازل عن الخيط الرئيسي:

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    return scheduler.yield();
  }
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleClick() {
  // ... do some work
  await yieldToMain();
  // ... continue
}

تحسين Cumulative Layout Shift (CLS)

يحدث CLS عندما تتحرك العناصر بشكل غير متوقع. امنعه عن طريق:

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

مثال: احجز مساحة لإعلان:

<div>
  <!-- ad loads here -->
</div>

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

الأداء ليس إصلاحًا لمرة واحدة. ادمج القياس في سير عملك:

• ضع ميزانيات: استخدم Lighthouse CI لفرض الحدود في طلبات السحب.
• راقب البيانات الميدانية: قم بإعداد لوحات المعلومات باستخدام CrUX أو RUM الخاص بك.
• حدد أولويات الإصلاحات: ركز على المقاييس ذات أكبر فجوة عن حدود "جيد".
• اختبر على أجهزة حقيقية: حاكي أجهزة الهواتف متوسطة المستوى لاكتشاف المشكلات.

لإجراء فحص سريع، قم بتشغيل صفحتك عبر PageSpeed Insights؛ فهو يجمع بين البيانات المخبرية والميدانية.

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

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

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

كم مرة يتم تحديث بيانات CrUX؟

يتم تحديث بيانات CrUX يوميًا، لكن مجموعة البيانات تعكس نافذة متجددة مدتها 28 يومًا. يتم تحديث Search Console بشكل دوري.

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

نعم. العديد من التحسينات تقنية: تحسين الصور، وتأجيل البرامج النصية، وحجز مساحة للمحتوى الديناميكي، وتقليل العمل على الخيط الرئيسي.

هل أنت مستعد لتحليل أداء موقعك؟ استخدم محلل سجلات Nginx لدينا لتحديد استجابات الخادم البطيئة التي تؤثر على TTFB وLCP.