إذا كنت تقرأ هذه المقالة ، فمن المحتمل أنك واجهت تحذير "تجنب زيادة حجم DOM الزائد" من Google Lighthouse.
تحتوي صفحة الويب الخاصة بك على حجم DOM كبير إذا كانت تحتوي على عدد كبير جدًا من عُقد DOM أو علامات HTML أو إذا كانت هذه العقد أو العلامات متداخلة بشكل عميق جدًا. يمكن أن يؤدي ذلك إلى مشكلات في أداء الموقع مثل التمرير المتقطع وأوقات تحميل الصفحة البطيئة. من ناحية أخرى ، يوفر حجم DOM المحسّن تجربة مستخدم أفضل ، مما يؤدي إلى زيادة في معدل الزيارات.
إذا كنت قد أضفت رسومًا متحركة سطحية CSS3 أو أدوات جافا سكريبت إلى موقعك على الويب ، فمن المحتمل أنه يواجه تأثيرات حجم DOM كبير.
يحتاج مالكو مواقع الويب ، بما في ذلك مالكو متاجر التجارة الإلكترونية ، إلى إعداد مواقعهم لتحديث Google Page Experience ، حيث إنها ستؤثر بالتأكيد على حجم DOM كإشارة تصنيف.
في هذا المنشور ، سنلقي نظرة على ماهية DOM ونوضح كيف يمكن أن يؤثر على تجربة مستخدم موقعك. على طول الطريق ، سنشارك أيضًا بعض النصائح العملية لمساعدتك في تحسين صفحات موقعك لتحسين الأداء.
ما هو DOM؟
يقوم المستعرض الخاص بك بإنشاء بنية شجرية لعناصر الموقع تسمى DOM (نموذج كائن المستند) في كل مرة يتم فيها تحميل صفحة ويب.
DOM هو رسم تخطيطي لشجرة العناصر في HTML الخاص بك. يعرض كل عنصر HTML مثل الجسم أو h1 مع العقدة الخاصة به.
يمثل DOM الطبيعة الهرمية للكائنات المختلفة التي قد تعتمد أو لا تعتمد على بعضها البعض. كما ذكرنا سابقًا ، فإنه يعرض بنية HTML لصفحة الويب كشجرة ، تتكون من سلسلة من العلامات.
وإليك كيفية عملها: عندما يبدأ متصفح الويب في إعداد صفحة لعرضها ، فإنه ينشئ مخططًا لشجرة الكائن لجميع عناصر الصفحة وفقًا لهيكل HTML الخاص به.
نتيجة لذلك ، كلما تلقى ملف HTML ، يبدأ بتحويله إلى نموذج منظم على شكل شجرة يسمى DOM أو DOM tree. يمكنك الوصول إلى DOM وتعديله باستخدام JavaScript.
فيما يلي بعض المصطلحات الأساسية المتعلقة بـ DOM:
- العقد. يُطلق على كل عنصر أو علامة في DOM اسم عقدة أو ورقة في شجرة DOM.
- عمق. عدد العناصر في فرع DOM يسمى العمق.
- عنصر تابع. تسمى العقدة الأخيرة التي لا تتفرع بعد ذلك بالعنصر الفرعي.
ماذا يعني تجنب زيادة حجم DOM؟
يحدث حجم DOM الزائد عندما يكون هناك عدد كبير جدًا من عُقد DOM (أو علامات HTML) على صفحتك أو عندما تكون متداخلة بشكل عميق جدًا. يؤدي هذا إلى استهلاك متصفح المستخدم طاقة إضافية لمعالجة صفحة الويب الخاصة بك ، مما يؤدي إلى بطء تحميل الصفحة وانخفاض درجات سرعة الصفحة.
أحد الأسباب التي تجعل تنفيذ JavaScript و CSS بطيئًا غالبًا هو أن المستعرض يجب أن يعالج المزيد من العقد ، مما يؤدي إلى تأخير في عرض الصفحة.
يؤدي حجم DOM الزائد إلى زيادة استخدام الذاكرة ، وتأخير معالجة النمط ، وإنشاء تدفقات إعادة تدفق تخطيط مكلفة. يمنحك تعديل كائنات DOM التحكم في عناصر الصفحة التي تريد عرضها للمستخدم.
ببساطة ، يتيح لك الحفاظ على حجم DOM صغيرًا تحسين أداء الموقع وتجربة المستخدم. سيؤدي هذا بدوره إلى تحسين نقاط Core Web Vitals الخاصة بك.
تجنُب حجم DOM الزائد
سنتحدث هنا عن تحذير "تجنب الحجم الزائد لعناصر DOM" في Lighthouse.
سيظهر هذا الخطأ إذا:
- هناك أكثر من 1500 عقدة DOM إجمالاً. هناك أكثر من 1500 عنصر HTML على صفحة الويب الخاصة بك.
- لقد وصلت إلى حد أقصى لعمق العقدة أكبر من 32 عقدة. يتداخل العنصر في 32 عنصرًا أصليًا أو أكثر.
- توجد عقدة أصل بها أكثر من 60 عقدة فرعية. يوجد أكثر من 60 فرعًا (عناصر قائمة أو صفوف جدول) في عنصر أصلي.
ومع ذلك لا يؤثر تحذير "تجنب حجم DOM الزائد" بشكل مباشر على أي مقاييس Lighthouse. بينما من الناحية النظرية ، يمكن تحميل الصفحات ذات DOM الكبير بسرعة ولكن في العالم الحقيقي ، لا يتم تحميلها في الغالب.
ومع ذلك ، سيؤثر حجم DOM الكبير بالتأكيد على مقاييس Lighthouse الأخرى مثل أكبر رسم محتوى (LCP) وإزاحة التخطيط التراكمي (CLS).
ما سبب ظهور تحذير تجنب حجم DOM الزائد
يمكن أن يكون للصفحة حجم DOM كبير نظرًا لعدة أسباب. دعونا نلقي نظرة على بعض أكثرها شيوعًا:
- الإضافات أو السمات المشفرة بشكل سيء
- عُقد DOM التي تنتجها JavaScript
- منشئو الصفحات الذين ينشئون كود HTML متضخمًا
- نص تم لصقه في محرر WYSIWYG
وذلك لأن التعليمات البرمجية المتضخمة يمكن أن تزيد من حجم HTML الخاص بك مما يؤخر الوقت المطلوب لتنزيل صفحة الويب الخاصة بك.
يؤثر حجم DOM الزائد بشكل سلبي على أداء العرض. نتيجة لذلك ، سيقوم متصفح المستخدم بإجراء عمليات حسابية إضافية عند التحميل الأول وكذلك في كل مرة يتفاعل فيها المستخدم أو البرنامج النصي مع صفحة الويب الخاصة بك. تستهلك متصفحات الويب أيضًا المزيد من الذاكرة عند معالجة DOM عبر JavaScript.
كيف يؤثر حجم DOM الزائد على سرعة الصفحة؟
على الرغم من أن تحذير حجم DOM الزائد لا يؤثر بشكل مباشر على مقاييس Lighthouse ، إلا أنه يؤثر على المقاييس الأخرى التي تؤدي في النهاية إلى انخفاض درجة Lighthouse.
على سبيل المثال ، يؤدي حجم DOM الكبير إلى تعقيد قراءة صفحة الويب وتحليلها دون داعٍ. نتيجة لذلك ، سيستغرق المتصفح وقتًا إضافيًا لتحميل الصفحة على الشاشة.
في كل مرة يتم فيها تحميل الصفحة ، يتعين على متصفح الويب تنزيل HTML وتحليله قبل أن يتمكن من البدء في إنشاء شجرة DOM.
فيما يلي بعض الطرق التي يمكن أن يؤثر بها حجم DOM الزائد في أداء صفحتك:
- يزيد من عدد البايت المنقولة. يتضمن عقدًا متعددة لا يتم عرضها للمستخدم عند التحميل الأول. يؤدي هذا إلى إبطاء سرعة تحميل الصفحة ويضر بكفاءة الشبكة ، مما يؤدي إلى زيادة تكاليف البيانات وتجربة الصفحة السيئة للمستخدمين.
- يبطئ عرض الصفحة. يستهلك المستعرض المزيد من الموارد حيث يتعين عليه إعادة حساب موضع العقد المختلفة وتصميمها باستمرار. وبالمثل ، يتأثر أداء الموقع أيضًا بسبب قواعد النمط المعقدة.
- يطغى على موارد الذاكرة لجهاز المستخدم الخاص بك. يؤدي التفاعل المستمر مع استعلامات JavaScript إلى ضعف أداء وقت التشغيل وعرض بطيء للصفحة. ينتج عن هذا تجربة صفحة سلبية لمستخدمي موقعك.
الحقيقة هي أن حجم DOM الكبير يؤثر سلبًا على أداء صفحة الويب. وإليك نظرة سريعة على الأمور الأخرى التي ستتأثر:
- كفاءة الشبكة وأداء الحمل
- أداء وقت التشغيل
- أداء الذاكرة
كيفية إصلاح تحذير "تجنب الحجم الزائد لعناصر DOM"
قبل أن تتمكن من حل "تحذير تجنب زيادة حجم DOM" ، يجب أولاً تحديد أسبابه من خلال النظر في أصوله.
يمكنك معرفة الحد الأقصى لعمق DOM والحد الأقصى للعناصر التابعة باستخدام Lighthouse. بعد ذلك ، سيتعين عليك إجراء بعض البحث باستخدام أداة فحص DOM لمتصفح الويب الخاص بك والتحقق من DOM.
يجب أن يكون هدفك هو معرفة أسباب العدد الزائد من عُقد DOM. فيما يلي أهم خمسة المذنبين الأكثر شيوعًا:
لا تستخدم مظاهر أو مكونات إضافية سيئة التشفير
قد تستخدم مكونًا إضافيًا ، مثل مكون التقويم الإضافي أو شريط التمرير الذي قد ينشئ عددًا كبيرًا من عُقد DOM. في هذه الحالة ، يمكنك ببساطة استبدالها بمكوِّن إضافي محسَّن.
وبالمثل ، يمكن أن تؤثر السمات والنماذج سيئة الترميز أيضًا سلبًا على أداء موقع الويب الخاص بك. يمكنك إصلاح ذلك عن طريق التخلص من التعليمات البرمجية المتضخمة في موقع الويب الخاص بك باستخدام محرر مبسط أو تعديل أجزاء من القالب الخاص بك.
تصغير عُقد DOM التي أنشأتها JavaScript
في بعض الأحيان ، يمكن لـ JavaScript إنشاء عدد كبير من عُقد DOM. على سبيل المثال ، قد تقدم أداة الدردشة عددًا كبيرًا من عُقد DOM في صفحة DOM الخاصة بصفحتك. يمكنك إصلاح هذا عن طريق التخلص من ملف JavaScript أو استخدام عنصر واجهة مستخدم محسن.
لا تستخدم أدوات إنشاء الصفحات التي تنشئ HTML متضخمًا
يمكن لمنشئي الصفحات مثل WP Bakery و Elementor أحيانًا إنتاج تعليمات برمجية متضخمة تحتوي على عدد كبير من عُقد DOM. نظرًا لأنها غالبًا ما تكون جزءًا لا يتجزأ من سير العمل ، فإنه يجعل من الصعب إزالتها معًا.
ومع ذلك ، يمكنك حل هذه المشكلة عن طريق التخلص من التعليمات البرمجية المتضخمة وتعديل سير العمل الخاص بك. يقوم Elementor بإنشاء علامات HTML إضافية والتي تزيد من حجم DOM. قام المطورون وراء Elementor بخطوات واسعة مؤخرًا مع تحسينات DOM لتقليل الانتفاخ.
يمكن أن تؤثر السمات الرديئة الجودة أيضًا بشكل مباشر على حجم DOM. لذلك ، نوصي باستخدام سمة محسّنة للأداء مثل Shoptimizer.
يقوم معظم منشئي الصفحات بحقن عدد كبير جدًا من علامات div. يمكنك تجنب إدراج العناصر غير الضرورية باستخدام حلول مبسطة ، مما يمنحك مزيدًا من التحكم في بنية HTML لموقعك.
وبالمثل ، يمكنك استخدام أدوات مثل HotJar لمعرفة ما يستخدمه مستخدمو موقعك وما الذي يناسبهم. يعد إجراء تحليل دقيق أمرًا ضروريًا لتقليل حجم DOM.
لا تنسخ النص ولصقه في محرر WYSIWYG
لا تقوم معظم محررات WYSIWYG مثل TinyMCE بتنظيف الشفرة التي تم نسخها ولصقها ، خاصةً عند لصقها من مصدر نص منسق مثل Microsoft Word. سيقوم أيضًا بنسخ الأنماط والنص ، مما يعني إنشاء عُقد DOM إضافية للأنماط.
يمكنك حل هذه المشكلة بسهولة عن طريق عدم لصق النص مباشرة في المحرر الخاص بك والتخلص من النص المتضخم في صفحاتك أولاً. منظف HTML مثالي لهذا الغرض.
بالإضافة إلى ذلك ، يجب أن تفكر أيضًا في استخدام Gutenberg بدلاً من نسخ النص ولصقه في محرر WordPress WYSIWYG الكلاسيكي. أظهرت بعض الدراسات أن استخدام محرر Gutenberg يمكن أن ينتج عنه ترميز أخف وخالي من الفوضى.
لا تخفي العناصر غير المرغوب فيها باستخدام CSS
لا نوصي بإخفاء العناصر التي تم إدراجها بواسطة منشئ الصفحات أو موضوع مثل الزر "إضافة إلى سلة التسوق" في صفحات المنتج أو زر التقييم أو معلومات المؤلف.
عادة ، يتم ذلك باستخدام شيء مثل كود CSS التالي:
.author-name {
display:none;
}
هذا غير مفيد لأنك ربما لا تزال تقدم تعليمات برمجية غير ضرورية لمستخدمي موقعك والتي تتضمن ترميز HTML وأنماط CSS.
قد تتمكن من إزالة هذه العناصر بالانتقال إلى إعدادات المظهر أو المكونات الإضافية. بدلاً من ذلك ، يمكنك إزالتها من كود PHP الخاص بها. من الأفضل إزالة العناصر غير المرغوب فيها تمامًا من الصفحة والتي يمكن إجراؤها باستخدام خطاف WooCommerce مخصص.
ما الذي يمكنك فعله أيضًا لتجنب زيادة حجم DOM؟
الآن ، قد تتساءل عما يمكنك فعله لتجنب زيادة حجم DOM. فيما يلي بعض النصائح العملية التي يجب اتباعها:
نصيحة رقم 1: قم بتنفيذ الحمل البطيء والتمرير اللانهائي
يعد التحميل البطيء لأجزاء محددة من موقع الويب الخاص بك طريقة رائعة لتحسين عرض الصفحة الأولية. على سبيل المثال ، يمكنك استخدام وحدة التحميل البطيئة للصور على صفحات الفئات أو كتالوج المنتج.
يمكنك أيضًا تسريع عرض الصفحة عن طريق تحديد الحد الأقصى لعدد المشاركات في كل صفحة مدونة. إنها لفكرة جيدة ألا تتجاوز 10 مشاركات لكل صفحة. هذا يعني أيضًا عدم عرض أكثر من 10 عناصر في صفحة منتج واحدة. وبالمثل ، يجب عليك أيضًا الاحتفاظ بالحد الأقصى لعدد المنتجات ذات الصلة بثلاثة أو أربعة.
على غرار التحميل البطيء ، يمكن أن يساعدك تنفيذ التمرير اللانهائي على صفحات الويب الخاصة بك في تسريع أوقات تحميل صفحتك في الحالات التي يتعين على المستخدم فيها التمرير عبر العناصر المتكررة مثل المنتجات أو منشورات المدونة.
نصيحة رقم 2: أنشئ عدة صفحات بدلاً من صفحة واحدة طويلة
قد يكون لديك صفحة واحدة تعرض أنواعًا مختلفة من المحتوى على مواقع الويب الخاصة بك مثل منشورات المدونة ونماذج جهات الاتصال والمنتجات. يمكن أن يؤدي هذا أيضًا إلى حجم شجرة DOM كبير.
بدلاً من ذلك ، يجب فصل الصفحات لكل عنصر من هذه العناصر وربطها من خلال شريط التنقل.
النصيحة رقم 3: تحسين عرض الصفحة باستخدام خاصية رؤية المحتوى
عادةً ما يعرض مستعرض الويب جميع عناصر الصفحة عند التحميل. ومع ذلك ، باستخدام خاصية رؤية المحتوى في CSS ، سيتخطى المتصفح التصميم والتخطيط والطلاء حتى يقوم المستخدم بالتمرير لأسفل الصفحة بطريقة "في الوقت المناسب".
[youtube https://www.youtube.com/watch؟v=FFA-v-CIxJQ؟start=1&w=560&h=315]
تحقق من هذا الفيديو الممتاز من Google حول خاصية CSS الجديدة للمحتوى. لا تزال هذه الميزة مليئة بالأخطاء ولكنها بالتأكيد لديها القدرة على أن تكون حلاً قويًا للغاية لحجم DOM الزائد والتحميل البطيء إذا تم حل المشكلات.
نصيحة رقم 4: تجنب استخدام إعلانات CSS المعقدة وجافا سكريبت
يجب ألا تستخدم إعلانات CSS المعقدة مثل div: last-child؛ حيث يتعين على المتصفح التحقق من حالة الطفل الأخير لكل div على صفحة الويب الخاصة بك.
هناك طريقة أخرى للحفاظ على حجم DOM الخاص بك صغيرًا عن طريق تجنب JavaScript الذي يستهلك الذاكرة. document.getElementsByTagName ('div') ، يمكن أن تنتج عددًا كبيرًا من عُقد DOM.
خاتمة
يؤثر حجم DOM الكبير سلبًا على أداء الموقع ويزيد من وقت تحميل الصفحة.
يجب أن تتخذ خطوات لتبسيط بنية صفحة HTML الخاصة بك والتخلص من العناصر غير المرغوب فيها. ابدأ بالتحقق من حجم شجرة DOM وتخلص من العقد غير الضرورية. سيساعدك هذا على تسريع موقعك وتحسين تجربة المستخدم.
بهذه الطريقة ، ستتمكن من التأكد من أن حجم DOM على موقع الويب الخاص بك محسّن لتجربة مستخدم رائعة وتحسين نقاط Core Web Vitals الخاصة بك.
