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

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

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

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

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

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

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

يمكنك قياس CWV بطريقتين: في المختبر (الاختبار الاصطناعي) وفي الميدان (مراقبة المستخدم الحقيقي). كلاهما قيم، لكن بيانات الميدان هي ما يستخدمه Google للترتيب.

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

تأتي بيانات الميدان من المستخدمين الفعليين. أفضل مصدر هو تقرير تجربة مستخدم Chrome (CrUX)، الذي يدعم تقرير مؤشرات الويب الأساسية في Google Search Console. يمكنك أيضًا استخدام مكتبة web-vitals لجمع بيانات RUM الخاصة بك وإرسالها إلى نقطة نهاية تحليلية.

لعرض بيانات CrUX لموقعك، استخدم PageSpeed Insights أو CrUX API. تعرض هذه توزيع LCP وINP وCLS لنطاقك.

بيانات المختبر: الاختبار الاصطناعي

تحاكي أدوات المختبر تحميل الصفحة في بيئة خاضعة للرقابة. إنها رائعة لتصحيح الأخطاء والتكامل مع CI/CD. الخيارات الشائعة:

• Lighthouse: مدمج في Chrome DevTools. قم بتشغيله من علامة التبويب Audits أو عبر CLI.
• WebPageTest: اختبار متقدم مع شرائط فيلم ومخططات شلال.
• PageSpeed Insights: يجمع بين بيانات المختبر والميدان.

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

تحسين أكبر رسم للمحتوى (LCP)

عادةً ما يكون LCP هو المقياس الأكثر تأثيرًا في الإصلاح. غالبًا ما يكون أكبر عنصر صورة رئيسية أو عنوانًا أو ملصق فيديو. لتحسين LCP:

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

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

<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 من مهام JavaScript الطويلة التي تعيق الخيط الرئيسي. لتحسين INP:

• قسّم المهام الطويلة: استخدم setTimeout أو requestIdleCallback أو واجهة Scheduler للتنازل عن الخيط الرئيسي.
• حسّن معالجات الأحداث: استخدم debounce أو throttle للمعالجات المكلفة، وتجنب إجهاد التخطيط.
• قلل حجم JavaScript: قسّم الكود، وأزل الشيفرة غير المستخدمة، وأجّل النصوص غير الحرجة.
• استخدم web workers: انقل العمليات الحسابية الثقيلة إلى خيط عامل.
• قلل من نصوص الطرف الثالث: غالبًا ما تسبب نصوص الطرف الثالث مهام طويلة. قم بتحميلها بشكل غير متزامن وقم بمراجعة تأثيرها.

يمكنك قياس INP في الميدان باستخدام مكتبة web-vitals:

import {onINP} from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value);
  // Send to your analytics endpoint
});

تحسين تحول تخطيط المحتوى (CLS)

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

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

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

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

الأدوات وسير العمل للمراقبة المستمرة

تحسين CWV ليس مهمة لمرة واحدة. قم بإعداد المراقبة المستمرة:

• Lighthouse CI: قم بتشغيل Lighthouse في خط أنابيب CI/CD الخاص بك وافشل عمليات البناء إذا انخفضت النتائج.
• مراقبة المستخدم الحقيقي: استخدم مكتبة web-vitals لإرسال المقاييس إلى منصة التحليلات الخاصة بك (مثل Google Analytics 4، نقطة نهاية مخصصة).
• Search Console: راقب تقرير مؤشرات الويب الأساسية بحثًا عن أي تراجع.
• التنبيهات: قم بإعداد تنبيهات عندما تتجاوز بيانات الميدان الحدود.

لإجراء فحص سريع، استخدم أداة HTML إلى صورة لالتقاط لقطات مرئية لصفحتك في مراحل مختلفة، مما يساعدك على اكتشاف تحولات التخطيط يدويًا.

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

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

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

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

يتم تحديث بيانات CrUX يوميًا، لكن نافذة 28 يومًا المتجددة تعني أن التغييرات تستغرق وقتًا لتظهر. للحصول على تعليقات أسرع، استخدم RUM الخاص بك.

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

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

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