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

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

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

مؤشرات الويب الأساسية هي مجموعة من المقاييس الواقعية التي تعكس تجربة المستخدم. وهي جزء من إشارات تجربة الصفحة في جوجل وتُستخدم في الترتيب. لكل مقياس حد "جيد":

• LCP: يجب أن يكون ≤ 2.5 ثانية.
• INP: يجب أن يكون ≤ 200 مللي ثانية.
• CLS: يجب أن يكون ≤ 0.1.

تُقاس هذه الحدود عند النسبة المئوية 75 لتحميلات الصفحة، مما يعني أن 75% من الزيارات يجب أن تلبي الهدف.

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

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

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

• تقرير تجربة مستخدم Chrome (CrUX): يوفر بيانات مجمعة للمستخدمين الحقيقيين لنطاقك. يمكن الوصول إليه عبر PageSpeed Insights أو لوحة معلومات CrUX.
• مكتبة web-vitals JavaScript: أضف هذا النص البرمجي الخفيف إلى موقعك لإرسال المقاييس إلى تحليلاتك.

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

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

• Lighthouse: مدمج في Chrome DevTools، يقوم بتدقيق الأداء ويعطي درجة.
• WebPageTest: لتحليل أعمق مع تقييد الشبكة.

استخدم بيانات المختبر للتكرار بسرعة، ولكن تحقق دائمًا من البيانات الميدانية.

تحسين Largest Contentful Paint (LCP)

يقيس LCP الوقت الذي يصبح فيه أكبر عنصر محتوى (عادة صورة رئيسية أو عنوان) مرئيًا. لتحسينه:

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

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

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

يقيس INP استجابة صفحتك لتفاعلات المستخدم. يعني ارتفاع INP أن المتصفح مشغول ولا يمكنه الاستجابة بسرعة. لتحسينه:

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

أيضًا، تأكد من أنك لا تعيق الخيط الرئيسي بنصوص برمجية تابعة لجهات خارجية. قم بتدقيقها بانتظام.

تحسين Cumulative Layout Shift (CLS)

يقيس CLS تحولات التخطيط غير المتوقعة. للحفاظ عليه منخفضًا:

1. عيّن سمات الحجم: قم دائمًا بتضمين width وheight على الصور ومقاطع الفيديو.
2. احجز مساحة للمحتوى الديناميكي: استخدم aspect-ratio في CSS أو عناصر نائبة للإعلانات والتضمينات.
3. تجنب إدراج محتوى فوق المحتوى الموجود: باستثناء الاستجابة لتفاعل المستخدم.
4. استخدم تحريكات transform: فضّل transform وopacity للتحريكات بدلاً من الخصائص التي تؤدي إلى إعادة تخطيط.

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

إليك سير عمل بسيط لمراقبة وتحسين CWV باستمرار:

تذكر أن التحسينات يجب التحقق منها باستخدام بيانات المستخدم الحقيقي بمرور الوقت.

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

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

LCP ≤ 2.5 ثانية، INP ≤ 200 مللي ثانية، CLS ≤ 0.1، مقاسة عند النسبة المئوية 75 لتحميلات الصفحة.

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

راقب البيانات الميدانية باستمرار وقم بإجراء تدقيقات المختبر بعد التغييرات الرئيسية. المراجعة الشهرية ممارسة جيدة.

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

نعم. يمكن إجراء العديد من التحسينات مثل تحسين الصور وتأجيل النصوص البرمجية وتعيين سمات الحجم بتغييرات بسيطة في الكود.

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