10 راهکار برای رفع خطای Avoid an excessive DOM size

 آموزش افزایش سرعت سایت |  ۱۴۰۲/۵/۸

اگه به دنبال افزایش سرعت سایتتون هستید حتما در ابزارهای تست سرعت سایت با خطای Avoid an excessive DOM size روبرو شدید. رفع این خطا کار ساده‌ای نیست ولی با راهکارهایی که در این مقاله بررسی می‌کنیم تا حد زیادی میتونید این خطا رو کاهش بدید. در این مقاله از میزفا تولز با DOM چیست و مواردی که باعث افزایش حجم DOM می‌شوند، آشنا میشید و در نهایت یاد می‌گیرید تا با 7 راهکار کاربردی این خطا رو رفع کنید. همراه ما باشید.

DOM چیست؟

تا حالا تست سرعت سایت وردپرسی‌تون رو گرفتین و با هشدار «Avoid an excessive DOM size» مواجه شدین؟

این پیغام معمولا توی ابزارهای تست سرعت مثل Google Lighthouse، ابزار PageSpeed Insights ، ابزار GTMetrix یا ابزار واکاوی میزفا تولز. نشون داده میشه. معنی‌ش اینه که سایتتون المنت‌های خیلی زیادی داره و همین باعث میشه سرعت بارگذاری بیاد پایین.

هر بار که مرورگر یه فایل HTML رو می‌گیره، میاد همه‌ی بخش‌هاشو تبدیل می‌کنه به یه ساختار درختی. این ساختار لازمه تا بتونه درست نمایش داده بشه و CSS و جاوااسکریپت و بقیه المان‌ها روی صفحه کار کنن. به این ساختار درختی می‌گن DOM (Document Object Model).

سایت‌ها از بخش‌های مختلفی مثل عکس‌ها، جدول‌ها، فرم‌ها و کلی چیز دیگه تشکیل شدن. برای اینکه این بخش‌ها بتونن بارگذاری بشن، مرورگر همه‌چی رو تو همین ساختار درختی یا همون DOM می‌چینه.

اصطلاحات مربوط به DOM

• Nodes: هر عنصر در DOM یک Node یا برگ درخت نامیده می‌شه.
• Depth: به طول شاخه‌ای که در درخت طی می‌شه، Depth می‌گن.
• Child Element: به آخرین Node که دیگر منشعب نمیشه، Child Element میگن.

حالا که با اصطلاحات DOM آشنا شدید باید بدونید که اگر در یک DOM شرایط زیر رخ دهد، با خطای Avoid an excessive DOM size  روبرو خواهید شد. 

• اگر مجموع تعداد Nodes های موجود بیشتر از 1500 باشه.
• اگر Depth بیشتر از  32 عدد Nodes باشه.
• اگر Child Nodes بیش از 60 باشه.

چگونه عملکرد وب‌سایت تحت تأثیر اندازه DOM قرار می‌گیرد؟

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

در ادامه مهم‌ترین دلایل منفی بودن سایز بالای DOM رو مرور می‌کنیم:

1. افزایش زمان تجزیه و رندر
   مرورگر باید ساختار DOM رو بخونه و مرتب محاسبه کنه که هر عنصر کجا قرار بگیره و چه استایلی داشته باشه. هرچه درخت DOM بزرگ‌تر باشه، این محاسبات پیچیده‌تر و کندتر میشن.
2. فشار روی حافظه دستگاه کاربر
   یک DOM سنگین مصرف حافظه بیشتری روی گوشی یا لپ‌تاپ کاربر داره. این موضوع به‌خصوص روی دستگاه‌های ضعیف‌تر، به‌شدت باعث کندی میشه.
3. افت عملکرد جاوااسکریپت
   وقتی DOM بیش از حد بزرگ باشه، کوئری‌ها و اسکریپت‌های جاوااسکریپت برای دسترسی یا تغییر دادن عناصر صفحه باید کار بیشتری انجام بدن. این باعث رندر کندتر و تعامل ضعیف‌تر با کاربر میشه.
4. افزایش زمان TTFB (Time To First Byte)
   TTFB مدت‌زمانیه که طول می‌کشه مرورگر اولین بایت پاسخ رو از سرور دریافت کنه. وقتی DOM خیلی بزرگ باشه، یعنی فایل HTML حجیم‌تره و داده‌های بیشتری باید منتقل بشه. در نتیجه، TTFB هم بالا میره.
