First Input Delay (FID)

Philip Walton

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

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

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

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

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

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

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

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

ما هي درجة FID الجيدة؟

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

تفاصيل مقياس FID

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ماذا لو لم يتفاعل أحد المستخدِمين مع موقعك الإلكتروني مطلقًا؟

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

وهذا يعني أنّ بعض المستخدِمين لن يكون لديهم قيم FID، وسيحصل بعض المستخدِمين على قيم FID منخفضة، ومن المحتمل أن يحصل بعض المستخدِمين على قيم FID عالية.

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

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

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

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

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

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

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

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

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

قياس مقياس "وقت الاستجابة للتفاعل" في 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 عند استعادة الصفحة من ميزة "التخزين المؤقت للصفحات"، ولكن يجب قياس مقياس FID في هذه الحالات لأنّ المستخدمين يواجهونها كزيارات مختلفة للصفحة.
• لا تُبلِغ واجهة برمجة التطبيقات عن الإدخالات التي تحدث ضمن إطارات iframe، ولكن يتم عرض المقياس لأنّها جزء من تجربة المستخدم على الصفحة. ويمكن أن يظهر ذلك كفرق بين CrUX وRUM. ويجب أخذها في الاعتبار لقياس مقياس FID بشكل صحيح. يمكن للإطارات الفرعية استخدام واجهة برمجة التطبيقات لإبلاغ الإطار الرئيسي بتسجيلات first-input الخاصة بها من أجل التجميع.

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

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

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

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

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

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

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

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

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

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