7 استراتيجيات مثبتة لإصلاح تحذير "تجنب الإفراط في حجم DOM"

نشرت: 2022-11-23
TL؛ DR: لن يؤدي إصلاح تحذير "تجنب حجم DOM الزائد عن الحد" إلى تحسين نتائج Lighthouse الخاصة بك ، ولكن له تأثير مباشر على أداء موقعك في العالم الحقيقي. يؤدي حجم DOM الكبير إلى إبطاء موقعك ، ويزيد من وقت العرض وتكاليف البيانات للمستخدمين ، ويزيد من إرهاق ذاكرة أجهزتهم. هناك العديد من الحلول لمشكلة حجم DOM المفرط مثل تجنب السمات والمكونات الإضافية ذات الترميز السيئ ، وتقسيم موقع الويب المكون من صفحة واحدة إلى صفحات متعددة ، واستخدام أدوات إنشاء الصفحات بحذر.

تعد معظم اقتراحات تحسين Google PageSpeed ​​Insights واضحة ومباشرة.

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

ومع ذلك ، عندما تقوم بالتمرير بشكل أعمق قليلاً ، تصطدم فجأة بالتحذير "تجنب زيادة حجم DOM":

رد الفعل الأول:

ما هو حجم DOM وكيف أصلح ذلك ؟!

أنت في المكان الصحيح.

في الفقرات التالية ، ستتعلم كل ما تحتاج لمعرفته حول حجم DOM وكيفية التعامل مع هذا التحذير:

  • ما هو DOM (نموذج كائن المستند)؟
  • ما هو تأثير حجم DOM على أداء الصفحة؟
  • لماذا ترى التحذير "تجنب زيادة حجم DOM"
  • كيفية إصلاح تحذير "تجنب زيادة حجم DOM"

حقق 90+ نقاط PSI بنقرة زر واحدة. شاهد موقعك مع NitroPack!

ما هو DOM؟

يتضمن موقع الويب الخاص بك موارد مثل مستند HTML و CSS وملفات JavaScript.

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

التحليل هو الخطوة التي يتخذها المتصفح لتحويل البيانات (ترميز HTML) إلى شجرة DOM.

DOM هو نموذج مستند يمثل HTML كشجرة من الفروع والعقد.

ينتهي كل فرع من فروع الشجرة في عقدة ، وتحتوي كل عقدة على كائنات. تمثل العقدة جزءًا من المستند ، مثل عنصر أو سلسلة نصية أو تعليق.

بعبارات أبسط ، عندما تسمع DOM ، فهذا يعني بنية الكائنات التي ينشئها المتصفح في كل مرة يتم فيها تحميل صفحة ويب.

الشروط الاساسية:

  • العقد. يُطلق على كل عنصر أو علامة في DOM اسم عقدة أو طرفية.
  • عمق. عدد العناصر في فرع DOM.
  • عنصر تابع. العقدة الأخيرة التي لا تتفرع أكثر من ذلك.

ما هو تأثير حجم DOM على أداء الصفحة؟

كلما زاد عدد الفروع والعقد الموجودة في DOM لديك ، زاد حجمها.

على التوالي ، كلما زاد حجم DOM ، زادت مشكلات الأداء السلبية التي قد تواجهها.

فيما يلي بعض المشكلات التي ترتبط بحجم DOM أكبر:

1. زيادة تكاليف البيانات وأوقات تحميل أبطأ

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

2. يطغى على موارد الذاكرة لجهاز المستخدم الخاص بك

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

3. زيادة وقت التقديم

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

4. زيادة الوقت حتى البايت الأول (TTFB)

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

لماذا ترى التحذير "تجنب زيادة حجم DOM الزائد" في PageSpeed ​​Insights

تستخدم PSI Lighthouse لتحليل عناوين URL في بيئة خاضعة للرقابة (أي استخدام بيانات المختبر) لعرض الأداء وإمكانية الوصول وأفضل الممارسات ودرجة تحسين محركات البحث.

لكي تضع Lighthouse علامة على صفحتك وعلى التوالي - اعرض تحذير "تجنب حجم DOM الزائد" في تقرير PSI ، يجب أن يكون أي من الأخطاء التالية صحيحًا لشجرة DOM الخاصة بها:

  • لديها أكثر من 1500 عقدة DOM إجمالاً.
  • يبلغ الحد الأقصى لعمق العقدة أكثر من 32 عقدة .
  • تحتوي العقدة الأصل على أكثر من 60 عقدة فرعية .

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

انضم إلى أفضل 31٪ من مواقع الويب التي اجتازت "أساسيات الويب الأساسية" الخاصة بها! شاهد موقعك مع NitroPack

 

كيفية الإصلاح تجنب زيادة حجم DOM

من القواعد الأساسية الجيدة من Google:

 "بشكل عام ، ابحث عن طرق لإنشاء عُقد DOM فقط عند الحاجة ، وتدمير العقد عندما لا تكون هناك حاجة إليها."

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

