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

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

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

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

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

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

تستند هذه الحدود إلى بيانات المستخدمين الحقيقيين من تقرير تجربة مستخدم Chrome (CrUX). تحقيقها يحسن رضا المستخدم ويمكن أن يعزز ترتيب البحث.

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

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

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

• Lighthouse (في Chrome DevTools أو CI) يعطي لمحة مع التشخيصات.
• PageSpeed Insights يجمع بيانات المختبر والميدان لعنوان URL.
• Web Vitals Extension يسجل CWV في وحدة تحكم Chrome أثناء التصفح.

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

• Chrome UX Report (CrUX) يعرض بيانات مجمعة للمستخدمين الحقيقيين لملايين المواقع.
• مكتبة web-vitals JavaScript تتيح لك جمع CWV من مستخدميك وإرسالها إلى التحليلات.
• Search Console يقدم تقارير حالة CWV لموقعك بناءً على CrUX.

ابدأ ببيانات الميدان لتحديد الصفحات المشكلة، ثم استخدم أدوات المختبر لتصحيح الأخطاء.

تحسين LCP

غالباً ما يكون LCP الأسهل في التحسين مع بعض الإصلاحات المستهدفة.

1. حسّن الصور. استخدم التنسيقات الحديثة (WebP، AVIF)، واضغط دون فقدان جودة مرئي، وحدد العرض/الارتفاع بشكل صريح. أدوات مثل Image Compressor يمكن أن تساعد في تقليل حجم الملف.
2. حمّل صورة LCP مسبقاً. أضف <link rel="preload" as="image" href="#"> في الرأس.
3. أزل الموارد المانعة للعرض. ضمّن CSS الحرج، وأجّل CSS/JS غير الحرج، وتجنب السكريبتات المتزامنة في الرأس.
4. استخدم CDN. قدم الأصول من موقع قريب من المستخدم لتقليل زمن الوصول.
5. فعّل ضغط النص. Brotli أو gzip لـ HTML وCSS وJS.

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

<link rel="preload" as="image" href="/images/hero.avif" type="image/avif">

تحسين INP

يقيس INP مدى سرعة استجابة صفحتك لإدخال المستخدم. المهام الطويلة تحجب الخيط الرئيسي وتؤخر التفاعلات.

1. قسّم المهام الطويلة. استخدم setTimeout أو requestIdleCallback للتنازل عن الخيط الرئيسي.
2. حسّن معالجات الأحداث. استخدم debounce أو throttle للأحداث عالية التكرار مثل التمرير وتغيير الحجم.
3. قلل JavaScript. قسّم الكود، واستخدم tree-shake، والتحميل الكسول للسكريبتات غير الحرجة.
4. استخدم web workers للحسابات الثقيلة.
5. تجنب أحجام DOM الكبيرة. حافظ على DOM تحت 1500 عقدة إن أمكن.

مثال على التنازل عن الخيط الرئيسي:

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

تحسين CLS

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

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

المراقبة والتحسين المستمر

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

• استخدم مكتبة web-vitals لإرسال CWV إلى تحليلاتك:

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 في CI لكل طلب سحب.
• راجع بيانات CrUX شهرياً لتتبع الاتجاهات.

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

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

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

LCP: جيد ≤ 2.5 ثانية، يحتاج تحسين ≤ 4.0 ثانية، ضعيف > 4.0 ثانية. INP: جيد ≤ 200 مللي ثانية، يحتاج تحسين ≤ 500 مللي ثانية، ضعيف > 500 مللي ثانية. CLS: جيد ≤ 0.1، يحتاج تحسين ≤ 0.25، ضعيف > 0.25.

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

راقب بيانات الميدان باستمرار عبر التحليلات. راجع CrUX وSearch Console شهرياً. شغّل اختبارات المختبر (Lighthouse) عند كل تغيير كبير في الكود.

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

بعض الإصلاحات مثل ضغط الصور أو تفعيل التخزين المؤقت يمكن القيام بها عبر الإضافات أو إعدادات الاستضافة. لكن التحسينات الأعمق (تقسيم الكود، تقليل JS) تتطلب عادةً مشاركة مطور.

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