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

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

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

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

• LCP: الوقت حتى يتم عرض أكبر عنصر محتوى (صورة، كتلة نصية، فيديو). جيد: ≤2.5 ثانية، يحتاج تحسين: ≤4 ثوانٍ، ضعيف: >4 ثوانٍ.
• INP: الوقت من تفاعل المستخدم (نقرة، لمسة، ضغطة مفتاح) إلى الإطار التالي المرسوم. جيد: ≤200 مللي ثانية، يحتاج تحسين: ≤500 مللي ثانية، ضعيف: >500 مللي ثانية.
• CLS: مجموع درجات تحول التخطيط للحركة البصرية غير المتوقعة. جيد: ≤0.1، يحتاج تحسين: ≤0.25، ضعيف: >0.25.

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

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

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

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

• Lighthouse (في Chrome DevTools أو PageSpeed Insights): يفحص LCP وCLS وإجمالي وقت الحجب (بديل لـ INP).
• WebPageTest: تحليل متقدم لشريط الأفلام وWaterfall.
• لوحة الأداء في Chrome DevTools: سجل التفاعلات لتحديد المهام الطويلة التي تؤثر على INP.

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

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

قم بتثبيت مكتبة web-vitals عبر npm أو قم بتضمينها من CDN، ثم سجل المقاييس:

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);

استخدم sendBeacon لتجنب حظر إلغاء التحميل. اجمع البيانات بمرور الوقت لرؤية الاتجاهات.

تحسين Largest Contentful Paint (LCP)

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

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

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

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

لضغط الصور، جرب ضاغط الصور لتقليل حجم الملف دون فقدان جودة مرئي.

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

يعكس INP الاستجابة. مهام JavaScript الطويلة تحجب الخيط الرئيسي وتؤخر التغذية الراجعة البصرية.

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

قس INP في الميدان باستخدام مكتبة web-vitals واستخدم لوحة الأداء لتحديد المهام الطويلة أثناء التفاعلات.

تحسين Cumulative Layout Shift (CLS)

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

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

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

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

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

سير عمل عملي لتحسين CWV

1. قس خط الأساس: قم بتشغيل Lighthouse واجمع البيانات الميدانية عبر web-vitals.
2. حدد الاختناقات: استخدم لوحة الأداء وشبكة Waterfall.
3. أعط الأولوية للإصلاحات: ركز على المقياس صاحب أسوأ درجة.
4. نفذ التغييرات: حسّن الصور، أجل البرامج النصية، حدد الأبعاد.
5. اختبر وراقب: أعد تشغيل اختبارات المختبر وتتبع البيانات الميدانية بمرور الوقت.

تذكر أن CWV هي مقاييس ميدانية؛ تساعد أدوات المختبر في التشخيص لكن بيانات المستخدم الحقيقي هي مصدر الحقيقة.

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

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

جيد: LCP ≤2.5 ثانية، INP ≤200 مللي ثانية، CLS ≤0.1. يحتاج تحسين: LCP ≤4 ثوانٍ، INP ≤500 مللي ثانية، CLS ≤0.25. ضعيف: فوق تلك القيم. يتم تقييم هذه عند النسبة المئوية 75 لتحميلات الصفحات.

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

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

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

نعم. العديد من التحسينات تقنية: ضغط الصور، تعيين سمات العرض/الارتفاع، تأجيل JavaScript غير الحرج، وتقسيم المهام الطويلة. غالبًا ما تحقق هذه التغييرات مكاسب كبيرة دون إعادة تصميم مرئية.

هل أنت مستعد لتحسين صورك للحصول على LCP أفضل؟ استخدم ضاغط الصور المجاني لدينا لتصغير الصور مع الحفاظ على الجودة وتعزيز درجات مؤشرات الويب الأساسية.