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

مستخدموك لا يتحلّون بالصبر. إذا استغرق موقعك أكثر من بضع ثوانٍ للتحميل، فسيغادرونه. محركات البحث تلاحظ ذلك أيضًا: Core Web Vitals هي إشارات ترتيب. لكن تحسينها يبدو كمتاهة من المقاييس والأدوات. هذا الدليل يقطع الضجيج. ستتعلم ما يعنيه كل مقياس، وكيفية قياسه بدقة، وخطوات ملموسة لتحسينه.

ما هي Core Web Vitals؟

Core Web Vitals هي ثلاثة مقاييس تُحدِّد تجربة المستخدم في العالم الحقيقي:

• Largest Contentful Paint (LCP): المدة حتى تحميل المحتوى الرئيسي. الهدف: أقل من 2.5 ثانية.
• Interaction to Next Paint (INP): مدى سرعة استجابة الصفحة لإدخال المستخدم. الهدف: أقل من 200 ميلي ثانية.
• Cumulative Layout Shift (CLS): مقدار تحرك التخطيط أثناء التحميل. الهدف: أقل من 0.1.

تُقاس هذه المقاييس من جلسات المستخدمين الحقيقيين (بيانات ميدانية) واختبارات اصطناعية (بيانات مخبرية). البيانات الميدانية هي ما يهم للترتيب.

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

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

أدوات مخبرية

• Lighthouse في Chrome DevTools: شغّل تدقيقًا للحصول على النتائج والفرص.
• PageSpeed Insights: يجمع بين البيانات المخبرية والميدانية لعنوان URL.
• WebPageTest: تحليل متقدم لشلال التحميل.

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

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

لجمع البيانات الميدانية، أضف مكتبة 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. حمّل مورد LCP مسبقًا: أضف <link rel="preload"> لصورة البطل أو الخط.
3. قلّل زمن استجابة الخادم: استخدم CDN، فعّل التخزين المؤقت، وحسّن استعلامات الواجهة الخلفية.
4. أزل الموارد المعيقة للعرض: ضمّن CSS الحرج، وأجّل JavaScript غير الحرج.
5. استخدم صورًا متجاوبة: قدّم صورًا بأحجام مناسبة عبر srcset.

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

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

تحسين INP

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

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

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

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

تحسين CLS

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

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

مثال على حجز مساحة لصورة:

<img src="#" width="800" height="600" alt="...">

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

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

• شغّل Lighthouse في CI لالتقاط التراجعات.
• استخدم web-vitals لمراقبة البيانات الميدانية وإعداد التنبيهات.
• حلّل سجلات الخادم لتحديد نقاط النهاية البطيئة. محلل سجلات Nginx يمكن أن يساعدك في اكتشاف الطلبات البطيئة والأخطاء.
• اختبر على أجهزة حقيقية وشبكات محدودة.

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

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

ما هي Core Web Vitals؟

Core Web Vitals هي ثلاثة مقاييس—LCP وINP وCLS—تقيس التحميل والتفاعل والاستقرار البصري. يستخدمها Google كإشارات ترتيب.

كيف أقيس Core Web Vitals؟

استخدم أدوات مخبرية مثل Lighthouse للتصحيح وأدوات ميدانية مثل مكتبة web-vitals أو CrUX لبيانات المستخدمين الحقيقيين. كلاهما مهم.

ما هي نتيجة LCP الجيدة؟

LCP الجيد أقل من 2.5 ثانية. أي شيء فوق 4 ثوانٍ يُعد ضعيفًا. حسّن الصور، حمّل الموارد الحرجة مسبقًا، وقلّل زمن استجابة الخادم.

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