5. افزایش زمان FCP (First Contentful Paint)
   خطای FCP نشون میده اولین المان‌های بصری صفحه چه زمانی روی صفحه ظاهر میشن. DOM بیش از حد بزرگ باعث تأخیر توی این فرآیند میشه.

📌 در یک جمله ساده: هرچی DOM سایتتون بزرگ‌تر باشه، مرورگر باید بیشتر تلاش کنه، کاربر بیشتر منتظر بمونه و در نهایت گوگل هم کمتر از سایت شما خوشش میاد.

چطور DOM سایت خودمون رو اندازه گیری کنیم؟

برای این مورد کافی هست وارد ابزار میزفا تولز بشید و داخل پنل در بخش ابزار واکاوی-> روی گزینه واکاوی صفحه کلیک کنید، میتونید سایت خودتون رو با لوکیشن ایران و یا خارج از ایران رصد کنید.

1. وارد واکاوی صفحه میزفا تولز بشید
2. تو بخش تب تاریخچه، آدرس صفحه‌ای که می‌خواین بررسی بشه رو وارد کنین و واکاوی رو اجرا کنین.
3. بعد از اتمام واکاوی، به تب سرعت برید تا خطاها و شاخص‌های مرتبط با سرعت صفحه رو ببینین.
4. وضعیت DOM رو بررسی کنین
   خطای DOM اینجا مشخصه و با رنگ‌های متفاوت نمایش داده میشه. مثلاً اگه رنگش قرمز باشه یعنی وضعیت DOM صفحه مشکل داره و نیاز به بهینه‌سازی داره.

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

رفع ارور Avoid an excessive DOM size

راه اصلی اینه که تعداد nodeهای DOM سایتتونو کم کنین.

• فقط وقتی واقعا نیاز هست node بسازین
• اگه بهش نیاز ندارین، حذفشون کنین

البته این کار همیشه آسون نیست و بعضی وقتا لازمه کل کدها رو بازنویسی کنین تا سایت سبک و بهینه بشه. ولی نگران نباشین، تو ادامه راهکارهای ساده‌تر و عملی رو با هم بررسی می‌کنیم.

1. فشرده‌سازی (Minify) فایل‌های CSS و JavaScript

عملکرد و ظاهر سایت شما وابسته به فایل‌های CSS و JavaScript هست. اما اگه این فایل‌ها به‌درستی بهینه نشن، می‌تونن اندازه DOM سایت رو بزرگ کنن و سرعت لود رو پایین بیارن.

Minify چیکار می‌کنه؟

• کدهای اضافی مثل کامنت‌ها، فاصله‌ها و خط‌های خالی رو حذف می‌کنه.
• نتیجه: حجم فایل‌ها کمتر میشه، سایت سریع‌تر لود میشه و DOM سبک‌تر میشه.

⚠️ نکته: گاهی اوقات فشرده‌سازی ممکنه با بعضی قالب‌ها یا افزونه‌ها ناسازگار باشه.

راهکار ایمن:

1. قبل از فشرده‌سازی، یک بکاپ از سایت بگیرین.
2. تغییرات رو بهتره اول تو سایت staging یا لوکال تست کنین تا مشکلی تو سایت اصلی پیش نیاد.

2- از صفحه سازهای خوب کدگذاری شده استفاده کنید.

صفحه‌سازها کار ساخت سایت رو خیلی راحت می‌کنن و برای خیلی‌ها جزو جدایی‌ناپذیر فرآیند طراحی سایت شدن. ولی مشکل اینجاست که بعضی صفحه‌سازها کدهایی با تعداد زیادی node DOM تولید می‌کنن. معمولاً با تزریق بیش از حد تگ‌های div این کار رو انجام میدن.

راه حل:

حتما از جدیدترین نسخه صفحه‌ساز استفاده کنین تا مشکلات قدیمی رفع شده باشه و DOM سبک‌تر بمونه.

اگه از صفحه‌ساز استفاده می‌کنین، تغییرات لازم رو برای بهبود ساختار DOM سایت انجام بدین.

می‌تونین مستقیم به HTML سایت دسترسی داشته باشین و کدها رو دستی ویرایش کنین.

۳- متن رو مستقیم تو ویرایشگر WYSIWYG کپی/پیست نکنین

