مفاتيح لتقليل حجم DOM لموقع الويب

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

لهذا السبب سنقوم بشرح كيف يمكن اعتبار DOM كبير بشكل مفرط وكيفية تقليله.

هيا نبدأ!

ما هو DOM؟

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

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

بمعنى آخر ، عندما يعد المتصفح صفحة لتظهر لنا ، فإنه ينشئ شجرة كائن مكونة من جميع عناصر الصفحة بناءً على هيكل HTML الخاص بها.

في الوقت الذي يتلقى فيه المتصفح مستند HTML ، يجب عليه تحويله إلى بنية تشبه الشجرة ، والتي نسميها شجرة DOM أو DOM. يمكن لشفرة JavaScript الوصول إلى ذلك DOM وتعديله.

كيف يؤثر حجم DOM على أداء الويب الخاص بك؟

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

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

كيف تقلل من الناحية الفنية حجم DOM؟

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

بدلاً من استخدام هذا الرمز ؛

 <div id = ”navigation-main”>   <ul>           etc ..   </ul> </div>

سيكون من الأفضل استخدام هذا الآخر ؛

 <ul id = ”navigation-main”>   etc .. </ul>

فيما يتعلق ببنية الشجرة ، نحتاج إلى معرفة المصطلحات التالية:

• العقد : جميع عناصر HTML الخاصة بـ DOM. تُعرف أيضًا باسم "أوراق" الشجرة.
• العقد الثانوية : تلك العقد التي ليس لها المزيد من الفروع.

ومع ذلك ، فإن أفضل شيء هو أن عمق الشجرة يتكون من :

• أقل من 32 عقدة.
• أقل من 60 عقدة ثانوية لكل عقدة.

توصي Google بأنه عند تطوير مواقع الويب ، تحتوي الصفحات على أقل من 1500 عقدة DOM ، مما يعني أن التصميمات يجب ألا تكون معقدة للغاية.

كيفية تصغير حجم DOM في WordPress

هناك عدة طرق لتقليل حجم DOM في WordPress:

قسّم الصفحات الكبيرة إلى صفحات متعددة

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

في هذه الحالة ، من الأفضل تصنيف كل هذه العناصر في صفحات مختلفة وربطها عبر شريط التنقل.

قم بتنشيط المكون الإضافي lazy load وقم بتقسيم جميع العناصر الممكنة إلى صفحات

يمكنك تمكين وحدة التحميل البطيئة في جميع العناصر التي تسمح بذلك. يمكنك القيام بذلك باستخدام مقاطع الفيديو من YouTube ، باستخدام Youtube Lite أو Lazy Load من WordPress WP-Rocket.

من الضروري أيضًا تحديد عدد المنشورات لكل صفحة مدونة . سيكون الحد الأقصى المعقول لعدد المشاركات هو 10 لكل صفحة. تنطبق هذه الممارسة أيضًا على عدد المنتجات التي يجب أن تظهر في كل صفحة.

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

نوصي أيضًا بتحديد عدد المنشورات ذات الصلة بعدد أقصى يبلغ ثلاثة أو أربعة.

قم بإزالة العناصر غير الضرورية المضمنة في سمة WP الافتراضية

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

تحقق من تكوين قالب WordPress لمعرفة ما إذا كان هناك خيار لإزالة هذه العناصر ، وإذا لم يكن كذلك ، فابحث عن كود PHP المقابل لإزالتها.

استخدم سمات أو أدوات إنشاء صفحات مشفرة جيدًا

تؤثر جودة سمة WordPress بشكل مباشر على حجم DOM. لذلك ، يُنصح باستخدام سمات مشفرة جيدًا ، مثل Astra أو GeneratePress.

غالبًا ما يقوم منشئو الصفحات بإدخال عدد كبير جدًا من علامات div ، لذلك من المهم استخدام حلول مثل Oxygen Builders ، والتي لا تقوم بحقن عناصر غير مرغوب فيها وتسمح بمزيد من التحكم في بنية HTML.

تتيح لك أدوات مثل HotJar معرفة ما يستخدمه المستخدمون وما لا يعمل معهم. يعد إجراء تحليل دقيق أمرًا أساسيًا للحصول على حجم DOM الصحيح.

افكار اخيرة

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

ستنظر Google بلا شك في حجم DOM في تحديث Page Experience الذي سيصدر في الأشهر القادمة. تأكد من أن لديك واحدة مناسبة ، حتى لا تؤثر على أداء الويب الخاص بك.