First Input Delay (FID)

Philip Walton

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

على الويب، يمكن أن تُحدِث الانطباع الأول الجيد الفرق بين أن يصبح أحد الأشخاص مستخدمًا مخلصًا أو أن يغادر الموقع الإلكتروني ولا يعود إليه أبدًا. السؤال هو، ما الذي يترك انطباعًا جيدًا، وكيف يمكنك قياس نوع الانطباع الذي يُحتمل أن تتركه لدى المستخدمين؟

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

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

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

يساعد مقياس "مهلة الاستجابة لأوّل إدخال" في قياس انطباع المستخدِم الأول عن تفاعل موقعك الإلكتروني واستجابته.

ما هو مهلة الاستجابة لأوّل إدخال (FID)؟

يقيس مقياس FID الوقت المستغرَق بدءًا من تفاعل المستخدم مع الصفحة لأول مرة (أي عندما ينقر على رابط أو زر أو يستخدم عنصر تحكّم مخصّصًا أو يستند إلى JavaScript) حتى يتمكّن المتصفّح من بدء معالجة عناصر معالجة الأحداث استجابةً لذلك التفاعل.

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

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

مهلة الاستجابة لأوّل إدخال (FID) بالتفصيل

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

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

راجِع المخطط الزمني التالي لتحميل صفحة ويب نموذجية:

يعرض الرسم البياني أعلاه صفحة تقدّم طلبَين للشبكة للحصول على الموارد (على الأرجح ملفات CSS وJS)، وبعد انتهاء تنزيل هذه الموارد، تتم معالجتها في سلسلة المهام الرئيسية.

ويؤدي ذلك إلى حدوث فترات تكون فيها سلسلة التعليمات الرئيسية مشغولةً بشكل مؤقت، ما يُشار إليه بأحجار المهام باللون البيج.

تحدث عادةً فترات الاستجابة الطويلة لأوّل إدخال بين سرعة عرض المحتوى على الصفحة (FCP) ووقت التفاعل (TTI) لأنّ الصفحة عرضت بعض محتواها ولكنها لم تصبح تفاعلية بشكل موثوق بعد. لتوضيح كيفية حدوث ذلك، تمت إضافة FCP وTTI إلى المخطط الزمني:

ربما لاحظت أنّ هناك مقدارًا لا بأس به من الوقت (بما في ذلك ثلاث مهام طويلة) بين "سرعة عرض المحتوى على الصفحة" و"وقت التفاعل". إذا حاول أحد المستخدِمين التفاعل مع الصفحة خلال ذلك الوقت (على سبيل المثال، من خلال النقر على رابط)، سيكون هناك تأخّر بين وقت تلقّي النقرة ووقت تمكّن السلسلة الرئيسية من الاستجابة.

فكِّر في ما سيحدث إذا حاول أحد المستخدِمين التفاعل مع الصفحة بالقرب من بداية المهمة الأطول:

وبما أنّ الإدخال يحدث عندما يكون المتصفّح في منتصف تنفيذ مهمة، يجب الانتظار إلى أن تكتمل المهمة قبل أن يتمكّن من الاستجابة للإدخال. ويُعدّ الوقت الذي يجب الانتظاره هو قيمة FID لهذا المستخدِم على هذه الصفحة.

ماذا لو لم يكن للتفاعل مستمع أحداث؟

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

على سبيل المثال، يجب أن تنتظر جميع عناصر HTML التالية اكتمال المهام الجارية في سلسلة التعليمات الرئيسية قبل الردّ على تفاعلات المستخدِم:

• حقول النص ومربّعات الاختيار وأزرار الاختيار (<input> و<textarea>)
• اختيار القوائم المنسدلة (<select>)
• الروابط (<a>)

لماذا يتم أخذ الإدخال الأول فقط في الاعتبار؟

على الرغم من أنّ أي تأخير في الإدخال يمكن أن يؤدي إلى تجربة سيئة للمستخدم، ننصح في المقام الأول بقياس تأخُّر الإدخال الأول لعدة أسباب:

• سيكون "وقت استجابة الإدخال الأول" هو الانطباع الأول للمستخدم عن استجابة موقعك الإلكتروني، ويكون الانطباع الأول مهمًا في تشكيل انطباعنا العميق عن جودة الموقع الإلكتروني وموثوقيته.
• تحدث أكبر مشاكل التفاعل التي نلاحظها على الويب اليوم أثناء loading الصفحة. لذلك، نعتقد أنّ التركيز في البداية على تحسين تفاعل المستخدِم الأوّل مع الموقع الإلكتروني سيكون له التأثير الأكبر في تحسين التفاعل العام على الويب.
• إنّ الحلول المقترَحة لكيفية إصلاح المواقع الإلكترونية لمهلات الاستجابة العالية لأوّل إدخال (تقسيم الرموز البرمجية، وتحميل عدد أقل من JavaScript مُسبقًا، وما إلى ذلك) ليست بالضرورة هي الحلول نفسها لإصلاح بطء مهلات الاستجابة للإدخال بعد تحميل الصفحة. ومن خلال فصل هذه المقاييس، سنتمكن من تقديم إرشادات أدق بشأن الأداء لمطوّري الويب.

