كيفية تحسين تأخير الإدخال الأول (FID) على موقع WordPress الخاص بك

لقد بدأنا مؤخرًا سلسلة جديدة حول مقاييس Core Web Vitals من Google مع مشاركة على Largest Contentful Paint. هنا ، نريد الاستمرار مع المرشح التالي في السطر: تأجيل الإدخال الأول أو FID للاختصار وكيفية تحسينه في WordPress.

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

لاحظ أن هذا المنشور يفترض أنك على دراية بـ Google Core Web Vitals وتأثيرها على تجربة المستخدم وتحسين محرك البحث. إذا لم تكن متأكدًا من أي من هذا ، فراجع المقالة الأولى في هذه السلسلة أو المنشور المستقل الخاص بنا على Core Web Vitals .

ما هو أول تأخير في الإدخال؟ تعريف

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

ومع ذلك ، ما هو بالضبط تأخير الإدخال الأول؟

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

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

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

كيف يتم حساب FID؟

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

في هذه المرحلة ، ربما يتعين عليك طرح الأسئلة: ما هو "الموضوع الرئيسي"؟ وما الذي يعتبر تفاعلًا؟

ها هي الإجابة.

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

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

ما الذي يسبب FID؟

غالبًا ما يكون تأخر الإدخال الأول هو الأعلى بين First Contentful Paint (عندما يظهر عنصر الصفحة الأول في نافذة المتصفح) و Time to Interactive (عندما تصبح الصفحة قابلة للاستخدام لأول مرة وتستجيب لإدخال المستخدم).

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

من الناحية الفنية ، المذنبون الشائعون لهذا هم:

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

آخر شيء مهم يجب ملاحظته حول تأخير الإدخال الأول هو أنه سيتم استبداله بمقياس آخر يسمى التفاعل مع الطلاء التالي (INP) في مارس 2024. ومع ذلك ، في الوقت الحالي ، FID هو ما نعمل معه ، لذلك لا يزال من المهم أن تتعرف عليه.

كيفية قياس تأخير الإدخال الأول

يمكنك اختبار FID لموقع الويب الخاص بك باستخدام نفس الأدوات إلى حد كبير مثل Core Web Vitals الأخرى:

• PageSpeed ​​Insights - ما عليك سوى إدخال عنوان URL لصفحتك واستلام تقرير يتضمن قيمة FID الخاصة بك.
• تقرير تجربة مستخدم Chrome - تقوم Google بجمع بيانات تجربة المستخدم الحقيقية من العديد من مواقع الويب وتجميعها من خلال متصفحها. يمكنك الوصول إلى هذه البيانات من خلال أدوات مختلفة ، بما في ذلك تلك المذكورة هنا.
• Search Console - يتيح لك تقرير Web Vitals في Google Search Console معرفة الصفحات التي تحتوي على قراءات FID سيئة.
• مكتبة JavaScript لمؤشرات الويب الحيوية - إذا كنت تميل أكثر من الناحية الفنية ، يمكنك إنشاء مكتبة JavaScript هذه في موقع الويب الخاص بك والحصول على معلومات حول Core Web Vitals من هناك.

تعرض معظم هذه الأدوات ببساطة قيمة FID في نتائجها حتى تعرف ما الذي تتعامل معه.

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

إذا كنت ترغب في اختبار موقعك في بيئة معملية مسبقًا ، فإن أفضل مقياس للوكيل هو إجمالي وقت الحظر. يمكنك أيضًا العثور على ذلك في PageSpeed ​​Insights ، على سبيل المثال.

بالإضافة إلى ذلك ، ركز على أسوأ حالات FID على موقعك ، وسوف يخبرك أكثر ما هو الخطأ.

ما هو جيد تأخير الإدخال الأول؟

هذا يترك فقط السؤال ، ما هو الرقم الذي يجب أن تطلقه؟ عادةً ما تكون درجة FID الجيدة أقل من 100 مللي ثانية. تعتبر الدرجات التي تتراوح بين 100 و 300 مللي ثانية بحاجة إلى التحسين. يشير كل شيء يزيد عن 300 مللي ثانية إلى تجربة مستخدم سيئة.

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

كيفية تحسين تأخير الإدخال الأول على موقع WordPress الخاص بك

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

