TryQuickToolBox

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

Web2026-11-08TryQuickToolBox

لقد قمت ببناء تطبيق ويب حديث، لكن المستخدمين يشتكون من بطئه. ترتيبك في محركات البحث يتراجع، ومعدلات الارتداد ترتفع. قد يكون السبب وراء ذلك هو ضعف مقاييس الويب الأساسية - وهي مقاييس جوجل لتجربة المستخدم في العالم الحقيقي. في هذا الدليل، ستتعرف على ماهيتها، وكيفية قياسها بدقة، وخطوات عملية لتحسين كل منها.

ما هي مقاييس الويب الأساسية؟

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

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

كيفية قياس مقاييس الويب الأساسية

تحتاج إلى بيانات المعمل والبيانات الميدانية. تساعد بيانات المعمل في تصحيح الأخطاء؛ بينما تعكس البيانات الميدانية المستخدمين الحقيقيين.

أدوات المعمل

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

مثال: استخدام مكتبة web-vitals لتسجيل المقاييس:

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);

تحسين LCP

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

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

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

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

تحسين INP

يقيس INP الاستجابة. المهام الطويلة تحجب الخيط الرئيسي وتؤخر التغذية المرئية الراجعة.

  1. تقسيم المهام الطويلة: استخدم setTimeout أو scheduler.yield للتنازل عن الخيط الرئيسي.
  2. تحسين معالجات الأحداث: استخدم debounce وthrottle حيثما كان مناسبًا؛ تجنب العمل المتزامن الثقيل.
  3. تقليل JavaScript: قم بتقسيم الكود، وهز الشجرة، وتأجيل البرامج النصية غير الحرجة.
  4. استخدم عمال الويب (web workers) للمهام كثيفة المعالجة.

مثال: التنازل باستخدام scheduler.yield (حيثما كان مدعومًا):

async function handleClick() {
  // Do some work
  await scheduler.yield();
  // Continue after yielding
}

تحسين CLS

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

  1. تعيين سمات الحجم على الصور ومقاطع الفيديو (العرض/الارتفاع).
  2. حجز مساحة للإعلانات والتضمينات: استخدم CSS aspect-ratio أو أبعاد ثابتة.
  3. تجنب إدراج محتوى فوق المحتوى الموجود إلا إذا كان مدفوعًا بتفاعل المستخدم.
  4. استخدم حركات التحويل (transform) بدلاً من الخصائص التي تؤدي إلى إعادة تخطيط.

مثال: حجز مساحة باستخدام aspect-ratio:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

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

المقياسما يقيسهالعتبة الجيدةالإصلاحات الشائعة
LCPأداء التحميل≤ 2.5 ثانيةتحسين الصور، التحميل المسبق، CDN
INPالاستجابة≤ 200 مللي ثانيةتقسيم المهام الطويلة، تقليل JS
CLSالاستقرار المرئي≤ 0.1تعيين الأبعاد، حجز المساحة

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

دمج مراقبة الأداء في خط أنابيب CI/CD الخاص بك. استخدم Lighthouse CI لاكتشاف الانحدارات. بالنسبة للبيانات الميدانية، قم بإعداد لوحة معلومات باستخدام web-vitals والتحليلات الخاصة بك.

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

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

ما هي مقاييس الويب الأساسية؟

مقاييس الويب الأساسية هي ثلاثة مقاييس - LCP وINP وCLS - تستخدمها جوجل لقياس تجربة المستخدم على صفحات الويب.

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

بشكل مستمر في الميدان عبر التحليلات، وفي كل عملية نشر في المعمل باستخدام Lighthouse CI لاكتشاف الانحدارات.

هل يمكنني تحسين مقاييس الويب الأساسية دون إعادة تصميم موقعي؟

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

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