بیشتر ویرایشگرهای WYSIWYG نمی‌تونن کدهایی که با متن کپی می‌کنین رو خوب پاک کنن. حتی اگه متن رو از یه برنامه مثل Microsoft Word بیارین، وقتی پیست می‌کنین، همراه با استایل‌ها و فرمت‌هاش وارد سایت میشه. این کار می‌تونه تعداد زیادی گره DOM اضافه کنه و صفحه رو سنگین کنه.

برای اینکه این مشکل پیش نیاد، دو تا گزینه دارین:

1. متن رو مستقیم تو ویرایشگر پیست نکنین.
2. از گزینه Paste as Plain Text استفاده کنین تا فقط متن ساده وارد بشه.

اگه ویرایشگر شما اجازه میده، بعد از پیست کردن هم می‌تونین از ابزارهای پیشرفته پاک کردن کد اضافی استفاده کنین تا DOM سبک بمونه.

۴. بهینه‌سازی تصاویر و ویدئوها

تصاویر و ویدئوهای بهینه‌نشده معمولا حجم زیادی دارن (سایت برای کاهش حجم عکس). این فایل‌های بزرگ می‌تونن باعث افزایش DOM size بشن، چون مرورگر باید المان‌های بیشتری رو پردازش کنه.

بهینه‌سازی تصاویر می‌تونه حجم فایل‌ها رو بدون کاهش کیفیت کم کنه، که باعث میشه سایت سریع‌تر لود بشه و تجربه کاربری بهتر بشه (سئو عکس).

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

صفحات خیلی بزرگ می‌تونن تعداد nodeهای DOM رو بالا ببرن و سرعت سایت رو کم کنن.

• سایت تک صفحه‌ای فقط وقتی خوبه که هدفش معرفی کسب‌وکار شما باشه.
• تو یه صفحه نباید همه چیز باشه؛ یعنی خدمات، فرم تماس، محصولات، مقالات وبلاگ و… همگی با هم نباشن.

6- از lazy load و صفحه بندی استفاده کنید

وقتی یه صفحه طولانی با محتوای زیاد باز می‌کنین، معمولا همه المان‌ها یه‌جا لود می‌شن. این کار مخصوصا روی اینترنت‌های کند زمان زیادی می‌بره.

Lazy Loading یه روش هوشمندتره. این ویژگی، لود کردن المان‌های غیرضروری مثل عکس‌ها و ویدئوها رو به تعویق می‌اندازه. این المان‌ها فقط وقتی لود می‌شن که کاربر واقعا بهشون برسه و صفحه رو اسکرول کنه.

نتیجه‌ش چیه؟

• محتوای اصلی صفحه (مثل متن و چیدمان) سریع‌تر لود میشه.
• بارگذاری اولیه صفحه سریع‌تر و تجربه کاربری نرم‌تر میشه.

💡پیشنهاد مطالعه از مجموعه مقالات آموزش تخصصی سئو:

 ➕لود تنبل چیست؟

✅ از WP YouTube Lyte یا Lazy Load که توسط WP Rocket ارائه میشه برای بارگذاری تنبل ویدیوهای یوتیوب استفاده کنید.

✅ در هر صفحه، تعداد پست‌های بلاگ یا محصولات رو محدود کنید و بقیه رو صفحه بندی کنید. تعداد ترجیحی مقاله یا محصول در هر صفحه 10 عدد است.

✅ برای لود محصولات یا پست‌های بیشتر از دکمه «بارگذاری بیشتر» استفاده کنید.

✅راه‌اندازی Lazy Loading تو وردپرس

اگه از یه افزونه بهینه‌سازی سرعت مثل WP Rocket استفاده می‌کنین، کار خیلی راحت‌تره:

1. برید به Settings » WP Rocket تو داشبورد وردپرس.
2. وارد تب Media بشید.
3. همه گزینه‌های مربوط به فعال کردن Lazy Loading برای تصاویر، ویدئوها و iFrameها رو تیک بزنین.

7- صفحه‌بندی یا پجینیشن کردن مطالب و نظرات طولانی

پست‌ها یا بخش نظرات خیلی طولانی معمولاً DOM زیادی تولید می‌کنن و سرعت سایت رو پایین میارن. اینجا Pagination یا همون صفحه‌بندی خیلی به کار میاد.

• صفحه‌بندی چیکار می‌کنه؟
  محتوا رو به بخش‌های قابل مدیریت تقسیم می‌کنه و باعث میشه کاربر راحت‌تر بخونه و مطالب رو هضم کنه.
