Core Web Vitals: قياس وتحسين أداء الويب

موقعك يُحمّل، لكن المستخدمين ما زالوا يغادرون. التفاعلات البطيئة تُحبِط الزوار، ومحركات البحث تلاحظ ذلك. Core Web Vitals هي مقاييس جوجل لتجربة المستخدم في العالم الحقيقي: Largest Contentful Paint (LCP)، Interaction to Next Paint (INP)، و Cumulative Layout Shift (CLS). في هذا الدليل، سنوضح لك كيفية قياسها بدقة وتحسينها باستخدام تقنيات عملية على مستوى الكود.

ما هي Core Web Vitals؟

Core Web Vitals هي مجموعة من المقاييس التي تُحدد جوانب رئيسية من تجربة المستخدم:

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

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

كيفية قياس Core Web Vitals

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

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

• Lighthouse (في Chrome DevTools أو CI) يوفر لقطة مع فرص للتحسين.
• PageSpeed Insights يجمع بيانات المختبر والبيانات الميدانية من Chrome User Experience Report (CrUX).
• WebPageTest يقدم برمجة متقدمة وعروض filmstrip.

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

• Chrome UX Report (CrUX) يعرض بيانات مجمعة من مستخدمين حقيقيين لنطاقك.
• مكتبة web-vitals تتيح لك جمع المقاييس من مستخدمين فعليين وإرسالها إلى التحليلات.
• Search Console يُبلّغ عن حالة Core Web Vitals لموقعك.

ابدأ بفحص PageSpeed Insights لصفحاتك الرئيسية. ثم قم بإعداد مراقبة المستخدم الحقيقي باستخدام مكتبة web-vitals لتتبع الأداء بمرور الوقت.

تحسين LCP

غالبًا ما يكون LCP المقياس الأكثر تأثيرًا للإصلاح. العنصر الأكبر عادةً يكون صورة hero أو كتلة نصية كبيرة.

1. حسّن المسار الحرج

• قلل زمن استجابة الخادم (TTFB) باستخدام التخزين المؤقت، CDNs، وكود خلفي فعّال.
• تخلص من الموارد المعيقة للعرض: ضمّن CSS الحرج، وأجّل CSS و JavaScript غير الحرجين.
• حمّل صورة LCP مسبقًا: <link rel="preload" as="image" href="#">.

2. حسّن الصور

• استخدم صيغًا حديثة مثل WebP أو AVIF.
• قدّم صورًا متجاوبة باستخدام srcset و sizes.
• اضغط الصور دون فقدان جودة ملحوظ. للضغط السريع، جرب ضاغط الصور.

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

• استخدم CDN لتخزين الأصول الثابتة عالميًا.
• فعّل ضغط Brotli أو gzip.
• حسّن استعلامات قاعدة البيانات واستخدم التخزين المؤقت من جانب الخادم.

مثال: preload و fetchpriority لصورة LCP:

<link rel="preload" as="image" href="#" fetchpriority="high">
<img src="#" alt="Hero" width="1200" height="600" fetchpriority="high">

تحسين INP

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

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

• استخدم setTimeout، requestIdleCallback، أو scheduler.yield للتنازل عن الخيط الرئيسي.
• تجنب دوال JavaScript طويلة التشغيل؛ قسّمها إلى أجزاء أصغر.

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

• استخدم debounce أو throttle للأحداث المتكررة (scroll، resize، input).
• استخدم مستمعي الأحداث السلبية لأحداث اللمس والعجلة.
• قلل تحديثات DOM داخل المعالجات.

3. قلل تنفيذ JavaScript

• قسّم الكود وحمّل JavaScript غير الحرج بشكل متأخر.
• أزل التبعيات و polyfills غير المستخدمة.
• استخدم web workers للحسابات الثقيلة.

مثال: التنازل عن الخيط الرئيسي في مهمة طويلة:

async function processLargeArray(items) {
  for (let i = 0; i < items.length; i++) {
    // Process item
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

تحسين CLS

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

1. حدد الأبعاد دائمًا

• ضمّن سمات width و height على الصور والفيديوهات.
• استخدم CSS aspect-ratio للحاويات المتجاوبة.

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

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

3. حسّن تحميل الخطوط

• استخدم font-display: swap لتجنب النص غير المرئي، لكن كن على علم بالتحولات المحتملة في التخطيط.
• حمّل الخطوط الرئيسية مسبقًا لتقليل تأخيرات التبديل.

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

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

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

دمج فحوصات الأداء في سير عمل التطوير:

• شغّل Lighthouse في CI (مثل GitHub Actions) لالتقاط الانحدارات.
• استخدم مكتبة web-vitals لإرسال البيانات الميدانية إلى التحليلات.
• راقب CrUX و Search Console لاتجاهات المستخدمين الحقيقيين.
• اختبر على أجهزة حقيقية، خاصة الهواتف المحمولة متوسطة المدى.

تذكر: الأداء ميزة. تعامل معه مثل أي مقياس جودة آخر.

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

ما هي العتبات الحالية لـ Core Web Vitals؟

LCP: جيد ≤ 2.5 ثانية، يحتاج تحسين ≤ 4.0 ثانية. INP: جيد ≤ 200 مللي ثانية، يحتاج تحسين ≤ 500 مللي ثانية. CLS: جيد ≤ 0.1، يحتاج تحسين ≤ 0.25. تعتمد هذه العتبات على بيانات المستخدمين الحقيقيين.

كم مرة يجب أن أقيس Core Web Vitals؟

راقب البيانات الميدانية باستمرار عبر أدوات مثل CrUX و RUM الخاص بك. شغّل اختبارات المختبر عند كل تغيير كبير في الكود وعلى الأقل شهريًا للصفحات الرئيسية.

هل يمكنني تحسين Core Web Vitals بدون مطور؟

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

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