Retry
خطای Reduce the number of DOM elements

هنگام تجزیه و تحلیل سایت خود از طریق Google PageSpeed ​​Insights ، ممکن است خطایی مانند DOM  را مشاهده کرده باشید و یا خطایی مانند این در GTmetrix با عنوان خطای Reduce the number of DOM elements در وردپرس را مشاهده کرده باشید که به معنی این است که شما باید تعداد عناصر DOM را کاهش دهید.

آموزش کار با جی تی متریکس را در بلاگ ما بخوانید.

یک DOM بیش از حد صفحه وب می تواند به عملکرد صفحه وب شما آسیب برساند و به همین خاطر کارشناسان توصیه می کنند که صفحه وب شما بیش از 1500 گره نداشته باشد. اگر یک صفحه وب دارید که از اندازه DOM بیش از حد بزرگ استفاده می کند ، ارائه صفحه و اجرای JavaScript در صفحه بیشتر طول می کشد و سزعت عملکرد سایت شما به شدت کاهش پیدا می کند.

بدون طراحی مجدد صفحه وب خود از ابتدا ، نمی توانید ارور  Reduce the number of DOM elements در وردپرس را برطرف کنید و در صورتی این هشدار قابل توجه است که در بیش از یک یا دو صفحه در سایت خود آن را دریافت کنید ، بنابراین ما در این مقاله می خواهیم بررسی کنیم که خطای کاهش سایز  DOM دقیقاً چیست ، چه تاثیری بر عملکرد سایت شما می گذارد و چگونه می توان آن را رفع کرد.dom چیست

DOM چیست؟

هنگامی که مرورگر شما یک سند HTML دریافت می کند ، باید به یک ساختار درخت مانند تبدیل شود که برای کمک به CSS و JavaScript برای رندر استفاده می شود. این ساختار درخت DOM ​​یا Document Object Model  نامیده می شود.

در واقع (DOM)  یک رابط و یا ساختار برنامه نویسی برای HTML معتبر و اسناد XML است. این ساختار منطقی اسناد و نحوه دستیابی به یک سند را تعریف می کند. XML به عنوان راهی برای نشان دادن انواع مختلفی از اطلاعات که ممکن است در سیستم های مختلف ذخیره شود ، استفاده می شود و او این داده ها را به عنوان اسناد ارائه می دهد و ممکن است از DOM برای مدیریت این داده ها استفاده کند. ساختار یک DOM به صورت زیر می باشد و از اجزای زیر تشکیل شده است:

  • گره ها : به تمام عناصر HTML در DOM گره گفته می شود. (با نام مستعار “برگ” در درخت).
  • عمق : مدت زمانی و یا طول “شاخه” در یک درخت عمق نامیده می شود. به عنوان مثال ، در نمودار بالا ، برچسب “img” عمق 3 دارد  (HTML -> body -> div -> img).
  • عناصر کودک : گره های کودک یک گره (بدون انشعاب بیشتر) هستند.

و در صورت وجود شرایط زیر ، Lighthouse  و Google PageSpeed ​​Insights شروع به پرچم گذاری صفحات می کنند و شما را از وجود خطای Reduce the number of DOM elements در وردپرس مطلع می کنند. این شرایط عبارتند از:

  • در کل بیش از 1500 گره داشته باشید.
  • عمق بیش از 32 گره داشته باشید.
  • یک گره والدین با بیش از 60 گره کودک داشته باشید.

 

اندازه DOM چه تاثیری بر عملکرد سایت دارد؟

اندازه بیش از حد DOM می تواند از طرق مختلف بر عملکرد تأثیر بگذارد. هرچه عناصر بیشتری (عنوان ، پیوند ، بخش ، پاراگراف …) در صفحه خود داشته باشید ، سرعت صفحه کندتر می شود و سایز DOM افزایش می یابد. یک درخت بزرگ DOM می تواند به چندین روش عملکرد صفحه شما را کندتر کند:

  • زمان تجزیه و رندر بالاتر

یک درخت بزرگ DOM و قوانین زیاد و گسترده ی آن کار بزرگی را برای مرورگر ایجاد می کند. مرورگر باید HTML را تجزیه کند ، درخت رندر را بسازد و غیره. هر بار که کاربران با هم ارتباط برقرار می کنند و یا چیزی در HTML تغییر می کند ، مرورگر مجبور است این مورد را دوباره محاسبه کند.در نهایت این زمان بر عملکرد سایت تاثییر می گذارد.

در واقع وقتی کاربران و اسکریپت ها با صفحه شما ارتباط برقرار می کنند ، مرورگر باید دائما موقعیت و حالت گره ها را محاسبه کند و به همین دلیل یک درخت بزرگ DOM در ترکیب با قوانین سبک پیچیده می تواند سرعت ارائه را بسیار کند کند.

  • میزان استفاده از حافظه را افزایش می دهد.

