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

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

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

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

• Largest Contentful Paint (LCP): يقيس أداء التحميل. يشير إلى الوقت الذي يصبح فيه أكبر عنصر محتوى (صورة، كتلة نصية، أو فيديو) مرئيًا. استهدف LCP أقل من 2.5 ثانية.
• First Input Delay (FID): يقيس التفاعلية. يسجل الوقت من أول تفاعل للمستخدم (مثل النقر على رابط) إلى استجابة المتصفح. استهدف FID أقل من 100 مللي ثانية.
• Cumulative Layout Shift (CLS): يقيس الاستقرار البصري. يحدد التحولات غير المتوقعة في التخطيط أثناء تحميل الصفحة. استهدف CLS أقل من 0.1.

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

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

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

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

• Lighthouse: مدمج في Chrome DevTools، يقوم بتدقيق الأداء ويوفر درجات لـ LCP و FID (كـ TBT) و CLS. قم بتشغيله في وضع التصفح المتخفي لتجنب تحريف الإضافات للنتائج.
• WebPageTest: يقدم شرائط فيلم مفصلة ومخططات شلال، مفيدة لتشخيص اختناقات LCP.
• PageSpeed Insights: يجمع بين بيانات المختبر والميدان، ويعرض درجات Lighthouse ومقاييس المستخدم الحقيقي من تقرير تجربة المستخدم في Chrome (CrUX).

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

• Chrome UX Report (CrUX): مجموعة بيانات عامة لمقاييس المستخدم الحقيقي لملايين المواقع. يمكن الوصول إليها عبر PageSpeed Insights أو BigQuery.
• Google Search Console: ضمن تقرير "Core Web Vitals"، يتم تجميع عناوين URL حسب الحالة (ضعيف، يحتاج تحسين، جيد).
• مكتبة Web Vitals JavaScript: أضف هذا المقتطف إلى موقعك لجمع المقاييس عبر Google Analytics أو نقطة النهاية الخاصة بك.

import {onLCP, onFID, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  // Replace with your analytics endpoint
  console.log(metric.name, metric.value);
}

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);

ابدأ ببيانات الميدان لتحديد الصفحات التي بها مشكلات، ثم استخدم أدوات المختبر للتعمق في الأسباب.

تحسين Largest Contentful Paint (LCP)

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

1. تحسين الصور: اضغط الصور باستخدام تنسيقات حديثة مثل WebP أو AVIF. استخدم صورًا متجاوبة مع srcset و sizes لتقديم صور بالحجم المناسب. قم بتحميل الصور الموجودة أسفل الشاشة بشكل بطيء (lazy-load)، ولكن لا تقم أبدًا بتحميل صورة LCP بشكل بطيء.
2. تحميل الموارد الحرجة مسبقًا: أضف <link rel="preload"> لصورة LCP أو الخط. على سبيل المثال: <link rel="preload" as="image" href="#">.
3. إزالة الموارد التي تعيق العرض: قم بتأجيل CSS و JavaScript غير الحرجة. قم بتضمين CSS الحرج وتحميل الباقي بشكل غير متزامن.
4. استخدم CDN: قدم الأصول من شبكة توصيل المحتوى لتقليل زمن الوصول.
5. تقليل وقت استجابة الخادم: حسّن استعلامات الواجهة الخلفية، واستخدم التخزين المؤقت، وفكر في العرض من الحافة (edge rendering).

للتعمق أكثر، راجع دليل LCP من web.dev.

تحسين First Input Delay (FID)

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

• تقسيم المهام الطويلة: قسّم JavaScript إلى أجزاء أصغر باستخدام setTimeout أو requestIdleCallback.
• تقليل العمل على الخيط الرئيسي: قلل وقت تنفيذ JavaScript عن طريق تقسيم الكود (code-splitting) وهز الأشجار (tree-shaking) وإزالة polyfills غير المستخدمة.
• استخدم web workers للعمليات الحسابية الثقيلة.
• تجنب حزم JavaScript الكبيرة: قم بتدقيقها باستخدام webpack-bundle-analyzer وفكر في التحميل البطيء للسكريبتات غير الحرجة.

ملاحظة: يتم استبدال FID بـ Interaction to Next Paint (INP) في مارس 2024. استراتيجيات تحسين INP مشابهة—ركز على تقليل حجب الخيط الرئيسي.

تحسين Cumulative Layout Shift (CLS)

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

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

اختبر باستخدام Layout Instability API في Chrome DevTools لتحديد التحولات بدقة.

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

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

1. خط الأساس: قم بتشغيل Lighthouse على الصفحات الرئيسية وسجل الدرجات.
2. راقب بيانات الميدان: استخدم مكتبة web-vitals لإرسال المقاييس إلى منصة التحليلات الخاصة بك. قم بإعداد تنبيهات للتراجعات.
3. دمج في CI: استخدم Lighthouse CI لفشل عمليات البناء إذا تم تجاوز ميزانيات الأداء.
4. عمليات تدقيق منتظمة: جدولة مراجعات شهرية لمؤشرات الويب الأساسية في Search Console.

تذكر أن التحسينات يجب أن تكون متمحورة حول المستخدم، وليس فقط مدفوعة بالمقاييس. الموقع السريع يسعد المستخدمين ويعزز SEO.

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

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

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

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

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

هل تحسين مؤشرات الويب الأساسية يؤثر حقًا على SEO؟

نعم، تستخدم Google تجربة الصفحة كإشارة ترتيب. في حين يظل المحتوى أساسيًا، فإن مؤشرات الويب الأساسية الجيدة يمكن أن تمنحك ميزة، خاصة في المجالات التنافسية.

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