First Input Delay (FID)

Philip Walton

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

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

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

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

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

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

ما هو مقياس FID؟

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

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

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

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

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

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

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

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

وينتج عن ذلك فترات تكون فيها سلسلة التعليمات الرئيسية مشغولة بشكل لحظي، وهي التي يشار إليها باللون البيج المهمة مربّعات.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قياس مقياس FID في 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 إلى الإطار الرئيسي للتجميع.

وبدلاً من تذكر كل هذه الاختلافات الطفيفة، يمكن للمطورين استخدام مكتبة JavaScript لـ web-vitals من أجل قياس FID الذي يعالج هذه الاختلافات نيابةً عنك (حيثما أمكن، مع العِلم بأنّه لا يتم تناول مشكلة iframe):

import {onFID} from 'web-vitals';

// Measure and log FID as soon as it's available.
onFID(console.log);

يمكنك الرجوع إلى شفرة المصدر onFID() للاطّلاع على مثال كامل حول كيفية قياس مقياس FID في JavaScript.

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

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

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

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

كيفية تحسين مقياس FID

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

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

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

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

إذا كانت لديك ملاحظات بشأن هذه المقاييس، يمكنك تقديمها في مجموعة Google الخاصة بملاحظات مؤشرات أداء الويب.