Web Vitals

Philip Walton

تاريخ النشر: 4 مايو 2020

تحسين الأداء من أجل جودة تجربة المستخدم هو مفتاح نجاح أي موقع إلكتروني على المدى الطويل. وسواء كنت مالك مؤسسة أو جهة تسويق أو مطوّر برامج، يمكن أن تساعدك Web Vitals على قياس تجربة موقعك الإلكتروني وتحديد فرص التحسين.

نظرة عامة

Web Vitals هي مبادرة أطلقتها Google تهدف إلى توفير إرشادات موحّدة حول الإشارات عالية الجودة التي لا غنى عنها لتقديم تجربة مستخدم ممتازة على الويب.

قدّمت Google على مرّ السنين عددًا من الأدوات لقياس الأداء والإبلاغ عنه. ويُعدّ بعض المطوّرين خبراء في استخدام هذه الأدوات، بينما وجد آخرون أنّ كثرة الأدوات والمقاييس تجعل من الصعب مواكبتها.

لا يفترض أن يكون مالكو المواقع الإلكترونية خبراء في الأداء لفهم جودة التجربة التي يقدّمونها للمستخدمين. تهدف مبادرة Web Vitals إلى تبسيط المشهد ومساعدة المواقع الإلكترونية على التركيز على المقاييس الأكثر أهمية، وهي Core Web Vitals.

Core Web Vitals

تُعدّ Core Web Vitals مجموعة فرعية من مؤشرات Web Vitals التي تنطبق على جميع صفحات الويب، ويجب أن يقيسها جميع مالكي المواقع، وسيتم عرضها على جميع أدوات Google. ويمثل كل مؤشر من Core Web Vitals جانبًا مميزًا من تجربة المستخدم، ويمكن قياسه ميدانيًا، ويعكس تجربة واقعية لنتائج جوهرية تتمحور حول المستخدم.

ستتطور المقاييس التي تشكل Core Web Vitals بمرور الوقت. وتركز المجموعة الحالية على ثلاثة جوانب من تجربة المستخدم: التحميل و التفاعل و الثبات البصري، وتتضمن المقاييس التالية (بحدودها الخاصة):

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

لضمان تحقيقكم القيم المقترحة لهذه المقاييس لدى معظم مستخدمي مواقعكم، فإنّ المعيار الجيد للقياس هو أن تتحقق هذه القيم في %75 على الأقل من عمليات تحميل الصفحات، موزعةً بين أجهزة الجوال وأجهزة الكمبيوتر المكتبية.

يجب أن تعتبر الأدوات التي تقيّم مدى التوافق مع Core Web Vitals أنّ الصفحة ناجحة إذا استوفت الأهداف المقترَحة في %75 من الحالات لجميع مقاييس Core Web Vitals الثلاثة.

ملاحظة: لمزيد من المعلومات حول البحث والمنهجية وراء هذه الاقتراحات، يُرجى الاطّلاع على مقالة تحديد حدود مقاييس Core Web Vitals.

مراحل النشاط

تخضع المقاييس في مسار Core Web Vitals لدورة حياة تتألف من ثلاث مراحل: تجريبية وفي انتظار المراجعة وثابتة.

مراحل دورة حياة Core Web Vitals

تم تصميم كل مرحلة لإعلام المطوّرين بكيفية التفكير في كل مقياس:

• المقاييس التجريبية هي مؤشرات Core Web Vitals المحتملة التي قد لا تزال تخضع لتغييرات كبيرة استنادًا إلى الاختبارات وملاحظات المنتدى.
• المقاييس في انتظار المراجعة هي مؤشرات Core Web Vitals المستقبلية التي اجتازت مرحلة الاختبار والملاحظات ولها جدول زمني محدّد جيدًا لتصبح ثابتة.
• المقاييس الثابتة هي المجموعة الحالية من مؤشرات Core Web Vitals التي يعتبرها Chrome ضرورية لتجارب المستخدم الممتازة.

تكون مؤشرات Core Web Vitals في مراحل دورة الحياة التالية:

• سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP): ثابت
• CLS: ثابت
• مدى استجابة الصفحة لتفاعلات المستخدم (INP): ثابت

تجريبي

عند تطوير مقياس لأول مرة وإدخاله إلى النظام، يُعتبر مقياسًا تجريبيًا.

الغرض من المرحلة التجريبية هو تقييم مدى ملاءمة المقياس، أولاً من خلال استكشاف المشكلة التي يجب حلّها، وربما تكرار ما قد تكون المقاييس السابقة قد فشلت في معالجته. على سبيل المثال، تم تطوير مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) في البداية كمقياس تجريبي لمعالجة مشاكل أداء وقت التشغيل على الويب بشكل أكثر شمولاً من مقياس مهلة الاستجابة لأوّل إدخال (FID).

تهدف المرحلة التجريبية من مراحل نشاط Core Web Vitals أيضًا إلى توفير المرونة في التطوير من خلال تحديد الأخطاء وحتى استكشاف التغييرات في تعريفه الأولي. وهي أيضًا المرحلة التي تكون فيها ملاحظات المنتدى في غاية الأهمية.

في انتظار المراجعة

عندما يحدّد فريق Chrome أنّ مقياسًا تجريبيًا قد تلقّى ملاحظات كافية وثبتت فعاليته، يصبح مقياسًا في انتظار المراجعة. على سبيل المثال، تمت ترقية مقياس INP في عام 2023 من حالة تجريبي إلى حالة في انتظار المراجعة بهدف إيقاف مقياس FID نهائيًا في نهاية المطاف.

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

ثابت

عند الانتهاء من مقياس مرشّح من Core Web Vitals، يصبح مقياسًا ثابتًا. وهذا هو الوقت الذي يمكن أن يصبح فيه المقياس أحد مؤشرات Core Web Vitals.

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

نقطة أساسية: ليست المقاييس الثابتة دائمة بالضرورة. يمكن إيقاف مقياس ثابت واستبداله بمقياس آخر يعالج مجال المشكلة بفعالية أكبر. وهذا ما حدث بالضبط لمقياس FID عندما أصبح مقياس INP أحد مؤشرات Core Web Vitals الثابتة في عام 2024.

أدوات قياس مؤشرات Core Web Vitals والإبلاغ عنها

تؤمن Google بأنّ مؤشرات Core Web Vitals ضرورية لجميع تجارب الويب. ونتيجةً لذلك، تلتزم بعرض هذه المقاييس في جميع أدواتها الشائعة. توضّح الأقسام التالية الأدوات التي تتوافق مع مؤشرات Core Web Vitals.

الأدوات الميدانية لقياس مؤشرات Core Web Vitals

يجمع تقرير تجربة المستخدم على Chrome بيانات قياس مجهولة المصدر للمستخدمين الفعليين لكل مؤشر من مؤشرات Core Web Vitals. تسمح هذه البيانات لمالكي المواقع الإلكترونية بتقييم أدائهم بسرعة بدون الحاجة إلى قياس الإحصاءات يدويًا على صفحاتهم، وتدعم أدوات مثل أدوات مطوّري البرامج في Chrome وإحصاءات PageSpeed وتقرير Core Web Vitals في Search Console.

	LCP	مدى استجابة الصفحة لتفاعلات المستخدم (INP)	CLS
تقرير تجربة المستخدم على Chrome
أدوات مطوّري البرامج في Chrome
إحصاءات PageSpeed
Search Console (تقرير "مؤشرات أداء الويب الأساسية")

ملاحظة: للحصول على إرشادات حول كيفية استخدام هذه الأدوات والأداة المناسبة لحالة الاستخدام، يُرجى الاطّلاع على مقالة البدء باستخدام Web Vitals.

توفّر البيانات التي يقدّمها تقرير تجربة المستخدم على Chrome طريقة سريعة لتقييم أداء المواقع الإلكترونية، ولكنّها لا توفّر بيانات القياس عن بُعد المفصّلة لكل مشاهدة صفحة على الويب والتي غالبًا ما تكون ضرورية لتشخيص حالات التراجع ورصدها والتفاعل معها بسرعة. ونتيجةً لذلك، ننصح بشدة المواقع الإلكترونية بإعداد نظامها الخاص لرصد المستخدمين الفعليين.