ممکن است کد JavaScript شما عملکردهایی برای دسترسی به عناصر DOM داشته باشد. یک درخت بزرگ DOM باعث می شود که JavaScript از حافظه بالاتر برای پردازش این موارد استفاده کند. یک مثال می تواند یک انتخابگر پرس و جو باشد. اگر جاوا اسکریپت شما از انتخابگرهای جستجوی عمومی مانند document.querySelectorAll (‘li’) استفاده می کند ، ممکن است شما ناآگاهانه منابع مربوط به تعداد زیادی گره را ذخیره کنید ، که می تواند توانایی حافظه دستگاه های کاربران شما را به شدت کاهش دهد و باعث خطای Reduce the number of DOM elements در وردپرس شود.

  • TTFB را افزایش می دهد.

با افزایش اندازه DOM ، اندازه سند HTML افزایش می یابد (در کیلوبایت). از آنجا که داده های بیشتری باید از طریق شبکه منتقل شوند ، این مورد باعث افزایش TTFB می شود .

کارایی شبکه و عملکرد آن

یک درخت بزرگ DOM غالباً شامل تعداد زیادی از گره ها است که هنگام بارگیری کاربر برای بارگیری صفحه ، قابل مشاهده نیستند ، که این باعث می شود هزینه لود داده ها برای کاربران شما بالاتر شود و زمان بارگیری کاهش یابد.

چگونه می توان از نظر فنی اندازه DOM را کاهش داد؟

از نظر فنی برای رفع خطای Reduce the number of DOM elements در وردپرس و کاهش اندازه DOM می توان موارد مختلفی را انجام داد به عنوان مثال می توان کد زیر را وارد کنید:

<ul id="navigation-main">

    etc..

</ul>

کد بالا را به جای کد زیر استفاده کنید:

<div id="navigation-main">

    <ul>

        etc..

    </ul>

</div>

اصولاً با انجام این کار شما دیگر از عناصر مختلف در HTML  می توانید استفاده نکنید. همچنین می توانید از Flexbox یا Grid برای کاهش بیشتر اندازه DOM استفاده کنید. اما از آنجا که شما از وردپرس استفاده می کنید ، این کار به شما کمک زیادی نمی کند! سوال اصلی اینجا می باشد که چگونه می توان این سایز را در داخل وردپرس کاهش داد.

رفع خطای Reduce the number of DOM elements در وردپرس

برای کاهش دادن سایز آن و رفع خطای Reduce the number of DOM elements در وردپرس می توان موارد زیر را انجام داد:

  • صفحات بزرگ را به چندین صفحه کوچک تقسیم کنید.

اگر شما هم جزو ان افرادی هستید که در سایتتان صفحات بسیار زیادی بدون دسته بندی مشخص دارید قطعا باید آن را تغییر دهید. به عنوان مثال صفحات  خدمات ، فرم های تماس ، محصولات ، پست های وبلاگ ، توصیفات ، و غیره را سعی کنید به چندین صفحه تقسیم کرده و از سرصفحه / نوار به آن ها لینک دهید. این موضوع هم باعث می شود که کاربران راحت تر در صفحات شما پیمایش کنند و هم باعث می شود که سایز DOM شما به شدت کاهش بیابد.

  • برای بارگذاری موارد مختلف از ابزارهایی استفاده کنید که کند تر اینکار را انجام دهند.

به عنوان مثال برای بارگذاری ویدیو های یوتیوب می توانید از ابزار  WP YouTube Lyte یا افزونه WP Rocket  استفاده کنید زیرا در اغلب موارد سرعت لود صفحه به خاطر ویدیو ها و یا برخی تصاویر کاهش می یابد.

  • تعداد پست ها ، نوشته ها و یا محصولات در وبلاگ خود و در هر صفحه را محدود کنید.

سعی کنید که حداکثر 10 پست وبلاگ در هر صفحه داشته باشید و بقیه آن ها را به صورت صفحه ای و یا از طریق لینک دادن تنظیم کنید.

  • بارگذاری پست ها / محصولات وبلاگ به صورت کند

 برای بارگذاری پست ها و یا محصولات وبلاگ ، دکمه “موارد بیشتر” و یا پیمایش بی نهایت را اضافه کنید و تمامی ان ها را نمایش ندهید.

  • برای نظرات از ابزار های بارگذاری کند استفاده کنید.

برای انجام این کار می توانید از Disqus استفاده کنید ، با استفاده از Disqus ، شما می توانید قسمت نظرات را کندتر لود و بارگذاری کنید تا سایز DOM کاهش پیدا کند و خطای Reduce the number of DOM elements رفع شود. همچنین می توانید از افزونه هایی مانند Lazy Load for Comments استفاده کنید .

