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

لماذا تهم مؤشرات الويب الأساسية موقعك

ربما سمعت عن مؤشرات الويب الأساسية (CWV) — مقاييس جوجل لتجربة المستخدم. ولكن إذا كان موقعك بطيئًا أو غير سلس، فأنت لست وحدك. يواجه العديد من المطورين صعوبة في ترجمة درجات CWV إلى إصلاحات ملموسة. يرشدك هذا الدليل خلال قياس وتحسين كل مؤشر بخطوات عملية ومقتطفات برمجية.

مؤشرات الويب الأساسية هي ثلاثة مقاييس محددة: أكبر رسم للمحتوى (LCP) لأداء التحميل، تأخير الإدخال الأول (FID) للتفاعلية، والتحول التراكمي للتخطيط (CLS) للاستقرار البصري. تستخدم جوجل هذه المؤشرات كإشارات ترتيب، لذا فإن تحسينها يفيد المستخدمين وتحسين محركات البحث (SEO) على حد سواء.

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

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

ملاحظة: يتم استبدال FID بمقياس التفاعل مع الرسم التالي (INP) في مارس 2024، لكن مبادئ التحسين متشابهة. سنركز هنا على FID لأنه لا يزال يشار إليه على نطاق واسع.

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

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

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

• Lighthouse في Chrome DevTools: قم بإجراء تدقيق في علامة تبويب Lighthouse.
• PageSpeed Insights: يوفر بيانات المختبر والبيانات الميدانية لعنوان URL.
• WebPageTest: اختبار متقدم مع ظروف شبكة مخصصة.

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

• تقرير تجربة مستخدم Chrome (CrUX): مجموعة بيانات عامة لمقاييس المستخدم الحقيقي.
• Google Search Console: يعرض تقرير مؤشرات الويب الأساسية أداء المجموعة.
• مكتبة web-vitals JavaScript: اجمع المقاييس من المستخدمين الحقيقيين في تحليلاتك.

لجمع البيانات الميدانية، قم بتضمين مكتبة web-vitals وأرسل المقاييس إلى نقطة نهاية التحليلات الخاصة بك:

<script type="module">
import {onLCP, onFID, onCLS} from 'https://unpkg.com/web-vitals@3?module';

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

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);
</script>

يمنحك هذا بيانات من العالم الحقيقي لتكملة اختبارات المختبر.

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

يقيس LCP متى يصبح أكبر عنصر محتوى (صورة أو كتلة نصية أو فيديو) مرئيًا. لتحسينه، ركز على وقت استجابة الخادم وتحميل الموارد والموارد التي تحجب العرض.

1. تحسين وقت استجابة الخادم

• استخدم شبكة توصيل المحتوى (CDN) لتقديم المحتوى بالقرب من المستخدمين.
• مكّن التخزين المؤقت (رؤوس التخزين المؤقت HTTP، التخزين المؤقت من جانب الخادم).
• قم بترقية الاستضافة إذا كان TTFB (الوقت حتى البايت الأول) مرتفعًا باستمرار.

2. تحسين الصور

• اضغط الصور واستخدم تنسيقات حديثة مثل WebP أو AVIF.
• استخدم صورًا متجاوبة مع srcset وsizes.
• قم بتحميل الصور أسفل الشاشة بشكل متأخر (lazy-load)، لكن تجنب التحميل المتأخر لصورة LCP.

لضغط الصور بسرعة، جرب أداة ضغط الصور.

3. إزالة الموارد التي تحجب العرض

• قم بتضمين CSS الحرج وتأجيل CSS غير الحرج.
• استخدم async أو defer لجافا سكريبت.
• قم بتصغير CSS وجافا سكريبت.

4. التحميل المسبق للموارد المهمة

استخدم <link rel="preload"> للأصول الرئيسية مثل الخطوط أو صور البطل:

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

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

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

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

قسّم جافا سكريبت طويلة التشغيل إلى أجزاء أصغر باستخدام setTimeout أو requestIdleCallback. على سبيل المثال:

function processItems(items) {
  if (items.length === 0) return;
  const item = items.pop();
  // Process item
  setTimeout(() => processItems(items), 0);
}

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

• استخدم debounce أو throttle لمعالجات الإدخال.
• تجنب الحسابات المعقدة في مستمعي الأحداث؛ قم بنقلها إلى Web Workers.

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

• قم بتقسيم الكود باستخدام الاستيرادات الديناميكية.
• أزل جافا سكريبت غير المستخدمة (tree shaking).
• استخدم loading="lazy" للإطارات غير الحرجة.

4. استخدام Web Workers للمهام الثقيلة

انقل العمل المكثف للمعالج بعيدًا عن الخيط الرئيسي:

const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => { /* handle result */ };

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

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

1. قم دائمًا بتعيين العرض والارتفاع على الوسائط

قم بتضمين سمات width وheight على الصور ومقاطع الفيديو، أو استخدم CSS aspect-ratio:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

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

للإعلانات أو التضمينات، احجز مساحة بعنصر نائب أو قم بتعيين حجم ثابت.

3. تجنب إدراج محتوى فوق المحتوى الموجود

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

4. استخدم Font-Display: swap

امنع النص غير المرئي وتحولات التخطيط من خطوط الويب:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

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

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

• Google Search Console: تنبيهات لتراجعات CWV.
• Lighthouse CI: قم بإجراء عمليات تدقيق على كل طلب سحب.
• مراقبة المستخدم الحقيقي (RUM): أدوات مثل New Relic أو Datadog أو تحليلات مخصصة.

راجع البيانات الميدانية بانتظام وكرر الإصلاحات. أعط الأولوية للمؤشر ذي الأسوأ درجة أولاً.

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

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

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

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

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

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

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

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