قياس مؤشرات Core Web Vitals في JavaScript

يمكن قياس كل مؤشر من مؤشرات Core Web Vitals في JavaScript باستخدام واجهات برمجة تطبيقات الويب العادية.

ملاحظة: يُرجى العِلم أنّ مؤشرات Core Web Vitals التي يتم قياسها في JavaScript باستخدام واجهات برمجة التطبيقات العامة قد تختلف عن مؤشرات Core Web Vitals التي يبلغ عنها CrUX. لمزيد من المعلومات، يُرجى الاطّلاع على الاختلافات بين مصادر البيانات هذه.

أسهل طريقة لقياس جميع مؤشرات Core Web Vitals هي استخدام مكتبة JavaScript web-vitals، وهي برنامج صغير جاهز للاستخدام في مرحلة الإنتاج يلتف حول واجهات برمجة تطبيقات الويب الأساسية التي تقيس كل مقياس بطريقة تتطابق بدقة مع كيفية الإبلاغ عنها من خلال جميع أدوات Google المدرَجة سابقًا.

باستخدام مكتبة web-vitals، يمكن قياس كل مقياس من خلال استدعاء دالة واحدة. يُرجى الاطّلاع على المستندات للحصول على تفاصيل كاملة حول الاستخدام وواجهة برمجة التطبيقات.

import {onCLS, onINP, onLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

بعد ضبط موقعك الإلكتروني لاستخدام مكتبة web-vitals لقياس بيانات Core Web Vitals وإرسالها إلى نقطة نهاية إحصائية، تتمثل الخطوة التالية في تجميع هذه البيانات والإبلاغ عنها لمعرفة ما إذا كانت صفحاتك تستوفي الحدود المقترَحة في% 75 على الأقل من زيارات الصفحات.

على الرغم من أنّ بعض مقدّمي الإحصاءات يوفّرون دعمًا مضمّنًا لمقاييس Core Web Vitals، يجب أن تتضمّن حتى تلك التي لا تفعل ذلك ميزات مقاييس مخصّصة أساسية تسمح لك بقياس مؤشرات Core Web Vitals في أداتهم.

يمكن للمطوّرين الذين يفضّلون قياس هذه المقاييس مباشرةً باستخدام واجهات برمجة تطبيقات الويب الأساسية بدلاً من ذلك استخدام أدلة المقاييس هذه للحصول على تفاصيل التنفيذ:

• قياس سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) في JavaScript
• قياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) في JavaScript
• قياس متغيّرات التصميم التراكمية (CLS) في JavaScript

للحصول على إرشادات إضافية حول قياس هذه المقاييس باستخدام خدمات الإحصاءات الشائعة أو أدوات الإحصاءات الداخلية، يُرجى الاطّلاع على أفضل الممارسات لقياس Web Vitals ميدانيًا.

أدوات الاختبار لقياس مؤشرات Core Web Vitals

على الرغم من أنّ جميع مؤشرات Core Web Vitals هي في المقام الأول مقاييس ميدانية، يمكن أيضًا قياس العديد منها في الاختبار.

يُعدّ القياس في الاختبار أفضل طريقة لاختبار أداء الميزات أثناء التطوير، أي قبل إصدارها للمستخدمين. وهو أيضًا أفضل طريقة لرصد حالات التراجع في الأداء قبل حدوثها.

يمكن استخدام الأدوات التالية لقياس مؤشرات Core Web Vitals في بيئة الاختبار:

	LCP	مدى استجابة الصفحة لتفاعلات المستخدم (INP)	CLS
أدوات مطوّري البرامج في Chrome
Lighthouse		(استخدِم TBT بدلاً منه)