• برای مقالات طولانی:
  اگه مقاله‌های مفصل می‌نویسین، بهتره با صفحه‌بندی اون‌ها رو به بخش‌های منطقی تقسیم کنین. اینطوری خواننده می‌تونه بین بخش‌ها استراحت کنه و از دیدن یه دیوار بزرگ از متن ترسناک نشه.
  • تو ویرایشگر بلوکی وردپرس، می‌تونین از Page Break برای تقسیم پست‌ها استفاده کنین.
• برای نظرات طولانی:
  تو بخش Settings » Discussions تو پیشخوان وردپرس، گزینه Break comments into pages رو فعال کنین و تعداد نظرات هر صفحه رو مشخص کنین. اینطوری DOM صفحه سبک‌تر میشه و سرعت بهتر میشه.
• نکته: از Infinite Scroll زیاد استفاده نکنین. هرچند ممکنه کاربران مدت بیشتری تو سایت بمونن، اما فشار زیادی به سرور وارد می‌کنه و باعث کند شدن سایت میشه.

8- عناصر اضافی رو با display:none پنهان نکنین

خیلی وقت‌ها از display:none برای پنهان کردن عناصر با جاوااسکریپت یا CSS استفاده می‌کنن تا بدون حذف، فقط مخفی بشن.
اما مشکل چیه؟

• این المان‌ها هنوز تو کدهای سایت هستن و مرورگر باید اونا رو لود کنه.
• نتیجه: سرعت سایت پایین میاد.

راه حل: به جای مخفی کردن، کدهای اضافی رو حذف کنین تا حجم صفحه کم بشه و DOM سبک بمونه.

۷- از اعلان‌های پیچیده CSS و JavaScript استفاده نکنین

مخصوصاً وقتی تعداد زیادی گره DOM دارین، بهتره از این نوع کدها صرف نظر کنین تا سایت سبک و سریع بمونه

استفاده از CSS و JS پیچیده باعث میشه حافظه بیشتر مصرف بشه و سایت کند بشه.

9- از افزونه‌ها و تم‌هایی که به خوبی کدگذاری نشده‌اند، استفاده نکنید

استفاده از افزونه‌ها و قالب‌های ناسالم یا قدیمی می‌تونه اندازه DOM سایتت رو بالا ببره و سرعت و عملکرد کلی سایت رو خراب کنه. حتماً چک کنین که آخرین آپدیتشون کی بوده و از افزونه یا قالب قدیمی استفاده نکنین.

نسخه‌های رایگان معمولاً عملکرد خوبی ندارن و ممکنه دردسر ایجاد کنن. هیچ وقت هم از نسخه کرک‌شده قالب‌های پولی استفاده نکنین؛ چون ممکنه شامل اسکریپت‌های مخرب باشه و به سایت شما آسیب بزنه.

10- هر عنصر غیرضروری قالب وردپرس رو حذف کنین

بعضی از بخش‌هایی که به‌طور پیش‌فرض با قالب وردپرس میان، مثل:

• دکمه «افزودن به سبد خرید» تو صفحات محصول
• تاریخ انتشار
• اطلاعات نویسنده

ممکنه بعضی وقت‌ها بهشون نیاز نداشته باشین و بهتره حذف بشن.

اگه تو تنظیمات قالب گزینه‌ای برای حذف ندارین، می‌تونین دنبال کد PHP مناسب برای حذف این المان‌ها بگردین.

همین امروز خطای Avoid an excessive DOM size رو برطرف کنید

حالا که فهمیدین DOM اضافی چقدر می‌تونه سرعت و تجربه کاربری سایتتون رو خراب کنه، وقتشه دست به کار شین!

• المان‌های اضافی رو حذف کنین و صفحاتتون رو سبک نگه دارین
• از ابزارهایی مثل Google Analytics یا HotJar برای فهمیدن اینکه کاربر واقعاً چی استفاده می‌کنه کمک بگیرین
• نتیجه؟ سایت سریع‌تر، کاربران راضی‌تر و رتبه بهتر تو گوگل!

رفع این خطا شاید اولش سخت باشه، اما تأثیرش خیلی بالاست. برای یادگیری کامل و قدم‌به‌قدم، مقالات آموزش سئوی میزفا تولز رو دنبال کنین.
همین حالا سایتتون رو بررسی کنین و ببینین چند درصد آمادگی دارین تا این خطا رو برطرف کنین. موفق باشین! ✌️