اگر در صفحات خود صدها نظر دارید ، این نیز می تواند بر اندازه DOM تأثیر بگذارد. شما همچنین می توانید با رفتن به قسمت نظرات در تنظیمات و تقسیم آن ها به صفحات مختلف آن ها را دسته بندی کرده و سرعت بارگذاری را افزایش دهید.

  • تعداد پست های مرتبط را محدود کنید.رفع خطای Reduce the number of DOM elements

سعی کنید تعداد پست های مرتبط را به 3 یا  4 محدود کنید زیرا داشتن تعداد بیشتری از آن ها سایز DOM  را افزایش می دهد و باعث بروز خطای Reduce the number of DOM elements می شود.

  • با استفاده از CSS عناصر ناخواسته را پنهان نکنید.

در برخی موارد ممکن است لازم باشد عناصر تزریق شده توسط قالب و یا افزونه ها و … را حذف کنید. به عنوان مثال ، دکمه سبد خرید را در صفحات محصول ، دکمه رتبه بندی ، اطلاعات نویسنده ، تاریخ انتشار و غیره اضافه کنید. با حذف کردن این موارد می توانید سرعت را بهبود بدهید. یک راه حل سریع پنهان کردن آنها با استفاده از CSS می تواند وارد کردن کد زیر باشد:

 

.cart-button {

  display:none;

}

این راه حل بسیار ساده و آسان به نظر می رسد و شما می توانید کد ناخواسته ای را که به کاربران ارائه می دهید ( که شامل هر دو نشانه گذاری HTML و سبک های  CSS می باشد. ) را حذف کنید. همچنین شما می توانید تنظیمات قالب و یا پلاگین های خود را نیز بررسی کنید تا ببینید آیا گزینه ای برای حذف آن وجود دارد. در غیر این صورت ، کد PHP مربوطه را پیدا کرده و آن ها را حذف کنید.

  • از قالب ها و صفحه سازهای کاملاً کدگذاری شده استفاده کنید.

استفاده از یک قالب خوب نقش اصلی در اندازه DOM دارد. از قالب های کدگذاری شده خوبی مانند قالب GeneratePress و  یا آسترا استفاده کنید . جالب است بدانید که اغلب صفحه سازها بیش از حد تقسیم بندی می کنند. از سازندگانی مانند المنتور استفاده کنید که تقسیمات ناخواسته را انجام نمی دهند و کنترل بیشتری بر ساختار HTML دارد.

نتیجه گیری

در نهایت پس از بررسی کردن موارد گفته شده در بدون شک می توانید سایز DOM  سایتتان را کاهش دهید و خطای Reduce the number of DOM elements را برطرف کنید. با این حال ممکن است افزونه ها و یا تنظیمات مربوط به قالب ها بیشتری وجود داشته باشد که بیش از حد صفحات و عناصر را تقسیم بندی می کنند. برای جلوگیری از این تقسیم بندی ها می توانید از ابزار های مختلفی به عنوان مثال افزونه های “mega menu” مانند UberMenu  استفاده کنید.

در اغلب اوقات این موارد برای بهبود تجربه کاربری وب سایت شما بسیار مهم هستند و تاثیر مستقیمی بر ترافیک ورودی سایت شما خواهد گذاشت. گاهی اوقات این موارد مختلف هرگز توسط کاربران مشاهده نمی شوند. شاید پیوندهای فوتر شما هرگز کلیک نشود زیرا بیشتر بازدیدکنندگان فقط تا 75٪ از صفحه شما را پیمایش و یا اسکرول  می کنند.

از ابزارهایی مانند HotJar یا Google Analytics events استفاده کنید تا ببینید بازدید کنندگان در واقع از چه چیزی استفاده می کنند و از چه مواردی استفاده نمی کنند. برای موفق شدن در این زمینه و رفع خطای Reduce the number of DOM elementsشما باید موارد  مختلفی را تجزیه و تحلیل کرده و در نهایت در صورتی که نتوانستید مشکل را پیدا کنید دوباره این چرخه را تکرار کرده تا این خطا را رفع کنید.

دیدگاه‌ها

Comments
  • محمد

    سلام وقت بخیر . من این مشکل دارم و dom.js حدود 3.35 ثانیه زمان میبرد درحالیکه سایر عناصر در حد میلی ثانیه هستند .( این موضوع در صفحه اصلی سایت در مرورگر کروم و راست کلیک inspect و زبانه network بدست آوردم .) در سایت از المنتور و جت انجین برای محتوای داینامیک استفاده میکنم . مشکلی که دارم کندی بسیار زیاد طراحی یک صفحه با المنتور هست . بنظر شما مشکل من همین dom.js هست ؟ البته سایت در بخش فرانت اند سرعت لود خوبی داره و فقط در داشبورد اونم قسمت های طراحی بسیار کند و عذاب آور هست

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *