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

شرح First Input Delay

أول تأخير للإدخال (FID) هو مقياس أداء مستخدم حقيقي على الويب يتتبع الوقت من وقت تفاعل المستخدم لأول مرة مع صفحة ويب بعد إدخالها إلى الوقت الذي يمكن فيه للمستعرض بدء معالجة هذا التفاعل – عندما يكون الموضوع الرئيسي للمتصفح خاملاً.

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

يتم قياس First Input Delay بالمللي ثانية (مللي ثانية).

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

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

يقيس FID فقط التفاعل الأول

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

علاوة على ذلك، يحدث معظم حظر الخيط الرئيسي للمتصفح في اللحظات الأولى من دورة حياة الصفحة – وذلك عندما يتم تحميل الموارد الهامة. First Input Delay هو مقياس يساعدك على معالجة ذلك والتأكد من أن تحميل هذه الموارد الهامة لا يجعل موقع الويب الخاص بك يشعر بالثقل وعدم الاستجابة.

يقيس FID تأخير الإدخال، وليس المعالجة

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

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

يقيس وقت التفاعل (TTI) الوقت الذي تستغرقه الصفحة لتكون تفاعلية بالكامل عندما يتتبع First Input Delay إدخال المستخدم قبل اكتمال الصفحة تفاعلي.

يتم تسجيل وقت التفاعل عندما يكون هناك محتوى قيم تم عرضه بالفعل على الصفحة (يتم قياسه بواسطة First Contentful Paint)، ويتم تسجيل معالجات الأحداث لمعظم عناصر الصفحة، وتتم معالجة تفاعل المستخدم في غضون 50 مللي ثانية.

يتم عرض Time to Interactive في Lighthouse.

Time to Interactive هو مقياس يتم تتبعه في Lighthouse

وفي الوقت نفسه، يمكن لـ First Input Delay تتبع، على سبيل المثال، عندما ينقر المستخدم على ارتباط يظهر قبل تسجيل معالجات الأحداث لمعظم عناصر الصفحة. يختلف First Input Delay من وقت إلى تفاعلي من حيث أنه يسمح لك بالتقاط تلك التفاعلات المبكرة والحاسمة.

لماذا يجب تحسين “First Input Delay”

يعتبر “First Input Delay” أحد أكثر مقاييس أداء الويب إثارة لأنه مجرد مقياس مستخدم حقيقي. لا يمكن محاكاته في اختبار معمل – يتطلب قياس تفاعل المستخدم. يتعلق FID بالتجربة الفعلية للمستخدم الذي يدخل صفحتك.

لهذا السبب وحده، من المقياس الرائع المراقبة والتحسين لأنه يحدد تجربة المستخدم لموقعك على الويب.

ما هو الدور الذي يلعبه FID في تحسين محركات البحث؟ أصبح “First Input Delay” الآن عامل ترتيب رسميًا لـ Google.

First Input Delay هو أحد مقاييس الأداء الثلاثة (جنبًا إلى جنب مع تغيير التخطيط التراكمي وأكبر رسم للمحتوى) التي تريد Google الترويج لها من خلال مبادرة “أساسيات الويب الحيوية”.

أول تأخير للإدخال هو المقياس الذي يتتبع استجابة موقع الويب، بينما يتتبع CLS الاستقرار البصري، ويتتبع LCP سرعة التحميل.

جعلت Google “العناصر الحيوية للويب الأساسية” جزءًا من خوارزمية الترتيب الخاصة بها عندما تم نشر تحديث تجربة الصفحة في يونيو 2021.

بعبارة أخرى، هناك الكثير من الأسباب للتركيز على الإدخال الأول تأخير التحسين على موقع الويب الخاص بك.

هل تريد فهمًا أعمق لـ FID و CLS و LCP؟ اكتشف المزيد عنها في دليلنا النهائي لأساسيات الويب الأساسية.

كيفية تحسين First Input Delay

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

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

إليك كيفية تحسين “First Input Delay” باستخدام 7 استراتيجيات:

إنشاء مهام صغيرة غير متزامنة

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

إنشاء محتوى من جانب الخادم

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

استكشاف التحميل عند الطلب لرمز الجهة الخارجية

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

استخدام عمال الويب

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

تأجيل JavaScript

استخدم async أو defer بحيث يتم تنفيذ JavaScript فقط عند الحاجة. إذا كنت تستخدم JS الحديثة، فقم بتكوين وحدات ES6 للتحميل عند الطلب.

تصغير polyfills غير المستخدمة

Polyfills مطلوبة عندما يستخدم المستخدم متصفحًا أقدم. يستخدمها المطورون لإنشاء مواقع ويب باستخدام JavaScript حديث ولا يزالون يقدمون جميع الوظائف للمتصفحات التي لا تدعم بعض الميزات الحديثة.

تأكد من عدم تشغيل polyfill إذا لم تكن هناك حاجة إليها. تسليم باقات منفصلة باستخدام وحدة / مجموعة.

هل تريد معرفة المزيد حول تحسين كود JavaScript الخاص بك؟ ابدأ بالقراءة عن أسس تحسين محركات البحث في JavaScript SEO بنجاح.

خذ الخمول حتى النهج العاجل

الخمول حتى العاجل هي استراتيجية تقييم الكود التي صممها فيليب والتون من Google.