بعد ذلك ، نقترح تطبيق بعض الإصلاحات التالية:

1. تجنب المكونات الإضافية والسمات سيئة الترميز

سيؤدي ذلك بشكل أساسي إلى زيادة حجم رمز موقعك ، وزيادة حجم DOM الخاص بك ، والإضرار بسرعة موقعك وأدائه العام.

كيف يمكنك معرفة ما إذا كان هناك ترميز سيئ للقالب / المكون الإضافي؟

سؤال رائع. والجواب هو:

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

إذا كنت من مستخدمي WooCommerce أو تخطط لبدء متجر ، فيجب عليك بالتأكيد التحقق من بحثنا المتعمق حول أفضل سمات Woo أداءً في عام 2022.

فيما يلي قائمة بالأشياء التي يجب أن تبحث عنها / تتجنبها عند اختيار موضوع:

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

 

2. تصغير عقد DOM المستندة إلى JavaScript

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

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

3. أدوات إنشاء الصفحات التي تنشئ HTML متضخمًا

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

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

للتعامل معها ، يمكنك الوصول إلى HTML الخاص بك وإصلاحه يدويًا.

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

4. لا تقم بنسخ / لصق نص في محرر WYSIWYG

تفشل معظم محررات WYSIWYG (ما تراه هو ما تحصل عليه) في تنظيف التعليمات البرمجية التي تم لصقها. خاصة عند لصقها من مصدر نص منسق آخر مثل Microsoft Word. تكمن المشكلة في أنه لن ينسخ النص فقط بل أنماطه أيضًا. وهم الجاني الرئيسي لأنهم قد يدمجون الكثير من عُقد DOM.

لديك خياران للتعامل معها:

  • تجنب لصق النص في المحرر الخاص بك
  • استخدم الخيار لصق كنص عادي
  • (إذا كان المحرر الخاص بك يسمح بذلك) استخدم الميزات المتقدمة لتنظيف الكود بعد لصقه

وأخيرًا وليس آخرًا - ارجع إلى صفحاتك القديمة ونظفها.

5. قم بتقسيم موقع الويب المكون من صفحة واحدة إلى عدة صفحات

يعد موقع الويب المكون من صفحة واحدة فكرة رائعة عندما يكون الغرض الوحيد منه هو تقديم عملك.

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

قد يؤدي تقسيم الصفحات الكبيرة إلى صفحات متعددة إلى تقليل عدد عُقد DOM.

6. لا تخفي العناصر غير المرغوب فيها باستخدام العرض: لا شيء

عرض: لا يتم استخدام أي منها بشكل شائع مع JavaScript لإخفاء العناصر وإظهارها دون حذفها وإعادة إنشائها. ومع ذلك ، هذا لا يعني أنها تختفي من ترميز HTML الخاص بك ، مما يترك الزائرين يقومون بتحميل عناصر غير مرغوب فيها.

7. تجنب استخدام إعلانات CSS المعقدة وجافا سكريبت

قد تؤدي إعلانات CSS المعقدة وجافا سكريبت أيضًا إلى زيادة استخدام الذاكرة وإبطاء موقعك. من الأفضل تخطيها إذا كنت تتعامل مع عدد كبير من عُقد DOM.

إصلاح مشكلات CSS و JavaScript تلقائيًا! شاهد موقعك مع NitroPack

ختاماً

صحيح أن إصلاح مشكلات DOM لن يؤدي إلى تحسين نتائج PageSpeed ​​Insights.

ومع ذلك ، فإن الفوائد الخفية لبذل جهد في التعامل مع تحذير "تجنب زيادة حجم DOM" أكبر بكثير:

  • زيادة وقت تحميل موقعك
  • تحسين الأداء المتصور لصفحتك
  • تزويد الزائرين بتجربة مستخدم أفضل

الأهم من ذلك ، أن Google تكافأ هذه الأشياء الثلاثة! علاوة على ذلك ، فهي طريقة مؤكدة لتقليل معدلات الارتداد ، وزيادة متوسط ​​الوقت الذي يقضيه ، وأخيراً وليس آخراً - زيادة التحويلات.

إذا كنت تبحث عن طرق لإصلاح أي اقتراحات أخرى لـ PSI ، فتأكد من مراجعة مقالاتنا الأخرى:

  • خدمة الصور بتنسيقات الجيل التالي بسهولة (WordPress و OpenCart و Magento)
  • كيفية التحميل الكسول للصور خارج الشاشة (5 تقنيات مثبتة)
  • تحسين الصور للويب: تقنيات تحسين محركات البحث 2022 وسرعة الموقع
  • 8 استراتيجيات لتحميل الخطوط لتحسين العناصر الحيوية للويب (2022)
  • كيفية التخلص من موارد حظر العرض (CSS و JavaScript)
  • تقليل تأثير رمز الطرف الثالث (مع / بدون المكونات الإضافية)
  • 7 طرق لتقليل عمل الخيط الرئيسي