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

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

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

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

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

يتم تقييم هذه العتبات عند النسبة المئوية 75 من تحميلات الصفحة، مما يعني أن 75% من الزيارات يجب أن تلبي الهدف.

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

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

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

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

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

• Chrome UX Report (CrUX): مجموعة بيانات عامة لمقاييس المستخدمين الحقيقيين. يمكن الوصول إليها عبر PageSpeed Insights أو BigQuery.
• مكتبة web-vitals JavaScript: اجمع CWV من المستخدمين الفعليين وأرسلها إلى تحليلاتك.

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

تحسين Largest Contentful Paint (LCP)

غالبًا ما يكون LCP هو الصورة الرئيسية أو العنوان الرئيسي. حسّن هذه العناصر:

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

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

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

قم أيضًا بتعيين fetchpriority="high" على علامة <img> للإشارة إلى الأهمية.

تحسين Interaction to Next Paint (INP)

يقيس INP الاستجابة للنقرات واللمسات وإدخال لوحة المفاتيح. المهام الطويلة تحظر الخيط الرئيسي. لتحسين INP:

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

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

async function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleClick() {
  // Do some work
  await yieldToMain();
  // Continue
}

تحسين Cumulative Layout Shift (CLS)

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

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

مثال: احجز مساحة لإعلان:

.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

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

سير عمل عملي لتحسين CWV

1. قم بقياس البيانات الميدانية باستخدام PageSpeed Insights أو CrUX لتحديد الصفحات ذات الدرجات الضعيفة.
2. قم بتشغيل Lighthouse على تلك الصفحات للحصول على فرص محددة.
3. حدد أولويات الإصلاحات حسب التأثير: غالبًا ما يكون تحسين LCP و CLS الأسهل.
4. نفذ التغييرات واختبرها في المختبر.
5. انشر وراقب البيانات الميدانية لتأكيد التحسين.
6. كرر على المشكلات المتبقية.

تذكر أن CWV تركز على المستخدم؛ تحقق دائمًا من البيانات الحقيقية للمستخدمين.

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

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

مؤشرات الويب الأساسية هي ثلاثة مقاييس (LCP، INP، CLS) تقيس التحميل والتفاعلية والاستقرار البصري. وهي مهمة لأنها تعكس تجربة المستخدم الحقيقية وتستخدمها Google كإشارة ترتيب.

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

راقب البيانات الميدانية باستمرار وقم بإجراء اختبارات المختبر بعد التغييرات الرئيسية. يعد المراجعة الشهرية لبيانات CrUX ممارسة جيدة.

هل يمكنني تحسين مؤشرات الويب الأساسية دون إعادة بناء موقعي؟

نعم. يمكن تطبيق العديد من التحسينات مثل تحسين الصور والتحميل المسبق وإصلاحات التخطيط بشكل تدريجي دون إعادة بناء كاملة.

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