Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

قياس "مؤشرات أداء الويب الأساسية" لصفحة الويب باستخدام مكتبة "مؤشرات أداء الويب"

1. قبل البدء

في هذا الدرس التطبيقي، ستتعرّف على كيفية قياس "مؤشرات أداء الويب الأساسية" لصفحة الويب باستخدام مكتبة JavaScript web-vitals.

تنصح Google بقياس "مؤشرات أداء الويب الأساسية" وبإدراجها في الشريحة المئوية الخامسة والسبعين من عمليات تحميل الصفحات المقسّمة على الأجهزة الجوّالة وأجهزة كمبيوتر سطح المكتب.

وتشمل "مؤشرات أداء الويب الأساسية" هذه المقاييس الثلاثة التي تنطبق على جميع صفحات الويب، كما تقدّم لك إحصاءات مهمّة حول تجربة المستخدم:

سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) يقيس أداء التحميل ويجب أن يحدث في غضون 2.5 ثانية من وقت بدء تحميل الصفحة.
مهلة الاستجابة لأوّل إدخال (FID). لقياس التفاعل ومن المفترض أن يحدث خلال 100 مللي ثانية.
متغيّرات التصميم التراكمية (CLS). يقيس الثبات البصري ويجب أن يكون ضمن 0.1.

المتطلّبات الأساسية

المهام التي ستنفِّذها

إضافة مكتبة web-vitals إلى صفحة ويب
يمكنك قياس "مؤشرات أداء الويب الأساسية" لصفحات الويب في أدوات مطوّري برامج Google Chrome.
اختياري: الإبلاغ عن "مؤشرات أداء الويب الأساسية" لصفحة "إحصاءات Google" إلى "إحصاءات Google".

الأشياء التي تحتاج إليها

محرِّر نصوص من اختيارك، مثل Sublime Text أو Visual Studio Code
متصفح ويب مستند إلى Chromium، مثل Google Chrome أو Microsoft Edge (لمزيد من المعلومات حول سبب احتياجك إلى متصفح ويب يستند إلى Chromium، يُرجى الاطّلاع على دعم المتصفّح).

2. إضافة مكتبة "مؤشرات أداء الويب" إلى صفحة ويب

في محرر النصوص، أنشِئ ملف web-vitals-test.html ثم أدخِل رمز HTML هذا في الملف:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

ينشئ هذا الرمز صفحة الويب التي تستخدمها في هذا الدرس التطبيقي حول الترميز.

في عنصر HTML رمز <body> بعد العنصر <p> الثاني، أدخِل النص البرمجي للوحدة هذه، ثم احفظ الملف:

web-vitals-test.html

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>

يحمّل هذا النص البرمجي للوحدة مكتبة web-vitals من شبكة إرسال المحتوى. يظهر الملف الآن وكأنه مقتطف الرمز التالي:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>
</body>
</html>

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

3- قياس مؤشرات أداء الويب الأساسية في أدوات المطوّرين في Google Chrome

في متصفح الويب، افتح الملف المحفوظ.
انقر بزر الماوس الأيمن على صفحة الويب، ثم انقر على فحص في مربع الحوار.
في لوحة أدوات المطوّرين في Google Chrome، انقر على علامة التبويب وحدة التحكم ثم اختَر إعدادات وحدة التحكُّم > الاحتفاظ بالسجل. ويضمن هذا الإعداد استمرار السجلّات عند إعادة تحميل صفحة الويب.

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

علامة التبويب "الشبكة" مع إعداد "شبكة الجيل الثالث" البطيئة المحددة في القائمة المنسدلة "تقييد".

انتقِل مرة أخرى إلى علامة التبويب وحدة التحكم، ثم انقر على أي مكان على صفحة الويب. وتتم طباعة مقاييس LCP وFID في علامة التبويب Console (وحدة التحكّم).

تظهر علامة التبويب "وحدة التحكّم" بعد طباعة مقياسَي LCP وFID.

إعادة تحميل صفحة الويب يطبع مقياس CLS في علامة التبويب وحدة التحكم.

تظهر علامة التبويب Console (وحدة التحكّم) بعد طباعة مقياس CLS.

انتقِل مجدّدًا إلى علامة التبويب الشبكة، ثم انقر على سهم الموسّع في القائمة المنسدلة لتقييد القائمة، واختَر شبكة الجيل الثالث السريع. يحاكي هذا الإعداد اتصالاً سريعًا بالشبكة.
انتقِل مرة أخرى إلى علامة التبويب وحدة التحكم، ثم انقر على أي مكان على صفحة الويب.وستتم طباعة مقياسي LCP وFID في علامة التبويب وحدة التحكم ولكنهما تحسّنتا من ذي قبل.

وتتم إعادة طباعة علامة التبويب "وحدة التحكّم" بعد مقياسي LCP وFID.

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

تظهر علامة التبويب Console (وحدة التحكّم) بعد مقياس CLS مرة أخرى.

4. اختياري: الإبلاغ عن "مؤشرات أداء الويب الأساسية" لصفحة "إحصاءات Google" إلى "إحصاءات Google"

في ملف web-vitals-test.html بعد عبارة استيراد النص البرمجي للوحدة، أدخل دالة sendToGoogleAnalytics() هذه ثم احفظ الملف:

web-vitals-test.html

function sendToGoogleAnalytics({name, delta, id}) {
  // Assumes the global `gtag()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/gtagjs
  gtag('event', name, {
    event_category: 'Web Vitals',
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
    // The `id` value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    event_label: id,
    // Use a non-interaction event to avoid affecting bounce rate.
    non_interaction: true,
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);

ويُرسل هذا الرمز "مؤشرات أداء الويب الأساسية" إلى "إحصاءات Google"، حيث يمكنك الاطّلاع عليها في تقرير "أهم الأحداث":

تقرير أهم الأحداث في "إحصاءات Google"

يظهر الملف الآن وكأنه مقتطف الرمز التالي:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  function sendToGoogleAnalytics({name, delta, id}) {
    // Assumes the global `gtag()` function exists, see:
    // https://developers.google.com/analytics/devguides/collection/gtagjs
    gtag('event', name, {
      event_category: 'Web Vitals',
      // Google Analytics metrics must be integers, so the value is rounded.
      // For CLS the value is first multiplied by 1000 for greater precision
      // (note: increase the multiplier for greater precision if needed).
      value: Math.round(name === 'CLS' ? delta * 1000 : delta),
      // The `id` value will be unique to the current page load. When sending
      // multiple values from the same page (e.g. for CLS), Google Analytics can
      // compute a total by grouping on this ID (note: requires `eventLabel` to
      // be a dimension in your report).
      event_label: id,
      // Use a non-interaction event to avoid affecting bounce rate.
      non_interaction: true,
    });
  }

  getCLS(sendToGoogleAnalytics);
  getFID(sendToGoogleAnalytics);
  getLCP(sendToGoogleAnalytics);
</script>
</body>
</html>

5. تهانينا

تهانينا. لقد تعلّمت طريقة قياس "مؤشرات أداء الويب الأساسية" لصفحة الويب والإبلاغ عنها باستخدام مكتبة web-vitals.

مزيد من المعلومات

مؤشرات أداء الويب