ما الذي يتم احتسابه كمدخل أوّل؟

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

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

بعبارة أخرى، يركز مقياس FID على R (الاستجابة) في نموذج RAIL أداء، في حين أنّ التمرير السريع والتكبير/التصغير مرتبطان أكثر بـ A (الصور المتحركة)، ويجب تقييم سمات أدائهما بشكل منفصل.

ومع ذلك، على الرغم من أنّ مقياس FID لا يقيس سوى جزء "التأخير" من وقت استجابة الحدث، يمكن للمطوّرين الذين يريدون تتبُّع المزيد من خطوات دورة حياة الحدث إجراء ذلك باستخدام Event Timing API. اطّلِع على دليل المقاييس المخصّصة للحصول على مزيد من التفاصيل.

كيفية قياس مقياس FID

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

أدوات الحقل

• تقرير تجربة المستخدم على Chrome
• PageSpeed Insights
• Search Console (تقرير "مؤشرات أداء الويب الأساسية")
• web-vitals مكتبة JavaScript

قياس مقياس "وقت الاستجابة للتفاعل" في JavaScript

لقياس مقياس FID في JavaScript، يمكنك استخدام Event Timing API. يوضّح المثال التالي كيفية إنشاء PerformanceObserver يستجيب لتسجيلات first-input ويسجّلها في وحدة التحكّم:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const delay = entry.processingStart - entry.startTime;
    console.log('FID candidate:', delay, entry);
  }
}).observe({type: 'first-input', buffered: true});

في المثال أعلاه، يتم قياس قيمة التأخير لوحدة السجلّ first-input من خلال احتساب الفارق بين الطابع الزمنيstartTime وprocessingStart للوحدة. في معظم الحالات، ستكون هذه هي قيمة FID، ولكن ليست كل إدخالات first-input صالحة لقياس FID.

يسرد القسم التالي الاختلافات بين ما تُبلغ عنه واجهة برمجة التطبيقات وكيفية حساب المقياس.

الاختلافات بين المقياس وواجهة برمجة التطبيقات

• ستُرسِل واجهة برمجة التطبيقات first-input إدخالًا للصفحات المحمَّلة في علامة تبويب في الخلفية، ولكن يجب تجاهل هذه الصفحات عند احتساب مقياس FID.
• ستُرسِل واجهة برمجة التطبيقات أيضًا first-input إدخالًا إذا تم عرض الصفحة في الخلفية قبل حدوث الإدخال الأول، ولكن يجب أيضًا تجاهل هذه الصفحات عند احتساب مقياس FID (لا يتمّ احتساب الإدخالات إلا إذا كانت الصفحة في المقدّمة طوال الوقت).
• لا تسجِّل واجهة برمجة التطبيقات إدخالات first-input عند استعادة الصفحة من ذاكرة التخزين المؤقت للرجوع/التقدم، ولكن يجب قياس مهلة الاستجابة لأوّل إدخال في هذه الحالات لأنّ المستخدمين يواجهونها كزيارات مختلفة للصفحة.
• لا تُبلغ واجهة برمجة التطبيقات عن الإدخالات التي تحدث داخل إطارات iframe، ولكن يتم تسجيلها في المقياس لأنّها جزء من تجربة المستخدم للصفحة. ويمكن أن يؤدي ذلك إلى اختلاف بين CrUX وRUM. ويجب أخذها في الاعتبار لقياس FID بشكل صحيح. يمكن للإطارات الفرعية استخدام واجهة برمجة التطبيقات لإبلاغ الإطار الرئيسي بتسجيلات first-input الخاصة بها من أجل التجميع.

تحليل بيانات FID وإعداد تقارير عنها

بسبب التباين المتوقّع في قيم FID، من المهمّ عند إعداد تقارير عن FID أن تطّلِع على توزيع القيم وأن تركّز على الشرائح المئوية الأعلى.

على الرغم من أنّ اختيار القيمة المئوية لجميع الحدود القصوى لـ "مؤشرات أداء الويب الأساسية" هي القيمة المئوية الخامسة والسبعين، إلا أنّنا ننصحك بشدة بالاطّلاع على القيم المئوية من 95 إلى 99 لـ FID على وجه الخصوص، لأنّها تتوافق مع التجارب الأولى السيئة بشكل خاص التي يحصل عليها المستخدمون على موقعك الإلكتروني. وسيُظهر لك المجالات التي تحتاج إلى تحسين أكثر من غيرها.

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

كيفية تحسين مقياس "وقت الاستجابة للتفاعل"

يتوفّر دليل كامل حول تحسين مقياس FID لإرشادك إلى أساليب تحسين هذا المقياس.

سجلّ التغييرات

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

لمساعدتك في إدارة ذلك، سيتم عرض جميع التغييرات التي تطرأ على تنفيذ هذه المقاييس أو تعريفها في سجلّ التغييرات هذا.

إذا كانت لديك ملاحظات حول هذه المقاييس، يمكنك تقديمها في مجموعة web-vitals-feedback على Google.