إنّ أحجام DOM الكبيرة لها تأثير أكبر في التفاعلية مما قد تتوقّع. يوضّح هذا الدليل سبب حدوث ذلك والإجراءات التي يمكنك اتّخاذها.
لا يمكنك تجنُّب ذلك: عند إنشاء صفحة ويب، ستحتوي هذه الصفحة على نموذج تمثيل المستندات (DOM). يمثّل نموذج DOM بنية صفحات HTML، ويمنح JavaScript وCSS إمكانية الوصول إلى بنية الصفحة ومحتوياتها.
المشكلة هي أنّ حجم نموذج DOM يؤثر في قدرة المتصفّح على عرض الصفحة بسرعة وكفاءة. بشكل عام، كلما زاد حجم عنصر DOM، زادت تكلفة عرض هذه الصفحة في البداية وتعديل عرضها لاحقًا في دورة حياة الصفحة.
ويؤدي ذلك إلى حدوث مشاكل في الصفحات التي تحتوي على عناصر DOM كبيرة جدًا عندما تؤدي التفاعلات التي تعدّل عناصر DOM أو تحدّثها إلى بدء عمل تنسيق مكلف يؤثر في قدرة الصفحة على الاستجابة بسرعة. يمكن أن تؤثّر أعمال التصميم المُكلفة في مدى استجابة الصفحة لتفاعلات المستخدم (INP). إذا كنت تريد أن تستجيب الصفحة بسرعة لتفاعلات المستخدم، من المهم التأكّد من أنّ أحجام DOM ليست أكبر من اللازم.
متى يكون نموذج DOM للصفحة كبيرًا جدًا؟
وفقًا لخدمة Lighthouse، يكون حجم نموذج DOM للصفحة زائدًا عندما يتجاوز 1,400 عقدة. سيبدأ Lighthouse في عرض تحذيرات عندما تتجاوز عناصر DOM في الصفحة 800 عنصر. خذ رمز HTML التالي على سبيل المثال:
<ul>
<li>List item one.</li>
<li>List item two.</li>
<li>List item three.</li>
</ul>
في الرمز البرمجي أعلاه، هناك أربعة عناصر DOM: عنصر <ul> وثلاثة عناصر فرعية <li>. من المؤكد تقريبًا أن تحتوي صفحة الويب على عدد أكبر من العقد، لذا من المهم معرفة الإجراءات التي يمكنك اتّخاذها للتحقّق من أحجام DOM، بالإضافة إلى استراتيجيات أخرى لتحسين عملية العرض بعد تصغير DOM للصفحة إلى أصغر حجم ممكن.
كيف تؤثر ملفات DOM الكبيرة في أداء الصفحة؟
تؤثر ملفات DOM الكبيرة في أداء الصفحة بعدة طرق:
- أثناء العرض الأوّلي للصفحة عند تطبيق CSS على صفحة، يتم إنشاء بنية مشابهة لنموذج DOM تُعرف باسم نموذج محتوى CSS (CSSOM). مع زيادة دقة أدوات اختيار CSS، يصبح نموذج CSSOM أكثر تعقيدًا، ويلزم المزيد من الوقت لتنفيذ عمليات التنسيق والتصميم والتركيب والتلوين اللازمة لعرض صفحة الويب على الشاشة. يؤدي هذا العمل الإضافي إلى زيادة وقت استجابة التفاعلات التي تحدث في وقت مبكر أثناء تحميل الصفحة.
- عندما تعدّل التفاعلات نموذج DOM، إمّا من خلال إدراج عنصر أو حذفه أو من خلال تعديل محتوى نموذج DOM وأنماطه، يمكن أن يؤدي العمل اللازم لعرض هذا التعديل إلى زيادة تكلفة التصميم والأسلوب والتركيب والتلوين بشكل كبير. كما هو الحال مع العرض الأولي للصفحة، يمكن أن تؤدي الزيادة في مدى تحديد أداة اختيار CSS إلى زيادة في عمل العرض عند إدراج عناصر HTML في DOM نتيجة تفاعل مع الصفحة.
- عندما يطلب JavaScript معلومات من نموذج DOM، يتم تخزين الإشارات إلى عناصر نموذج DOM في الذاكرة. على سبيل المثال، إذا استدعيت
document.querySelectorAllلاختيار جميع عناصر<div>في صفحة، قد تكون تكلفة الذاكرة كبيرة إذا كانت النتيجة تعرض عددًا كبيرًا من عناصر DOM.
يمكن أن تؤثّر كل هذه العوامل في التفاعل، ولكنّ العنصر الثاني في القائمة أعلاه له أهمية خاصة. إذا أدّى التفاعل إلى تغيير في نموذج DOM، يمكن أن يؤدي ذلك إلى بدء الكثير من الأعمال التي يمكن أن تساهم في انخفاض مقياس INP على الصفحة.
كيف يمكنني قياس حجم DOM؟
يمكنك قياس حجم DOM بطريقتَين. تستخدِم الطريقة الأولى Lighthouse. عند إجراء عملية تدقيق، ستظهر إحصاءات عن ملف DOM للصفحة الحالية في عملية التدقيق "تجنُّب زيادة حجم عناصر DOM" ضمن العنوان "بيانات التشخيص". في هذا القسم، يمكنك الاطّلاع على إجمالي عدد عناصر DOM وعنصر DOM الذي يحتوي على أكبر عدد من العناصر الفرعية، بالإضافة إلى عنصر DOM الأكثر عمقًا.
تتضمّن الطريقة الأسهل استخدام وحدة تحكّم JavaScript في أدوات المطوّرين في أي متصفّح رئيسي. للحصول على إجمالي عدد عناصر HTML في نموذج DOM، يمكنك استخدام الرمز التالي في وحدة التحكّم بعد تحميل الصفحة:
document.querySelectorAll('*').length;
إذا كنت تريد الاطّلاع على تعديل حجم نموذج كائن المستند (DOM) في الوقت الفعلي، يمكنك أيضًا استخدام أداة مراقبة الأداء. باستخدام هذه الأداة، يمكنك ربط عمليات التنسيق وعمليات التصميم (وجوانب الأداء الأخرى) بحجم عنصر DOM الحالي.
إذا كان حجم DOM يقترب من الحدّ الأدنى لتحذير حجم DOM في Lighthouse أو تعذّر قياسه، تكون الخطوة التالية هي معرفة كيفية تقليل حجم DOM لتحسين قدرة صفحتك على الاستجابة لتفاعلات المستخدمين حتى يمكن تحسين مقياس INP لموقعك الإلكتروني.
كيف يمكنني قياس عدد عناصر DOM المتأثّرة بتفاعل معيّن؟
إذا كنت بصدد إنشاء ملف شخصي لتفاعل بطيء في المختبر تشتبه في أنّه قد يكون مرتبطًا بحجم نموذج كائن المستند (DOM) للصفحة، يمكنك معرفة عدد عناصر نموذج كائن المستند (DOM) المتأثرة من خلال اختيار أي جزء من النشاط في أداة تحليل الأداء المُصنَّف "إعادة احتساب النمط" وملاحظة البيانات السياقية في اللوحة السفلية.
في لقطة الشاشة أعلاه، لاحظ أنّ إعادة احتساب أسلوب العمل، عند اختيارها، تعرِض عدد العناصر المتأثرة. على الرغم من أنّ لقطة الشاشة أعلاه تعرض حالة متطرفة لتأثير حجم DOM في عملية العرض على صفحة تحتوي على العديد من عناصر DOM، إلا أنّ معلومات التشخيص هذه مفيدة في أي حال لتحديد ما إذا كان حجم DOM عاملاً محددًا في المدة التي يستغرقها عرض الإطار التالي استجابةً للتفاعل.
كيف يمكنني تقليل حجم DOM؟
بالإضافة إلى تدقيق رمز HTML لموقعك الإلكتروني بحثًا عن علامات غير ضرورية، فإنّ الطريقة الرئيسية لتقليل حجم DOM هي تقليل عمق DOM. من العلامات التي تدل على أنّ نموذج DOM قد يكون عميقًا بشكل غير ضروري هو ظهور ترميز يبدو على النحو التالي في علامة التبويب العناصر ضمن أدوات المطوّرين في المتصفّح:
<div>
<div>
<div>
<div>
<!-- Contents -->
</div>
</div>
</div>
</div>
عندما ترى أنماطًا مثل هذه، يمكنك على الأرجح تبسيطها من خلال تسطيح بنية DOM. سيؤدي ذلك إلى تقليل عدد عناصر DOM، ومن المحتمل أن يمنحك فرصة لتبسيط أنماط الصفحة.
قد يكون عمق DOM أيضًا أحد أعراض الإطارات الأساسية التي تستخدمها. على وجه الخصوص، تتطلّب الأطر الأساسية المستندة إلى المكوّنات، مثل تلك التي تعتمد على JSX، تداخل مكوّنات متعددة في حاوية رئيسية.
ومع ذلك، تتيح لك العديد من الإطارات الأساسية تجنُّب تداخل المكوّنات باستخدام ما يُعرف باسم "المقاطع". تشمل الأطر المستندة إلى المكوّنات التي توفّر أجزاء كميزة ما يلي (على سبيل المثال لا الحصر):
باستخدام الأجزاء في إطار العمل الذي تختاره، يمكنك تقليل عمق DOM. إذا كنت قلقًا بشأن تأثير تسطيح بنية DOM في التصميم، يمكنك الاستفادة من استخدام أوضاع تنسيق أكثر حداثة (وأسرع) مثل flexbox أو grid.
استراتيجيات أخرى يجب أخذها في الاعتبار
حتى إذا بذلت جهدًا في تسطيح شجرة DOM وإزالة عناصر HTML غير الضرورية للحفاظ على DOM بأصغر حجم ممكن، قد يظلّ كبيرًا جدًا ويؤدي إلى بدء الكثير من عمليات المعالجة أثناء تغييره استجابةً لتفاعلات المستخدمين. إذا كنت في هذه الحالة، هناك بعض الاستراتيجيات الأخرى التي يمكنك اتّباعها للحدّ من عمل المعالجة.
اتّباع نهج تراكمي
قد تكون في وضع لا تظهر فيه أجزاء كبيرة من صفحتك للمستخدم في البداية عند عرضها لأول مرة. يمكن أن تكون هذه فرصة لتحميل HTML بشكل بطيء عن طريق حذف أجزاء نموذج DOM هذه عند بدء التشغيل، ولكن إضافتها عندما يتفاعل المستخدم مع أجزاء الصفحة التي تتطلّب الجوانب المخفية في البداية من الصفحة.
يكون هذا النهج مفيدًا أثناء التحميل الأولي وربما بعد ذلك أيضًا. في عملية تحميل الصفحة الأولية، لن تضطر إلى تنفيذ الكثير من عمليات المعالجة في البداية، ما يعني أنّ الحمولة الأولية لرمز HTML ستكون أخفّ، وسيتم عرضها بشكل أسرع. سيمنح ذلك التفاعلات خلال هذه الفترة الحاسمة المزيد من الفرص للظهور مع منافسة أقل على جذب انتباه سلسلة المحادثات الرئيسية.
إذا كانت لديك أجزاء كثيرة من الصفحة مخفية في البداية عند التحميل، يمكن أن يؤدي ذلك أيضًا إلى تسريع التفاعلات الأخرى التي تؤدي إلى إعادة عرض الصفحة. ومع ذلك، مع إضافة المزيد من التفاعلات الأخرى إلى نموذج DOM، سيزداد عمل العرض مع نمو نموذج DOM على مدار دورة حياة الصفحة.
قد تكون إضافة عناصر إلى نموذج DOM بمرور الوقت عملية صعبة، ولها مزاياها وعيوبها. إذا كنت ستتّبع هذا المسار، من المرجّح أنّك تقدّم طلبات إلى الشبكة للحصول على بيانات لملء رمز HTML الذي تريد إضافته إلى الصفحة استجابةً لتفاعل أحد المستخدِمين. على الرغم من أنّ طلبات الشبكة قيد التنفيذ لا تُحتسَب ضمن مقياس INP، إلا أنّها يمكن أن تزيد من وقت الاستجابة المُلاحظ. إذا أمكن، يمكنك عرض مؤشر دوار أو مؤشر آخر يشير إلى أنّه يتم جلب البيانات حتى يدرك المستخدمون أنّ هناك عملية جارية.
الحد من تعقيد أداة اختيار لغة CSS
عندما يُحلّل المتصفّح أدوات الاختيار في ملف CSS، عليه التنقّل في شجرة DOM لفهم كيفية تطبيق أدوات الاختيار هذه على التنسيق الحالي وما إذا كانت ستُطبَّق عليه. وكلما زادت تعقيد هذه المحدّدات، زاد العمل الذي يتعين على المتصفّح تنفيذه لإجراء كلّ من العرض الأوّلي للصفحة، بالإضافة إلى زيادة عمليات إعادة احتساب الأنماط وعمل التنسيق إذا تغيّرت الصفحة نتيجة تفاعل.
استخدام السمة content-visibility
توفّر CSS سمة content-visibility، وهي طريقة فعّالة لعرض عناصر DOM خارج الشاشة بشكل بطيء. وعندما تقترب العناصر من مساحة العرض، يتم عرضها عند الطلب. لا تقتصر مزايا content-visibility على إزالة قدر كبير من عمل عرض الصفحة الأولي، بل تتيح أيضًا تخطّي عمل عرض العناصر التي لا تظهر على الشاشة عند تغيير نموذج DOM للصفحة نتيجة تفاعل المستخدم.
الخاتمة
إنّ تقليل حجم DOM إلى الحدّ الأدنى من المحتوى الضروري فقط هو طريقة جيدة لتحسين مقياس INP لموقعك الإلكتروني. ومن خلال إجراء ذلك، يمكنك تقليل الوقت الذي يستغرقه المتصفّح لتنفيذ عمل التنسيق والعرض عند تعديل DOM. حتى إذا لم تتمكّن من تقليل حجم DOM بشكلٍ ملحوظ، هناك بعض الأساليب التي يمكنك استخدامها لعزل عمل العرض على شجرة فرعية في DOM، مثل احتواء CSS وسمة content-visibility CSS.
بغض النظر عن الطريقة التي تتّبعها، فإنّ إنشاء بيئة يتم فيها تقليل عمل العرض إلى الحدّ الأدنى، بالإضافة إلى تقليل مقدار عمل العرض الذي تُجريه صفحتك استجابةً للتفاعلات، سيؤدي إلى أن يصبح موقعك الإلكتروني أكثر استجابةً للمستخدمين عند تفاعلهم معه. وهذا يعني أنّ معدّل INP لموقعك الإلكتروني سيكون أقل، ما يؤدّي إلى تجربة أفضل للمستخدم.