چگونه اندازه DOM بیش از حد را در وردپرس کاهش دهیم؟

هشدار “اجتناب از اندازه DOM بیش از حد – Avoid an excessive DOM size 2,171 elements“ ممکن است در ابزارهای تست سرعت وب‌سایت مانند Google Lighthouse، Google PageSpeed Insights یا GTMetrix ظاهر شود. این هشدار نشان می‌دهد که وب‌سایت شما عناصر زیادی دارد که می‌توانند زمان بارگذاری را کند کنند و باعث نارضایتی بازدیدکنندگان شوند.

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

DOM چیست و چرا اندازه آن اهمیت دارد؟

DOM (Document Object Model) ساختار صفحات وب‌سایت شما را به شکل درختی از عناصر توصیف می‌کند. هر عنصر در صفحه شما (مانند عناوین، تصاویر، منوها و دکمه‌ها) به‌عنوان یک شاخه یا برگ در این درخت در نظر گرفته می‌شود. به هر کدام از این عناصر گره (Node) گفته می‌شود.

اندازه DOM به مجموع تعداد گره‌ها در ساختار درختی وب‌سایت اشاره دارد. هرچه تعداد عناصر بیشتر باشد، اندازه DOM نیز بزرگ‌تر می‌شود.

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

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

این تأخیر در بارگذاری می‌تواند باعث کاهش تجربه کاربری و افزایش نرخ پرش شود. علاوه بر این، موتورهای جستجو مانند گوگل، وب‌سایت‌هایی با تجربه کاربری خوب و سرعت بارگذاری بالا را اولویت می‌دهند؛ بنابراین، یک DOM بزرگ می‌تواند به‌طور غیرمستقیم بر SEO و نرخ تبدیل سایت شما نیز تأثیر منفی بگذارد.

تعداد عناصر DOM مناسب برای گوگل چقدر است؟

گوگل محدودیت دقیقی برای تعداد عناصر DOM تعیین نکرده است، اما ابزارهایی مانند Google Lighthouse و دیگر ابزارهای تست سرعت، برای سایت‌هایی با اندازه DOM بیش از حد هشدار می‌دهند. در اینجا نحوه عملکرد این هشدارها آورده شده است:

• هشدار: اگر تعداد گره‌های DOM در عنصر body صفحه شما بیش از حدود 800 گره باشد، Google Lighthouse یک هشدار نمایش می‌دهد.
• خطا: اگر تعداد گره‌ها به بیش از 1,400 گره برسد، Lighthouse یک خطا نشان می‌دهد.

چه نوع سایت‌هایی ممکن است به این دسته‌ها بیفتند؟

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

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

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

روش‌های کاهش اندازه DOM size در وردپرس

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

1. استفاده از پلاگین‌های بهینه‌سازی سرعت وردپرس
   از پلاگین‌هایی مانند WP Rocket یا Perfmatters برای بهینه‌سازی سرعت سایت بهره ببرید.
2. بررسی قالب و پلاگین‌ها
   از قالب‌ها و پلاگین‌های سبک و بهینه استفاده کنید؛ چرا که برخی قالب‌ها و پلاگین‌ها عناصر DOM اضافی تولید می‌کنند که سایت شما را سنگین می‌کنند.
3. استفاده از سازنده صفحه بهینه‌شده
   از سازنده‌های صفحه سبک مانند GenerateBlocks یا Elementor (در حالت بهینه) استفاده کنید.
4. بهینه‌سازی تصاویر و ویدیوها
   تصاویر و ویدیوهای خود را فشرده و بهینه کنید تا زمان بارگذاری کاهش یابد.
5. اجرای Lazy Loading
   با فعال کردن Lazy Loading، تصاویر و ویدیوها فقط زمانی بارگذاری می‌شوند که کاربر به آن‌ها نزدیک شود.
6. صفحه‌بندی نظرات یا پست‌های با محتوای زیاد
   اگر تعداد نظرات یا محتوای یک پست زیاد است، از صفحه‌بندی استفاده کنید.
