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

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

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

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

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

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

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

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

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

• تقرير تجربة مستخدم Chrome (CrUX): مجموعة بيانات عامة لمقاييس المستخدمين الحقيقيين. يمكن الوصول إليها عبر PageSpeed Insights أو Search Console أو BigQuery.
• PageSpeed Insights: يعرض البيانات الميدانية (إن وجدت) والبيانات المخبرية لعنوان URL.
• تقرير مؤشرات الويب الأساسية في Search Console: يصنف عناوين URL حسب الحالة (ضعيف، يحتاج تحسين، جيد).
• مكتبة web-vitals JavaScript: اجمع بياناتك الميدانية الخاصة باستخدام import {onLCP, onFID, onCLS} from 'web-vitals'; وأرسلها إلى نقطة نهاية التحليلات الخاصة بك.

أدوات البيانات المخبرية

• Lighthouse: مدمج في Chrome DevTools. قم بإجراء تدقيقات للأداء وإمكانية الوصول وتحسين محركات البحث. يوفر مقاييس مخبرية وفرصًا للتحسين.
• WebPageTest: اختبار متقدم مع ظروف شبكة مخصصة ومخططات تدفق.
• لوحة الأداء في Chrome DevTools: سجل أداء وقت التشغيل لتحديد المهام الطويلة ومشكلات العرض.

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

غالبًا ما يكون LCP هو المقياس الأكثر تأثيرًا. حسّن مسار العرض الحرج وأكبر عنصر.

1. حسّن أكبر عنصر

• إذا كان LCP صورة: اضغطها، استخدم تنسيقات حديثة (WebP، AVIF)، وحدد سمات width و height لتجنب تحولات التخطيط.
• قم بتحميل صورة LCP مسبقًا: <link rel="preload" as="image" href="#">.
• استخدم صورًا متجاوبة مع srcset و sizes.
• إذا كان LCP نصًا: تأكد من تحميل الخطوط بسرعة. استخدم font-display: swap وقم بتحميل الخطوط الرئيسية مسبقًا.

2. أزل الموارد التي تعيق العرض

• قم بتضمين CSS الحرج وتأجيل CSS غير الحرج.
• أجّل أو استخدم async لجافاسكريبت: <script src="#" defer></script>.
• قم بتصغير CSS وجافاسكريبت.

3. حسّن وقت استجابة الخادم

• استخدم CDN لتقديم الأصول من مواقع أقرب للمستخدمين.
• مكّن التخزين المؤقت (رؤوس التخزين المؤقت HTTP، عمال الخدمة).
• حسّن أداء الواجهة الخلفية (استعلامات قاعدة البيانات، التخزين المؤقت من جانب الخادم).

4. قلل حجم الحمولة

• اضغط الصور واستخدم التحميل المتأخر للصور أسفل الصفحة.
• أزل جافاسكريبت و CSS غير المستخدمة.
• استخدم تقسيم الكود لتحميل الكود الضروري فقط.

تحسين تأخير الإدخال الأول (FID)

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

1. قسّم المهام الطويلة

استخدم setTimeout أو requestIdleCallback للتنازل عن الخيط الرئيسي. أو استخدم scheduler.yield() حيثما كان مدعومًا.

// مثال: التنازل عن الخيط الرئيسي بعد جزء من العمل
async function processInChunks(items) {
  for (let i = 0; i < items.length; i++) {
    // معالجة العنصر
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

2. حسّن معالجات الأحداث

• استخدم debounce أو throttle للأحداث عالية التكرار (التمرير، تغيير الحجم، الإدخال).
• استخدم مستمعي الأحداث السلبية لأحداث اللمس والعجلة: element.addEventListener('touchstart', handler, {passive: true});.
• تجنب العمل الثقيل في معالجات الأحداث؛ انقله إلى Web Workers.

3. قلل وقت تنفيذ جافاسكريبت

• قسّم الكود وقم بتحميل جافاسكريبت غير الحرجة بشكل متأخر.
• أزل التبعيات غير المستخدمة.
• استخدم tree-shaking والتصغير.

تحسين التحول التراكمي في التخطيط (CLS)

يقيس CLS الاستقرار البصري. التحولات غير المتوقعة تزعج المستخدمين وتسبب نقرات خاطئة.

1. قم دائمًا بتضمين سمات الحجم

للصور ومقاطع الفيديو، حدد width و height (أو استخدم aspect-ratio CSS) حتى يحجز المتصفح المساحة.

2. احجز مساحة للمحتوى الديناميكي

• للإعلانات أو التضمينات أو المحتوى الديناميكي، استخدم عنصرًا نائبًا بأبعاد ثابتة.
• تجنب إدراج محتوى فوق المحتوى الحالي إلا استجابةً لتفاعل المستخدم.

3. استخدم تحويلات الحركة

فضل استخدام transform و opacity في CSS للحركات؛ فهي لا تسبب تحولات في التخطيط.

4. قم بتحميل الخطوط بعناية

استخدم font-display: optional أو swap لتجنب النص غير المرئي وتحولات التخطيط. قم بتحميل الخطوط الرئيسية مسبقًا.

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

الأداء عملية مستمرة. ادمج القياس في عملية التطوير الخاصة بك.

• استخدم Lighthouse CI في خط أنابيبك لاكتشاف الانحدارات.
• راقب البيانات الميدانية عبر web-vitals والتحليلات الخاصة بك.
• ضع ميزانيات الأداء ونبه عند الانتهاكات.

لإجراء فحوصات سريعة، استخدم محلل سجلات Nginx من TryQuickToolBox لتحديد استجابات الخادم البطيئة التي قد تؤثر على LCP.

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

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

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

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

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

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

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

مستعد للتحسين؟ ابدأ بقياس درجاتك الحالية باستخدام PageSpeed Insights، ثم عالج أكبر الفرص. لإجراء فحص سريع من جانب الخادم، جرب محلل سجلات Nginx لدينا لتحديد استجابات الخادم البطيئة التي قد تضر بـ LCP الخاص بك.