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

لقد بنيت تطبيق ويب حديثًا، لكن المستخدمين يشتكون من أنه يبدو بطيئًا. ترتيب البحث يتراجع، ولست متأكدًا من السبب. قد يكون الجاني هو مؤشرات الويب الأساسية الضعيفة—مقاييس جوجل لتجربة المستخدم. في هذا الدليل، ستتعلم ما هي، وكيفية قياسها، والأهم من ذلك، كيفية تحسينها بخطوات قابلة للتنفيذ.

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

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

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

هذه المقاييس هي جزء من إشارات تجربة الصفحة لدى جوجل ويمكن أن تؤثر على ترتيب البحث. ولكن الأهم من ذلك، أنها تعكس رضا المستخدم الحقيقي.

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

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

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

• Lighthouse: مدمج في Chrome DevTools. قم بتشغيل تدقيق للحصول على الدرجات والفرص.
• PageSpeed Insights: يجمع بين بيانات المختبر والبيانات الميدانية لعنوان URL.
• WebPageTest: اختبار متقدم مع مواقع وأجهزة مخصصة.

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

• تقرير تجربة مستخدم Chrome (CrUX): مجموعة بيانات عامة لمقاييس المستخدم الحقيقي. يمكن الوصول إليها عبر PageSpeed Insights أو BigQuery.
• مكتبة web-vitals JavaScript: أضفها إلى موقعك لجمع مقاييس المستخدم الحقيقي وإرسالها إلى التحليلات الخاصة بك.
• Search Console: تقرير مؤشرات الويب الأساسية يظهر أداء المجموعة بناءً على بيانات CrUX.

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

import {getLCP, getFID, getCLS} from 'web-vitals';

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

getLCP(sendToAnalytics);
getFID(sendToAnalytics);
getCLS(sendToAnalytics);

تحسين LCP

غالبًا ما يكون LCP هو المقياس الأكثر تحديًا. ركز على هذه المجالات:

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

تحسين FID

FID يتعلق بالاستجابة. المهام الطويلة تحجب الخيط الرئيسي، مما يؤخر التفاعلية.

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

تحسين CLS

يحدث CLS بسبب تحول العناصر أثناء التحميل. امنعه عن طريق:

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

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

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

اتبع هذه العملية خطوة بخطوة:

1. القياس: استخدم PageSpeed Insights للحصول على خط أساس لكل من بيانات المختبر والبيانات الميدانية.
2. تحديد المشكلات: انظر إلى الفرص والتشخيصات في Lighthouse.
3. تحديد الأولويات: ركز على المقياس ذي أسوأ درجة أولاً.
4. تنفيذ الإصلاحات: طبق التحسينات المذكورة أعلاه.
5. الاختبار: أعد تشغيل Lighthouse وتحقق من البيانات الميدانية بعد النشر.
6. المراقبة: قم بإعداد مراقبة المستخدم الحقيقي باستخدام مكتبة web-vitals وتتبعها بمرور الوقت.

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

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

بالنسبة لـ LCP، الجيد هو ≤ 2.5 ثانية، يحتاج إلى تحسين هو ≤ 4 ثوانٍ، الضعيف هو > 4 ثوانٍ. بالنسبة لـ FID، الجيد هو ≤ 100 مللي ثانية، يحتاج إلى تحسين هو ≤ 300 مللي ثانية، الضعيف هو > 300 مللي ثانية. بالنسبة لـ CLS، الجيد هو ≤ 0.1، يحتاج إلى تحسين هو ≤ 0.25، الضعيف هو > 0.25.

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

راقب البيانات الميدانية باستمرار وقم بإجراء اختبارات المختبر بعد التغييرات الكبيرة. تقوم جوجل بتحديث بيانات CrUX شهريًا، لذا تحقق من Search Console بانتظام.

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

بعض الإصلاحات مثل ضغط الصور يمكن القيام بها باستخدام الأدوات، لكن العديد منها يتطلب تغييرات في الكود. فكر في استخدام إضافة تحسين الأداء إذا كنت تستخدم نظام إدارة محتوى مثل WordPress.

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