7. کوچک‌سازی فایل‌های CSS و JavaScript
   فایل‌های CSS و JavaScript خود را minify کنید تا حجم کد کاهش یابد.
8. کاهش JavaScript و CSS مسدودکننده رندر
   کدهای JavaScript و CSS مسدودکننده را به حداقل برسانید تا سرعت بارگذاری افزایش یابد.
9. فعال‌سازی کشینگ وردپرس
   از کشینگ وردپرس برای افزایش سرعت بارگذاری سایت استفاده کنید.
10. استفاده از CDN وردپرس
    از شبکه تحویل محتوا (CDN) برای توزیع محتوای سایت و افزایش سرعت استفاده کنید.
11. بهینه‌سازی دیتابیس وردپرس
    دیتابیس وردپرس خود را پاک‌سازی و بهینه کنید تا حجم آن کاهش یابد و عملکرد سایت بهتر شود.

1. استفاده از پلاگین بهینه‌سازی سرعت وردپرس

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

WP Rocket یکی از بهترین پلاگین‌های موجود است که توسط وب آنجل نیز استفاده می‌شود. این پلاگین که به‌عنوان پلاگین کش شناخته می‌شود، ویژگی‌هایی نظیر بهینه‌سازی فایل‌ها، بارگذاری تنبل (Lazy Loading) و تاخیر در اجرای JavaScript دارد که می‌تواند به کاهش اندازه DOM کمک کند. برای اطلاعات بیشتر، می‌توانید راهنمای نصب و راه‌اندازی WP Rocket را مطالعه کنید.

2. بررسی قالب و پلاگین‌ها

قالب‌ها و پلاگین‌های وردپرس می‌توانند کارایی و ظاهر سایت شما را بهبود ببخشند، اما گاهی اوقات ممکن است باعث افزایش اندازه DOM شوند. برخی از قالب‌ها و پلاگین‌های نامناسب، کدهای اضافی و گره‌های غیرضروری به سایت اضافه می‌کنند و سایت را سنگین می‌سازند.

• قالب‌ها و پلاگین‌های پر از ویژگی‌های غیرضروری می‌توانند به ساختار سایت عناصر غیرضروری اضافه کنند.
• برای شناسایی مشکل، قالب سایت را به یکی از قالب‌های پیش‌فرض وردپرس تغییر دهید و پلاگین‌ها را یکی‌یکی غیرفعال کنید. سپس، نتایج تست سرعت را بررسی کنید.

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

3. استفاده از یک صفحه‌ساز بهینه

پلاگین‌های صفحه‌ساز (مانند Elementor یا Divi) امکان ساخت صفحات زیبا و کاربردی بدون نیاز به کدنویسی را فراهم می‌کنند. اما برخی از این ابزارها می‌توانند اندازه DOM را افزایش دهند.

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

اگر تصور می‌کنید صفحه‌ساز شما باعث ایجاد مشکلات DOM است، می‌توانید آن را در یک سایت آزمایشی غیرفعال کنید و نتایج را بررسی کنید. برای طراحی صفحات می‌توانید به‌جای استفاده از صفحه‌سازهای قدیمی، از ابزارهای داخلی وردپرس مانند Full-Site Editor یا Theme Customizer استفاده کنید.

اگر همچنان به یک صفحه‌ساز نیاز دارید، SeedProd گزینه مناسبی است. در وب آنجل، SeedProd با عملکرد بهتر نسبت به سایر صفحه‌سازها (امتیاز 93 در PageSpeed Insights) مورد آزمون قرار گرفته و سریع‌تر از Divi (امتیاز 91) و Elementor (امتیاز 90) عمل می‌کند. SeedProd علاوه بر عملکرد بالا، دارای بیش از 350 کیت قالب حرفه‌ای و ادغام با ابزارهای معروف بازاریابی ایمیلی و دستیار هوش مصنوعی برای تسریع فرآیند طراحی سایت است.

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

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

پلاگین Optimole گزینه‌ای عالی برای بهینه‌سازی تصاویر است که به‌صورت خودکار تصاویر را هنگام آپلود فشرده و بهینه‌سازی می‌کند. شما می‌توانید تنظیمات فشرده‌سازی یا تغییر اندازه تصاویر را در این پلاگین بر اساس نیاز خود سفارشی کنید. همچنین می‌توانید از ابزارهای آنلاین رایگان مانند TinyPNG برای فشرده‌سازی تصاویر پیش از آپلود استفاده کنید.

برای ویدیوها، پیشنهاد می‌شود آن‌ها را مستقیماً در وردپرس آپلود نکنید. به‌جای آن، از سرویس‌های میزبانی ویدیو مانند YouTube یا Vimeo استفاده کنید که بارگذاری ویدیوها را مدیریت کرده و فشار روی سرور سایت شما را کاهش می‌دهند. با دریافت کد تعبیه ویدیو از این سرویس‌ها، می‌توانید ویدیو را به‌راحتی در صفحات سایت خود قرار دهید.

5. پیاده‌سازی Lazy Loading

Lazy Loading روشی هوشمندانه برای بهینه‌سازی بارگذاری صفحات است که در آن عناصر غیرضروری (مانند تصاویر و ویدیوها) فقط زمانی بارگذاری می‌شوند که کاربر به آن‌ها نیاز داشته باشد (مثلاً هنگامی که به پایین صفحه اسکرول می‌کند).

این روش باعث می‌شود که محتوای اصلی سریع‌تر بارگذاری شود و تجربه کاربری بهتری ایجاد گردد. اگر از پلاگین‌هایی مانند WP Rocket استفاده می‌کنید، فعال‌سازی Lazy Loading بسیار آسان است. کافی است به مسیر Settings » WP Rocket رفته و در بخش Media گزینه‌های Lazy Loading را برای تصاویر، ویدیوها و iFrames فعال کنید.

برای گالری تصاویر، می‌توانید از پلاگین Envira Gallery استفاده کنید که ویژگی Lazy Loading را دارد. همچنین می‌توانید زمان بارگذاری تصاویر را تنظیم کنید تا بر اساس نیاز بهینه‌تر شود.

در بخش نظرات نیز از پلاگینی مانند Thrive Comments برای Lazy Loading نظرات بهره بگیرید. پس از فعال‌سازی، به Thrive Dashboard » Thrive Comments رفته و در بخش Page speed optimization گزینه‌های Lazy Loading برای نظرات را فعال کنید.

6. صفحه‌بندی نظرات و پست‌های طولانی

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

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

همچنین توصیه می‌شود از اسکرول بی‌نهایت خودداری کنید؛ هرچند این ویژگی ممکن است کاربران را بیشتر در سایت نگه دارد، اما می‌تواند به دلیل بارگذاری مداوم اطلاعات، مشکلات عملکردی برای سرور ایجاد کند.

7. Minify کردن فایل‌های CSS و JavaScript

فایل‌های CSS و JavaScript نقش مهمی در عملکرد و ظاهر سایت دارند؛ اما اگر بهینه‌سازی نشوند، ممکن است باعث افزایش حجم DOM شوند. Minification فرایندی است که با حذف عناصر غیرضروری مانند کامنت‌ها، فاصله‌ها و شکست‌های خط، حجم فایل‌ها را کاهش می‌دهد. این کار به بهبود سرعت بارگذاری و کاهش اندازه DOM کمک می‌کند.

برای Minify کردن فایل‌ها، می‌توانید از پلاگین WP Rocket استفاده کنید. به Settings » WP Rocket بروید و در تب File Optimization گزینه‌های Minify برای CSS و JavaScript را فعال کنید.

