إتقان INP: كيفية الاستفادة من رؤية المحتوى لتعزيز الاستجابة

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

إنه عمل تقديم فعال.

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

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

واصل القراءة.

قياس الاستجابة مع التفاعل مع الطلاء التالي (INP)

يتم قضاء 90% من وقت المستخدم على الصفحة بعد تحميلها.

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

هل هو خلل؟ هل يوفر التمرير السلس؟ هل هو مستجيب؟

جميع الإجابات مخفية خلف نتيجة INP الخاصة بك.

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

الكلمة الأساسية هنا هي "بصريا".

لا أحد يتوقع أن يتم تنفيذ جميع تفاعلاتك في غضون أجزاء من الثانية. هذا غير ممكن. كل ما عليك القيام به للحصول على درجة INP جيدة وCore Web Vitals هو تقديم تعليقات مرئية فورية حول إجراءات زوار موقعك على موقع الويب الخاص بك.

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

والعاملان الحاسمان اللذان يؤثران بشكل كبير على سرعة العرض لديك هما الخيط الرئيسي وحجم DOM الخاص بك.

دور الخيط الرئيسي وحجم DOM

دعونا نقوم ببعض أعمال التدبير المنزلي قبل الخوض في التفاصيل الفنية.

تعتمد نقاط INP الخاصة بك على مدى سرعة قيام المتصفح بإرجاع التعليقات المرئية إلى المستخدم بعد التفاعل مع موقع الويب الخاص بك.

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

تتضمن بعض الأسباب الكبرى موارد JavaScript الثقيلة، وأخيرًا وليس آخرًا – حجم DOM الكبير.

هذه هي العملية. الآن، دعونا نزيل الغموض عن كل جزء.

الموضوع الرئيسي

الخيط الرئيسي هو الخيط الأساسي للتنفيذ الذي يتعامل مع معظم المهام الحاسمة المرتبطة بعرض صفحة الويب، بما في ذلك:

• HTML، تحليل CSS
• تنفيذ جافا سكريبت
• بناء نموذج كائن المستند (DOM)
• إضافة الأنماط المحسوبة
• إنتاج شجرة التخطيط
• إنشاء سجلات الطلاء

عندما يستغرق تنفيذ المهمة أكثر من 50 مللي ثانية ، فإنها تعتبر مهمة طويلة . يحدث هذا بشكل أساسي بسبب كثرة تشغيل ملفات JavaScript أو حجم DOM الكبير.

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

لماذا؟

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

يفرض هذا تلقائيًا العديد من التحديات على أداء موقعك واستجابته:

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

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

DOM (نموذج كائن المستند)

إحدى المهام الرئيسية للسلسلة هي تحليل HTML.

وهذا يعني أن المتصفح يحول البيانات (ترميز HTML) إلى DOM.

يمثل DOM بنية الصفحة كشجرة من الكائنات التي يستخدمها المتصفح لعرض المحتوى على الشاشة.

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

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

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

لذا، فإن القاعدة الأساسية الجيدة هي أن تحتوي الصفحة علىحجم DOM يصل إلى 1400 عقدة.

تتمثل إحدى طرق تحسين كفاءة مؤشر الترابط الرئيسي والتخفيف من تأثير DOM الكبير في التحكم في عرض المحتوى خارج الشاشة.

ويمكن لخاصية CSS هذه مساعدتك في القيام بذلك…

الاستفادة منرؤية المحتوىلتحسين العرض

تعد خاصية CSS الخاصة برؤية المحتوى إضافة رائدة إلى مجموعة أدوات تحسين أداء الويب.

تلعب هذه الخاصية، وتحديدًا في إعدادها التلقائي، دورًا محوريًا في تعزيز كفاءة عرض صفحات الويب. تُعلم السمة content-visibility: auto المتصفح بأنه يمكنه تخطي حسابات العرض والتخطيط لعنصر ما حتى تكون هناك حاجة إليه، وهو ما يحدث عادةً عندما يدخل العنصر إلى إطار العرض.

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

من الأمثلة العملية على رؤية المحتوى: التألق التلقائي هو تحسين التفاعل مع Next Paint.

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

وإليك طريقة بسيطة لتنفيذه:

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

رؤية المحتوى أثناء العمل

خلال ندوتنا عبر الويب مع Google حول "تحسين INP"، أتيحت لنا الفرصة لتوضيح تأثير رؤية المحتوى وكيفية تطبيق NitroPack عليه.

لقد حددنا السبب الجذري لضعف INP باستخدام العديد من الأدوات - ملحق Web Vitals، وChrome DevTools، وملف تعريف الأداء.

في هذه العملية، اكتشفنا أن السببين الرئيسيين اللذين تسببا في نتيجة INP تبلغ 272 مللي ثانية هما حدثان من نوع "إعادة حساب النمط" استغرقا 69.87 مللي ثانية للمعالجة وأثرا على 1139 عنصرًا.

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

كما تحسنت درجة INP من "يحتاج إلى تحسين" إلى "جيد".

قم بتأمين موقع الويب الخاص بك في المستقبل وتمرير INP على الطيار الآلي. احصل على NitroPack الآن →

نصائح إضافية لتحسين INP

مما لا شك فيه أن رؤية المحتوى توفر مكاسب كبيرة في الأداء بأقل جهد.

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

1. استسلم للخيط الرئيسي

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

يمكن تحقيق ذلك باستخدام وظائف الإنتاجية مثل:

• جدولة العائد ()
• setTimeout
• requestAnimationFrame
• requestIdleCallback

2. قم بتقليل حجم DOM الخاص بك

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

ويمكن تحقيق هذا الهدف من خلال استراتيجيات مختلفة:

• ابتعد عن المكونات الإضافية والموضوعات ذات الترميز السيئ.
• الحد من استخدام JavaScript لإنشاء عقد DOM.
• اختر بدائل لمنشئي الصفحات المعروفين بإنتاج كميات كبيرة من HTML.
• فكر في تقسيم موقع الويب المكون من صفحة واحدة إلى عدة صفحات.
• تجنب إخفاء العناصر غير الضرورية مع الشاشة: لا يوجد خاصية CSS.
  

3. تجنب تداخل التفاعل

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

لتحسين ذلك، ضع في اعتبارك ما يلي:

• تنفيذ الارتداد على المدخلات لتقليل تكرار رد الاتصال للحدث.
• استخدام AbortController لإلغاء طلبات الجلب المستمرة، مما يمنع الحمل الزائد للخيط الرئيسي من عمليات الاسترجاعات المفرطة للجلب.
  

يتم إحتوائه

تذكر - إن INP يدور حول تمكين المتصفح من رسم الشاشة التالية في أسرع وقت ممكن.

يريد المستخدمون معرفة أن أفعالهم تتم معالجتها وأن شيئًا ما يحدث في الخلفية.

ويعني الجمع بين إمكانات المتصفح مثل رؤية المحتوى وحلول أداء الويب القوية مثل NitroPack أنك تغطي نطاق تجربة المستخدم بالكامل - بدءًا من التحميل الأولي وحتى التصفح عبر جميع صفحاتك.

اختبر NitroPack مجانًا →