أو في GTmetrix "تقليل عدد عناصر DOM":
ما هو DOM؟
عندما يتلقى المستعرض الخاص بك مستند HTML ، يجب تحويله إلى هيكل شجرة يستخدم للعرض والرسم باستخدام CSS و JavaScript.
تسمى بنية الشجرة هذه بـ DOM أو نموذج كائن المستند.
- عقدة تسمى جميع عناصر HTML في DOM بالعُقد. (الملقب "أوراق" على الشجرة).
- عمق - يسمى طول "الغصن" في الشجرة بالعمق. على سبيل المثال ، في الرسم البياني أعلاه ، يبلغ عمق علامة img 3. (HTML -> body -> div -> img).
- العناصر التابعة - جميع العقد الفرعية للعقدة (بدون مزيد من المتفرعة) هي أطفال.
تبدأ Lighthouse و Google PageSpeed Insights في الإبلاغ عن الصفحات في حالة استيفاء أحد الشروط التالية:
- المجموع أكثر من 1500 عقدة.
- لها عمق أكثر من 32 عقدة.
- تحتوي العقدة الأصلية على أكثر من 60 عقدة فرعية.
كيف يؤثر حجم DOM على الأداء؟
يمكن أن يؤثر حجم DOM الزائد على الأداء بطرق مختلفة.
- وقت التحليل والعرض العالي (FCP) . تؤدي شجرة DOM الكبيرة وقواعد الأنماط المعقدة أداءً رائعًا للمتصفح. يجب على المتصفح تحليل HTML ، وبناء شجرة العرض ، وما إلى ذلك. في كل مرة يتفاعل فيها المستخدم أو يتغير شيء ما في HTML ، يجب على المتصفح حسابه مرة أخرى.
- يزيد من استخدام الذاكرة - قد تحتوي شفرة JavaScript الخاصة بك على وظائف للوصول إلى عناصر DOM. تجبر شجرة DOM الأكبر JavaScript على استخدام المزيد من الذاكرة لمعالجتها. من الأمثلة على ذلك محدد الاستعلام ، بتنسيق
document.querySelectorAll ('img')الذي يسرد جميع الصور التي يشيع استخدامها بواسطة مكتبات التحميل البطيء. - يزيد من TTFB - كلما زاد حجم DOM ، زاد حجم مستند HTML (بالكيلو بايت). نظرًا لأنه يلزم نقل المزيد من البيانات عبر الشبكة ، فإن هذا يزيد من TTFB.
كيف يتم تقليل حجم DOM من الناحية الفنية؟
على سبيل المثال ، من السهل تقنيًا تقليل حجم DOM:
استعمال:
<ul id="navigation-main">etc..</ul>بدلا من:
<div id="navigation-main"><ul>etc..</ul></div>بشكل أساسي ، تخلص من جميع عناصر HTML الممكنة. يمكنك أيضًا استخدام Flexbox أو Grid لتقليل حجم DOM بشكل أكبر.
ولكن نظرًا لأنك تستخدم WordPress ، فلن يساعدك ذلك كثيرًا!
كيف يتم تقليل حجم DOM في WordPress؟
تقسيم الصفحات الكبيرة إلى صفحات متعددة
هل لديك صفحة بها كل شيء على الموقع؟ هل تعجبك الخدمات ونماذج الاتصال والمنتجات ومنشورات المدونات والشهادات وما إلى ذلك؟
حاول تقسيمها إلى عدة صفحات وربطها من العنوان / شريط التنقل.
تحميل كسول وترقيم الصفحات لكل شيء ممكن
تحميل كسول لجميع أنواع العناصر. وهنا بعض الأمثلة:
- يوتيوب تحميل الفيديو كسول - استخدم WP YouTube Lyte أو Lazy Load بواسطة WP Rocket.
- حدد عدد مشاركات المدونة / المنتجات لكل صفحة - أحاول عادةً الاحتفاظ بحد أقصى 10 منشورات مدونة في كل صفحة وترقيم الباقي.
- بلوق تحميل كسول / المنتجات - أضف زر تحميل المزيد أو التمرير اللانهائي لتحميل المزيد من منشورات المدونة أو المنتجات.
- تحميل التعليقات كسول - أنا أستخدم تحميل Disqus الشرطي لأنني أستخدم Disqus. إذا كنت تستخدم التعليقات الخاصة بك ، فاستخدم المكونات الإضافية مثل Lazy Load للتعليقات.
- ترقيم الصفحات من التعليقات - إذا كان لديك مئات التعليقات ، فقد يؤثر ذلك أيضًا على حجم DOM. لترقيم التعليقات ، انتقل إلى الإعدادات -> المناقشة -> تقسيم التعليقات إلى صفحات.
- الحد من عدد الوظائف ذات الصلة - حاول قصر عدد المشاركات ذات الصلة على 3 أو 4.
ملاحظة: الصور البطيئة التحميل لن تقلل من حجم DOM
لا تخفي العناصر غير المرغوب فيها باستخدام CSS
قد تحتاج أحيانًا إلى إزالة العناصر التي يقدمها السمة / المصمم. على سبيل المثال ، أضف زرًا إلى عربة التسوق على صفحات المنتج ، وزر السعر ، ومعلومات المؤلف ، وتاريخ النشر ، وما إلى ذلك.
الحل السريع هو إخفائها باستخدام CSS:
.cart-button {display: none؛}على الرغم من أن هذا الحل يبدو بسيطًا ، إلا أنك تعرض المستخدمين لتعليمات برمجية غير مرغوب فيها (والتي تتضمن كلاً من ترميز HTML وتصميم CSS).
تحقق من إعدادات السمة / المكون الإضافي لمعرفة ما إذا كان هناك خيار لإزالته. وإلا ، فابحث عن رمز PHP ذي الصلة وقم بإزالته / التعليق عليه.
استخدم سمات وبناة صفحات مكتوبة جيدًا
يلعب المظهر الجيد دورًا مهمًا في حجم DOM. استخدم موضوعات مكتوبة جيدًا مثلتوليد الضغط أوأسترا .
يقدم منشئو الصفحات أيضًا عددًا كبيرًا جدًا من divs. استخدام المنشئين مثلالأكسجين التي لا تقدم كتل div غير مرغوب فيها ولديها المزيد من التحكم في بنية HTML.
استنتاج
قد يكون هناك المزيد من المكونات الإضافية أو إعدادات السمات التي تقدم الكثير من divs. ومن الأمثلة على ذلك المكونات الإضافية "القائمة الضخمة" مثل UberMenu.
في بعض الأحيان تكون مهمة لتجربة المستخدم لموقعك. لكن في بعض الأحيان لا يستخدمها المستخدمون أبدًا.
ربما لم يتم النقر فوق روابط التذييل الخاصة بك مطلقًا لأن معظم الزوار يقومون بالتمرير بنسبة تصل إلى 75٪ فقط.
استخدم أدوات مثل HotJar أو Google Analytics Events لمعرفة ما يستخدمه الزوار بالفعل وما لا يستخدمونه.التحليل والقياس والتكرار.