مقاييس تحسين الأداء العامة

تنطبق أيضًا الكثير من التقنيات التي غطيناها بالفعل حول كيفية تحسين Largest Contentful Paint عندما تريد تحسين FID الخاص بك ، بما في ذلك:

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

لمزيد من النصائح ، راجع مقالتنا حول كيفية تسريع WordPress ، وكيفية تقليل طلبات الخادم ، وحول سرعة اختبار موقع الويب الخاص بك.

تقليل وتأجيل وعدم تزامن وتصغير JavaScript

كما ذكرنا سابقًا ، يعد JavaScript عادةً العامل الرئيسي لنتائج FID السيئة. إليك كيفية تحسين الترميز على موقعك حتى لا يصبح مشكلة.

تقليل التوسيم العام

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

تحقق مما إذا كان ذلك ضروريًا لموقعك ككل أو يمكنك إزالة JavaScript غير المستخدم تمامًا.

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

البرامج النصية غير المتزامنة والمؤجلة

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

ومع ذلك ، هناك طرق للتغلب عليها وتستند إلى كلمتين رئيسيتين:

• async - تسمح إضافة هذا إلى استدعاء البرنامج النصي للمتصفح بتنزيله في الخلفية دون إيقاف معالجة الصفحة مؤقتًا. سيتم تنفيذه بمجرد تنزيله ، بشكل مستقل عن باقي الصفحة.
• defer - يشبه إلى حد كبير async . يخبر المتصفح بعدم انتظار النص وبدلاً من ذلك يستمر في بناء الصفحة. ومع ذلك ، في هذه الحالة ، سيتم تحميل البرنامج النصي أخيرًا ، عندما يتم إنشاء باقي الصفحة بالكامل.

إليك ما يبدو عليه استخدام async defer في الممارسة:

 <script async src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script> <script defer src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script>

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

يمكنك استخدام كليهما لتحميل JavaScript غير المستخدمة وغير الهامة لاحقًا. يتضمن ذلك البرامج النصية الخاصة بطرف ثالث مثل التحليلات.

تصغير JavaScript لتنزيل أسرع

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

كما أنه يقلل من حجم الملف ويجعله أسرع لتنزيل المتصفح. هناك الكثير من الأدوات للقيام بذلك ، بما في ذلك توصيات البرنامج المساعد أدناه.

تفريق المهام الطويلة

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

ما هي المهام الطويلة ، تسأل؟

أي شيء يمنع الخيط الرئيسي لأكثر من 50 مللي ثانية. يمكنك أن ترى هذه في أدوات مطوري Chrome التي تم تمييزها بعلامات حمراء.

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

كيف تفعل ذلك؟

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

لمزيد من النصائح التقنية حول كيفية التعامل مع المهام الطويلة ، تحقق من هذا المورد.

إضافات WordPress مفيدة لتحسين FID

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

• Asset Cleanup - يسمح لك هذا البرنامج المساعد بتعطيل CSS و JavaScript غير مستخدمين ، وتحميل الخطوط مسبقًا ، وتصغير ملفاتك ، وتأجيل JavaScript ، والمزيد.
• Flying Scripts - يتيح لك تأخير تنفيذ JavaScript غير بالغ الأهمية حتى وقت عدم وجود نشاط للمستخدم.
• منظم المكون الإضافي - قم بتغيير الترتيب الذي يتم به تحميل المكونات الإضافية على موقعك وإيقاف تشغيلها بشكل انتقائي في الصفحات أو أنواع المحتوى المختارة.
• التحسين التلقائي - يمكن دمج ملفات CSS و JS وتصغيرها تلقائيًا بالإضافة إلى إضافة async defer إلى البرامج النصية. كما أنه سهل الاستخدام للغاية.
• WP Rocket - مكون إضافي مدفوع للتخزين المؤقت يمكنه فعل الكثير مما تحدثنا عنه أعلاه. بشكل عام ، تقدم معظم ملحقات التخزين المؤقت وظائف مماثلة.

الأفكار النهائية: أول تأخير في الإدخال في WordPress

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

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

هل لديك أي نصائح أخرى لتحسين تأجيل الإدخال الأول على مواقع WordPress؟ شارك بأفكارك وتوصياتك أدناه!