ملاحظة: لا يمكن لأدوات مثل Lighthouse التي تحمّل الصفحات في بيئة محاكاة بدون مستخدم قياس مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP)، لأنّه لا يوجد بيانات أدخلها المستخدم. ومع ذلك، يمكن قياس مقياس إجمالي وقت الحظر (TBT) في الاختبار وهو مقياس بديل لمقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP). قد تؤدي تحسينات الأداء التي تحسّن مقياس TBT في الاختبار إلى تحسين مقياس INP ميدانيًا (يُرجى الاطّلاع على اقتراحات الأداء أدناه).

على الرغم من أنّ القياس في الاختبار جزء أساسي من تقديم تجارب رائعة، فإنّه لا يحلّ محلّ القياس الميداني.

يمكن أن يختلف أداء الموقع الإلكتروني بشكل كبير استنادًا إلى إمكانات جهاز المستخدم وظروف الشبكة والعمليات الأخرى التي قد يتم تشغيلها على الجهاز وكيفية تفاعله مع الصفحة. في الواقع، يمكن أن يتأثر كل مقياس من مؤشرات Core Web Vitals بتفاعل المستخدم. لا يمكن للقياس الميداني وحده أن يعرض الصورة الكاملة بدقة.

اقتراحات لتحسين نتائجك

تقدّم الأدلة التالية اقتراحات محدّدة حول كيفية تحسين صفحاتك لكل مؤشر من مؤشرات Core Web Vitals:

• تحسين سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP)
• تحسين مدى استجابة الصفحة لتفاعلات المستخدم (INP)
• تحسين متغيّرات التصميم التراكمية (CLS)

هناك طرق عديدة لتحسين مؤشرات Core Web Vitals، ويقدّم كل نهج مستويات مختلفة من التأثير والأهمية وسهولة الاستخدام في كل حالة. يُرجى الاطّلاع على مقالة الطُرق الأكثر فعالية لتحسين مؤشرات Core Web Vitals للحصول على قائمة مختصرة بأهم الاقتراحات التي يقدّمها فريق Chrome.

Web Vitals الأخرى

على الرغم من أنّ مؤشرات Core Web Vitals هي المقاييس الأساسية لفهم تجربة المستخدم الممتازة وتقديمها، هناك مقاييس داعمة أخرى.

يمكن أن تكون هذه المقاييس الأخرى بديلاً أو مقاييس تكميلية لمؤشرات Core Web Vitals الثلاثة للمساعدة في رصد جزء أكبر من التجربة أو للمساعدة في تشخيص مشكلة معيّنة.

على سبيل المثال، يُعدّ كل من مقياسَي مدة تحميل أول بايت (TTFB) وسرعة عرض أول محتوى مرئي (FCP) جانبَين أساسيَين من تجربة التحميل ، وكلاهما مفيد في تشخيص المشاكل في سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) (أوقات استجابة الخادم البطيئة أو الموارد التي تحظر العرض، على التوالي).

وبالمثل، فإنّ مقياسًا مثل إجمالي وقت الحظر (TBT) هو مقياس في الاختبار ضروري لرصد وتشخيص مشاكل التفاعل المحتملة التي يمكن أن تؤثر في مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP). ومع ذلك، فإنّه ليس جزءًا من مجموعة مؤشرات Core Web Vitals لأنّه لا يمكن قياسه ميدانيًا، ولا يعكس نتيجة تتمحور حول المستخدم.

التغييرات في Web Vitals

تمثّل مؤشرات أداء الويب ومؤشرات Core Web Vitals أفضل الإشارات المتاحة للمطوّرين اليوم لقياس جودة التجربة على الويب، ولكنّ هذه الإشارات ليست مثالية ويجب توقّع تحسينات أو إضافات مستقبلية.

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

غالبًا ما تكون مؤشرات أداء الويب الأخرى خاصة بالسياق أو الأداة، وقد تكون أكثر تجريبية من مؤشرات Core Web Vitals. ونتيجةً لذلك، قد تتغيّر تعريفاتها وحدودها بوتيرة أكبر.

بالنسبة إلى جميع مؤشرات أداء الويب، سيتم توثيق التغييرات بوضوح في سجلّ التغييرات العام هذا CHANGELOG.