تأخذ هذه الإستراتيجية عناصر من النهجين الأكثر شيوعًا لتقييم الكود – التقييم الحثيث و التقييم البطيء.

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

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

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

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

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

يعتبر وضع علامة في وضع الخمول حتى النهج العاجل أحد أفضل الطرق لتحسين First Input Delay. نظرًا لأن تنفيذ الكود يحدث أثناء فترات الخمول فقط، فإنك تقلل وقت حظر مؤشر الترابط الرئيسي.

كيفية قياس FID على صفحتك

الأدوات

يمكن للأدوات التالية أن تظهر لك معرف FID الذي تم جمعه في الحقل:

استخدام JavaScript لقياس FID

يمكنك أيضًا قياس FID عن طريق إضافة JavaScript إلى صفحتك.

هناك طريقتان للقيام بذلك:

أضف الكود التالي إلى صفحتك لطباعة FID في وحدة التحكم:

import {getFID} from 'web-vitals'; getFID(console.log); 

إذا كنت لا ترغب في استيراد مكتبة “حيوية الويب”، يمكنك أيضًا استخدام Event Timing API لتتبع FID يدويًا.

تم توفير هذا الرمز بواسطة Philip Walton في مقالته على FID المنشورة على web.dev.

 let firstHiddenTime = document.visibilityState === 'hidden'? 0 : Infinity; document.addEventListener('visibilitychange', (event) => { firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp); }, {once: true}); function sendToAnalytics(data) { const body = JSON.stringify(data); (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) || fetch('/analytics', {body, method: 'POST', keepalive: true}); } try { function onFirstInputEntry(entry, po) { if (entry.startTime < firstHiddenTime) { const fid = entry.processingStart - entry.startTime; po.disconnect(); sendToAnalytics({fid}); } } const po = new PerformanceObserver((entryList, po) => { entryList.getEntries().forEach((entry) => onFirstInputEntry(entry, po)); }); po.observe({ type: 'first-input', buffered: true, }); } catch (e) { }

إنه أيضًا عندما ترغب في الاستفادة من خدمات JavaScript SEO.

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

تُظهر الدراسات أن التأخير البالغ 100 مللي ثانية يُنظر إليه على أنه ناتج عن مصدر مرتبط. 0.1 ثانية تقترب من الحد لجعل المستخدم يشعر بأن النظام يتفاعل على الفور.

لهذه الأسباب، من الجيد المحاولة و الحفاظ على FID أقل من 100 مللي ثانية.

فيما يلي العتبات التي حددتها Google لـ FID في PageSpeed Insights:

  • FID الذي يبلغ 100 مللي ثانية أو أقل يعتبر جيدًا،
  • FID الذي يتراوح بين 100-300 مللي ثانية يحتاج إلى التحسين،
  • FID الذي يزيد عن 300 مللي ثانية يعتبر ضعيفًا.

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

الحد الأقصى المحتمل لFirst Input Delay – السيناريو الأسوأ

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

لهذا السبب، قد يكون من المفيد مراقبة الحد الأقصى المحتمل لFirst Input Delay لصفحتك (MPFID). إنها مدة أطول مهمة يتم تشغيلها على السلسلة الرئيسية بعد تسجيل First Contentful Paint.

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

يتضمن تحسين MPFID استراتيجيات مختلفة تقلل من وقت تشغيل أطول مهمة لديك أو تقسمها إلى أجزاء أصغر.

MPFID هو مقياس معمل متضمن في Lighthouse. لرؤيتها، قم بتصدير تقرير Lighthouse لصفحتك إلى ملف JSON.

هل يمكنك قياس FID في Lighthouse؟

لا، لا يمكنك قياس First Input Delay باستخدام أدوات معملية مثل Lighthouse. يتطلب تفاعل المستخدم الحقيقي الحصول على حدث إدخال للتسجيل. ومع ذلك، يمكنك استخدام مقياس مختلف يرتبط بشدة بـ FID.

إجمالي وقت الحظر (TBT) هو مثال على مقياس يمكنك قياسه في المعمل. إذا قمت بتحسين TBT الخاص بك، فمن المرجح أن تقوم بتحسين First Input Delay أيضًا.

يقيس TBT إجمالي الوقت بين First Contentful Paint و Time To Interactive عندما تم حظر مؤشر الترابط الرئيسي من الاستجابة لإدخال المستخدم.

إجمالي وقت الحظر هو مقياس يتم تتبعه في Lighthouse

يمكنك أيضًا استخدام Time To Interactive كنقطة مرجعية مماثلة.

كيف استخدم MercadoLibre إجمالي وقت الحظر لتحسين First Input Delay

MercadoLibre هي منصة تجارة الكترونية رائدة في أمريكا اللاتينية. باستخدام إجمالي وقت الحظر كمقياس وكيل، تمكن الفريق في MercadoLibre من تحسين First Input Delay لموقع الويب والتفاعل العام.

نظرًا لأنه لا يمكن محاكاة First Input Delay من خلال اختبار معمل، استخدموا TBT للعثور على مهام طويلة تحجب السلسلة الرئيسية.

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

كانت النتيجة انخفاضًا بنسبة 90% في Max Potential FID في Lighthouse وتحسن بنسبة 9% في FID في تقرير تجربة مستخدم Chrome.