إن DOM (نموذج كائن المستند) هو واجهة برمجة لمستندات HTML و XML والاسم الذي يطلق على بنية مستند HTML، ويتكون من فروع وعقد تحتوي على كائنات.
يعود تاريخ نموذج كائن المستند إلى ما يسمى بـ"حروب المتصفحات" في أواخر التسعينيات بين نتسكيب نافيجيتور ومايكروسوفت إنترنت إكسبلورر، بالإضافة إلى جافا سكريبت وجي سكريبت، وهي أول لغات البرمجة النصية التي تم تنفيذها على نطاق واسع في محركات جافا سكريبت لمتصفحات الويب.
بنية DOM في ووردبريس: الشجرة والفروع والعقد
لا يختلف DOM في WordPress كثيرًا عن أي موقع إلكتروني آخر.
<html> <-- Árbol (nodo raíz)
│
├── <head> <-- Rama
│ ├── <title> <-- Nodo (hoja)
│ └── <meta> <-- Nodo (hoja)
│
└── <body> <-- Rama
├── <header> <-- Rama
│ └── <h1> <-- Nodo (hoja)
│
├── <div> <-- Rama
│ ├── <p> <-- Nodo (interno)
│ └── <img> <-- Nodo (hoja)
│
└── <footer> <-- Rama
└── <a> <-- Nodo (hoja)
- الشجرة: يتم تمثيل الصفحة بأكملها كشجرة ذات عقدة جذرية
(<html>)وعناصرها الفرعية. - الفروع: يمثل كل عنصر داخل
<div> أو<header> أو<footer>، إلخ، فرعًا من الشجرة. - العُقد: جميع عناصر HTML، مثل
<p> أو<img>أو<a>،هي عُقد تتدلى من فروع. يمكن أن تكون هذه العقد داخلية (تحتوي على عقد أخرى) أو خارجية ("أوراق" الشجرة التي ليس لها فروع أخرى).
وبالتالي، ستعتمد كثافة الفروع على نوع وعدد العناصر التي تتكون منها. على سبيل المثال، يمكن لقائمة تصفح معقدة في ووردبريس أن تولد عدة مستويات من الفروع وعشرات العقد بسبب عدد الروابط والقوائم الفرعية.
يمكنك التفكير في العقد على أنها جميع عناصر HTML في الصفحة. كلما زاد عدد العناصر لديك، عادةً ما يستغرق الأمر وقتًا أطول، مما يؤدي إلى زيادة إجمالي وقت الحظر(TBT).
يمكن أن يكون هذا أمرًا صعبًا لتحسينه في ووردبريس، حيث لا يمكنك ببساطة إزالة عناصر DOM التي تشكل بنية الصفحة. ومع ذلك، يمكننا عرض هذه العناصر بشكل انتقائي وتحميل سلسلة من العناصر أسفل الطية، وبالتالي تقليل الحجم الكلي لنموذج كائن المستند DOM.
لماذا تصغير حجم DOM؟
يمكن أن تؤدي شجرة DOM الضخمة إلى إبطاء وقت تحميل موقعك بعدة طرق، مما يزيد من استخدام الذاكرة عن طريق التسبب في حسابات نمط أطول وأبطأ، بالإضافة إلى إنفاق تكاليف بيانات غير ضرورية للمستخدمين.
يمكن أن تشمل هذه السيناريوهات المختلفة التحميل غير الضروري للعقد غير المرئية عند تحميل المستخدم للصفحة لأول مرة، وتكرار حسابات موضع العقدة ونمطها بشكل مستمر، وتخزين عدد مفرط من المراجع للعقد التي تثقل ذاكرة أجهزة المستخدمين.
لقد سبق شرح الفوائد قصيرة وطويلة المدى لتحسين سرعة تحميل الصفحة في ألف مقال ومقال. وباختصار، على المدى القصير، فإنك على المدى القصير تتجنب مغادرة الأشخاص لموقعك بسبب الملل من الانتظار، وعلى الأرجح سيقضون المزيد من الوقت عليه. سرعة التحميل هي أحد العوامل المعترف بها من قِبل جوجل في تحديد موقع محركات البحث SEO، وأنا أفهم أنها كذلك بالنسبة لبقية محركات البحث، لذلك على المدى الطويل ستزداد حركة المرور العضوية الثمينة.
ما الذي يتسبب في زيادة حجم DOM؟
يتأثر الحجم النهائي لـ DOM بالعديد من العوامل مثل القالب نفسه، وما تضيفه الإضافات المختلفة التي تستخدمها ونوع المحتوى الذي تضيفه مثل الكتل المعقدة أو "المنزلقات" الشائنة للصور، وما إلى ذلك. وكذلك الشيفرة التي يتم إنشاؤها على سبيل المثال بواسطة ما يسمى بـ "البناة".
على سبيل المثال، حتى عام 2022، وهو العام الذي تخليت فيه عن Elementor لأنه قاوم التحسين وكان من النادر ألا يكسر شيئًا في كل تحديث تقريبًا، بالإضافة إلى تجربتين سيئتين مع الدعم الفني، فقد حوّل هذا المنشئ كود الويب إلى حساء أبجدي حقيقي وكابوس مع آلاف من
في أبريل من العام نفسه، أدرج Elementor "حاوية" Flexbox "الحاوية" كجديد وثوري للغاية، في حين أن الحاوية كانت بالفعل أساساً لـ GenerateBlocks لسنوات.
كيف تقيس DOM؟
بالنسبة للقياس، اخترت منشورًا لم يتم تحسينه بعد، وهو طويل بعض الشيء وبه أنواع مختلفة من العناصر.
لنبدأ بالأشهر والأكثر شيوعًا: PageSpeed Insights . يضع جوجل علامة هناك كتحذير(باللون البرتقالي) عندما يحتوي عنصر الجسم على أكثر من 800 عقدة وكرسالة خطأ(باللون الأحمر) عندما يحتوي عنصر الجسم على أكثر من 1400 عقدة ورسالة بهذه التوصية:"تجنب الحجم الزائد لنموذج كائن المستند DOM".
اعتمادًا على محتوى وهيكل كل صفحة تقوم بتحليلها، ستجد أدلة أكثر أو أقل على العناصر التي يمكنك مهاجمتها. الميزة هي أنها عادةً ما تعرض صورة تشير إلى العنصر المعني.
مرة أخرى، أود أن أذكرك مرة أخرى أن كل هذه التنبيهات هي مجرد توصيات وأنه لا يجب أن تصاب بالذعر أو تصبح مهووسًا بهذه المقاييس. هناك صفحات تقدم تجربة مستخدم جيدة وسرعة متصورة جيدة مع درجات PageSpeed منخفضة.
مع GTmetrix سنحصل بشكل عام على نفس النتائج على DOM.
ومع ذلك، فإن الرسم البياني "الانحداري" للطلبات هنا مفيد للغاية لفحص جميع العناصر مرتبة حسب النوع والوقت الذي يستغرقه تحميلها في لمحة سريعة.
لكن الطريقة الأسهل والأسرع هي من خلال أي متصفح. افتح الصفحة المراد تحليلها وانقر بزر الفأرة الأيمن / "فحص" وفي علامة التبويب "الشبكة" ستجد شلالاً أكثر تفصيلاً لأنه يمكنك إكماله عن طريق تمرير الصفحة وستتم إضافة جميع الملفات التي تحتويها. يمكنك بعد ذلك فرزها حسب الوزن والنوع والوقت وما إلى ذلك.
ستجد أسفل هذه النافذة ملخصًا للنتائج. على اليسار، عدد الطلبات. على اليمين، باللون الأزرق، وقت حدث DOMContentContentLoaded، وباللون الأحمر وقت تحميل تلك الصفحة.
قلل حجم DOM باستخدام "العناصر الكسولة" من Perfmatters.
أضافت Perfmatters، تلك الإضافة الأساسية التي لا أملّ من التوصية بها، في إصدارها 2.3.3 الصادر في 28 أغسطس 2024 خيارًا يسمى Lazy Elements، والذي يعمل بشكل جيد حقًا لتسهيل مهمة تفتيح DOM، على الرغم من أنه لا يزال في الإصدار التجريبي.
تسمح هذه الدالة بإضافة"التحميل البطيء" المسمى خطأً"التحميل البطيء" إلى عناصر محددة وتوابعها (الأبناء) عن طريق إضافة أي جزء واحد من سلسلة سمات (فئة="مثال") من الحاوية الأصل.
في الوثائق التي قدمتها Perfmatters حول هذه الوظيفة الجديدة، يتم تحذيرنا من محاولة تطبيق "التحميل البطيء" على العناصر الموجودة أعلى الطية. أي ما يتم تحميله على الشاشة وأول ما يراه المستخدم دون التمرير لأسفل.
ويلاحظ كذلك أنه إذا رأيت أن شيئًا ما معطلًا بصريًا، فتأكد من أنك استخدمت سلسلة فريدة في الصفحة غير مشتركة مع عناصر أخرى.
وكما هو الحال مع الصور بطيئة التحميل، يتم وضع المحتوى داخل . وهذا يعني أن أي شيء يتم تحميله بشكل بطيء لا يزال قابلاً للزحف والفهرسة من الناحية الفنية من قِبل جوجل. ومع ذلك، لا يمكنهم الجزم بكيفية تعامل جوجل مع العناصر ذات التحميل البطيء في سلسلة. لذا يوصون، فيما يتعلق بتحسين محركات البحث، بالاختبار أولاً.
كما يحذّر أيضًا من محاولة تطبيق التحميل البطيء على العناصر التي تحتوي على صور تبدأ "صندوقًا خفيفًا". وهكذا، لقد تمكنت من التحقق من أن وظيفة Lightbox الأصلية في ووردبريس تتوقف عن العمل عند إضافة فئة العنصر الذي ينفذها إلى القائمة.
بخلاف ذلك، تعمل "العناصر الكسولة" بشكل مثالي. بفضل هذه الميزة، وفرتُ الكثير من الوقت في تخفيف DOM بنتائج جيدة. آمل أن يواصل Perfmatters تطويره لتحسين وتوسيع خياراته.
مقالات ذات صلةGB QUERY LOOP BLOCK VERSION 1