نکته: Minification ممکن است با برخی قالب‌ها و پلاگین‌ها سازگاری نداشته باشد، بنابراین بهتر است قبل از اعمال تغییرات، از سایت خود بکاپ بگیرید یا تغییرات را در محیط آزمایشی بررسی کنید.

8. کاهش JavaScript و CSS مسدودکننده رندر

فایل‌های Render-Blocking منابعی هستند که پیش از نمایش محتوای صفحه باید بارگذاری شوند. این منابع می‌توانند سرعت بارگذاری را کاهش دهند. WP Rocket قابلیت‌هایی برای کاهش Render-Blocking CSS و JavaScript دارد:

• می‌توانید فایل‌های CSS و JavaScript را ترکیب کنید تا تعداد درخواست‌های HTTP کاهش یافته و محتوای صفحه سریع‌تر بارگذاری شود.
• گزینه Load JavaScript Deferred به مرورگر می‌گوید که بارگذاری فایل‌های JavaScript را تا بعد از نمایش محتوای اصلی (HTML) به تأخیر بیندازد.

این تنظیمات به بازدیدکنندگان کمک می‌کند تا سریع‌تر محتوای سایت را مشاهده کنند، حتی اگر برخی از عملکردهای پس‌زمینه هنوز بارگذاری نشده باشند.

9. فعال‌سازی Caching در وردپرس

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

پلاگین WP Rocket به‌طور پیش‌فرض کش را بهینه‌سازی و فعال می‌کند. همچنین امکان پاک‌سازی دستی کش وجود دارد که در مواقعی که تغییرات مهمی در سایت اعمال می‌کنید، مفید است.

10. استفاده از CDN در وردپرس

شبکه تحویل محتوا (CDN) شبکه‌ای از سرورهای پراکنده در سراسر جهان است که اگرچه مستقیماً اندازه کد وب‌سایت شما را تغییر نمی‌دهد، اما باعث می‌شود وب‌سایت سریع‌تر بارگذاری شود.

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

علاوه بر این، CDN با توزیع بار تحویل محتوا به سرور اصلی کمک می‌کند تا عملکرد بهتری داشته باشد و بر پردازش DOM تمرکز کند. این کار در نهایت سرعت بارگذاری و نمایش سایت شما را افزایش می‌دهد.

11. بهینه‌سازی دیتابیس وردپرس

وب‌سایت وردپرس شما به یک دیتابیس وابسته است که تمام اطلاعات مهم از جمله پست‌ها، نظرات، حساب‌های کاربری و تنظیمات را ذخیره می‌کند. با گذر زمان، دیتابیس می‌تواند شامل داده‌های غیرضروری شود، مانند نسخه‌های قدیمی پست‌ها، نظرات اسپم، یا اطلاعات باقی‌مانده از پلاگین‌های حذف‌شده.

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

برای بهینه‌سازی دیتابیس و حذف داده‌های غیرضروری می‌توانید از پلاگین‌هایی مانند WP-Optimize استفاده کنید. این کار باعث می‌شود سایت شما روان‌تر عمل کند و بارگذاری و نمایش DOM سریع‌تر شود.

تمرکز بر عملکرد کلی وردپرس، نه فقط اندازه DOM

پرداختن به هشدار “اجتناب از اندازه DOM بیش از حد” مهم است، اما تنها فاکتور بهبود سرعت سایت نیست. کلید اصلی ایجاد تعادل بین عملکرد سایت و ویژگی‌های آن است. علاوه بر DOM، به معیارهای دیگری مانند Core Web Vitals نیز توجه کنید که گوگل برای اندازه‌گیری تجربه کاربری استفاده می‌کند.

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

خدمات حرفه‌ای وب آنجل شامل تنظیمات کشینگ، بهینه‌سازی تصاویر بدون کاهش کیفیت بصری، بهینه‌سازی خودکار دیتابیس و موارد دیگر است و ما رتبه A یا B+ در PageSpeed Insights را برای سایت شما تضمین می‌کنیم.

سوالات متداول درباره اندازه DOM