یکی از خطاهای رایج در GTmetrix که معمولاً کاربران ایرانی به دلیل استفاده از قالب‌های آماده وردپرس با آن مواجه می‌شوند، تحت عنوان “Reduce the number of DOM elements” در YSlow نمایش داده می‌شود. این مشکل به تعداد و نوع المان‌های موجود در یک صفحه وب مرتبط است. در ادامه رفع خطای Reduce the number of DOM elements در GTmetrix را آورده‌ایم به این منظور در ادامه با ما همراه باشید.
DOM، که مخفف Document Object Model است، اشیاء و عناصر مختلف موجود در یک صفحه را شامل می‌شود که به صورت HTML قابل دسترسی هستند. این اشیاء شامل مواردی چون فرم‌ها، دکمه‌ها، چک‌باکس‌ها و سایر المان‌هایی است که، برای ایجاد تجربه کاربری مناسب در وب‌سایت استفاده می‌شوند.
ساختار DOM به صورت یک الگوی درختی تنظیم شده است؛ اعضای آن از ریشه تا انتها ادامه دارند و نهایتاً بستر کلی طراحی وب‌سایت را تشکیل می‌دهند. برای افزایش سرعت سایتتان می‌توانید آموزش رفع خطای Minify JavaScript در GTmetrix را در هاست ایران مطالعه کنید.
DOM چیست؟
زمانی که مرورگر یک سند HTML دریافت می‌کند، باید این سند به یک ساختار درخت شکل تبدیل شود. این موضوع برای کمک به CSS و JavaScript برای رندر در نظر گرفته شده است. این ساختار به عنوان درخت DOM یا Document Object Model شناخته می‌شود. در واقع، Document Object Model)DOM) یک رابط و ساختار برنامه‌نویسی است که برای HTML معتبر و اسناد XML طراحی شده است. این مدل به توصیف ساختار منطقی مدارک و روش‌های دسترسی به آن‌ها می‌پردازد.
XML به عنوان یک روش جهت نمایش انواع متنوع اطلاعات که در سیستم‌های مختلف ذخیره می‌شوند مورد استفاده قرار می‌گیرد. XML این داده‌ها را به عنوان اسناد ارائه می‌دهد و از مدل شیء گرافیکی (DOM)، برای مدیریت این اطلاعات کمک می‌گیرد.
اندازه DOM چه تاثیری بر عملکرد سایت دارد؟
اندازه بیش از حد DOM می‌تواند تأثیرات منفی روی عملکرد وب‌سایت داشته باشد. افزایش تعداد عناصر موجود در صفحه، نظیر عناوین، پیوندها، بخش‌ها و پاراگراف‌ها، منجر به کاهش سرعت بارگذاری صفحات و افزایش اندازه DOM خواهد شد. یک ساختار بزرگ DOM ممکن است به طرق مختلفی کارایی صفحه شما را تحت تاثیر قرار دهد. برخی از این موارد عبارتند از:
افزایش زمان تجزیه و رندر
وجود یک درخت بزرگ DOM، چالش‌های قابل توجهی را برای مرورگرها ایجاد می‌کند. چون مرورگر موظف است HTML را تجزیه کرده و درخت رندر را بسازد. در نتیجه، هر بار که کاربران با عناصر مختلف تعامل دارند یا تغییری در HTML به وجود می‌آید، مرورگر ناچار است محاسبات مربوطه را دوباره انجام دهد. در نهایت، این فرایند بر کارایی سایت تأثیرگذار خواهد بود. زمانی که کاربران و اسکریپت‌ها با وب‌سایت شما تعامل می‌کنند، مرورگر به طور مداوم باید موقعیت و وضعیت گره‌های مختلف را محاسبه کند. این فرآیند موجب می‌شود که وجود یک درخت بزرگ DOM همراه با قوانین سبک پیچیده، سرعت بارگذاری صفحه را به طور قابل توجهی کاهش دهد.
افزایش میزان استفاده از حافظه
کد JavaScript ممکن است شامل عملکردهایی برای دسترسی به عناصر DOM باشد و منجر به مصرف بیشتر حافظه جهت پردازش این عناصر شود. این امر می‌تواند به طور قابل توجهی ظرفیت حافظه دستگاه‌های کاربران شما را کاهش می‌دهد و منجر به بروز خطای “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 استفاده کنید؛ زیرا در بسیاری از موارد، سرعت بارگذاری صفحه به دلیل وجود ویدیوها و برخی تصاویر کاهش می‌یابد. برای بارگذاری ویدئوهای آپارات و… نیز افزونه‌های مناسب جهت استفاده در دسترستان هستند، تا بتوانید سرعت اجرای صفحه را بهبود دهید.
محدود کردن تعداد پست‌ها، نوشته‌ها و محصولات در صفحه
حداکثر ۱۰ پست وبلاگ را در هر صفحه قرار دهید و باقی‌مانده آن‌ها را به صورت صفحات جداگانه نمایش داده یا از طریق لینک‌دهی مدیریت کنید.
بارگذاری پست‌ها، محصولات وبلاگ به صورت کند
دکمه »موارد بیشتر» یا گزینه پیمایش بی‌نهایت را برای بارگذاری پست‌ها و محصولات وبلاگ اضافه کنید، تا بارگذاری و نمایش تمامی آن‌ها به طور همزمان انجام نشود.
بارگذاری نظرات به صورت مدیریت شده
برای این منظور، پیشنهاد می‌شود از Disqus استفاده نمایید. با بهره‌گیری از Disqus، قادر خواهید بود که بارگذاری و سرعت نمایش بخش نظرات را بهینه کنید؛ این اقدام کمکتان خواهد کرد تا اندازه DOM را کاهش داده و خطای “Reduce the number of DOM elements” برطرف کنید. همچنین، می‌توانید از افزونه‌هایی همانند Lazy Load for Comments نیز برای مدیریت بارگذاری نظرات استفاده کنید.
پنهان کردن عناصر با استفاده از CSS
ممکن است نیاز باشد که عناصر افزوده شده توسط قالب، پلاگین‌ها یا سایر منابع را حذف کنید. به عنوان مثال، این موارد می‌توانند شامل دکمه سبد خرید در صفحات محصول، دکمه‌های رتبه‌بندی، اطلاعات نویسنده و تاریخ انتشار باشند. با حذف این عناصر، امکان بهبود سرعت بارگذاری وب‌سایت وجود دارد. یکی از روش‌های سریع برای پنهان کردن این موارد استفاده از CSS است. شما می‌توانید کد زیر را وارد کنید.
.cart-button {
display:none;
}
این راه‌حل به نظر بسیار ساده و کارآمد می‌رسد. شما می‌توانید کد ناخواسته‌ای را که به کاربران ارائه می‌دهید، شامل نشانه‌گذاری HTML و استایل‌های CSS، حذف کنید. همچنین توصیه می‌شود تنظیمات قالب یا افزونه‌های خود را جهت پیدا کردن گزینه‌ای برای حذف این کدها بررسی کنید.. در غیر این صورت، لازم است تا کدهای PHP مربوطه را شناسایی کرده و آن‌ها را حذف کنید.
استفاده از قالب‌ها و صفحه سازهای مناسب
استفاده از یک قالب بهینه، نقش حیاتی در اندازه DOM ایفا می‌کند. توصیه می‌شود از قالب‌های کد نویسی شده با کیفیت، نظیر GeneratePress یا Astra، استفاده کنید؛ زیرا بسیاری از صفحه سازها به طور غیرضروری عناصر را تقسیم‌بندی می‌کنند. استفاده از صفحه سازهایی مانند Elementor که ساختار HTML را بهتر مدیریت کرده و تقسیم‌بندی‌های ناخواسته انجام نمی‌دهند نیز، گزینه مناسبی برای پیشگیری از وقوع این خطا است.
نتیجه‌گیری
تقسیم‌بندی بیش از حد صفحات سایت توسط افزونه‌ها و تنظیمات قالب موجب می‌شود که سرعت سایت کاهش پیدا کند. برای کاهش سایز DOM و رفع خطای Reduce the number of DOM elements در GTmetrix می‌توانید ابزارهای مختلفی مانند افزونه مگا منو استفاده کنید.
با این روش و مواردی مانند بارگذاری کامنت‌ها و تصاویر با تأخیر می‌توانید سرعت سایتتان را بهینه کرده و بارگذاری المان‌های اضافی را به تعویق بیندازید. هرچقدر المان‌های موجود در صفحات و سی اس اس که در بارگذاری اولیه می‌شوند را کاهش دهید، سرعت سایتتان بیشتر خواهد شد.
سؤالات متداول+ جواب
خطای “Reduce the number of DOM elements” به چه معناست؟
- این خطا نشان‌دهندهٔ وجود تعداد بیش از حد عناصر در ساختار DOM صفحه وب شما است. این وضعیت می‌تواند به کاهش سرعت بارگذاری و عملکرد کلی صفحه منجر شود.
چرا تعداد زیاد عناصر DOM برای عملکرد سایت مشکل‌ساز است؟
- تعداد بالای عناصر DOM می‌تواند منجر به افزایش پیچیدگی در فرآیند پردازش صفحه توسط مرورگر شود. این امر در زمان بارگذاری صفحات را افزایش داده و تجربه کاربری را تحت تاثیر قرار می‌دهد.
آیا استفاده از فریم‌ورک‌های جاوا اسکریپت باعث افزایش عناصر DOM می‌شود؟
- برخی از فریم‌ورک‌های جاوا اسکریپت ممکن است به طور خودکار تعداد زیادی عنصر DOM را تولید کنند. برای کاهش تأثیر این موضوع، می‌توانید اقدام به بهینه‌سازی فریم‌ورک‌ها کرده، یا از روش‌های دیگر برای پیاده‌سازی بخ مد نظرتان استفاده کنید.
