سبد خریدتان در حال حاضر خالی است!
هشدار «از اندازه بیش از حد DOM اجتناب کنید» ممکن است در ابزارهایی مانند Google Lighthouse یا سایر ابزارهای تست سرعت وبسایت ظاهر شود. این هشدار اساساً به این معنی است که وبسایت شما دارای تعداد زیادی عنصر است که میتواند زمان بارگذاری را کند کرده و بازدیدکنندگان را ناراضی کند.
خوشبختانه، چند روش وجود دارد که میتوانید برای کاهش اندازه DOM و بهبود عملکرد وردپرس خود انجام دهید. ما چندین روش را برای افزایش سرعت وبسایتهای خود آزمایش کردهایم و میدانیم چه چیزی واقعاً بر عملکرد وردپرس تأثیر میگذارد.
در این مقاله، روشهای آزمایششده و موثر خود را برای رفع مشکل اندازه بیش از حد DOM در وردپرس به شما نشان خواهیم داد.
هشدار «از اندازه بیش از حد DOM اجتناب کنید» به چه معناست؟
آیا تا به حال تست سرعت وبسایت خود را در وردپرس انجام داده و با هشداری با عنوان «از اندازه بیش از حد DOM اجتناب کنید» مواجه شدهاید؟
این هشدار در ابزارهای تست سرعت مانند Google Lighthouse، Google PageSpeed Insights یا GTMetrix ظاهر میشود. این هشدار نشان میدهد که وبسایت شما دارای تعداد زیادی عنصر است که میتواند سرعت بارگذاری آن را کاهش دهد.
اما دقیقاً DOM چیست و چرا اندازه آن اهمیت دارد؟ بیایید آن را توضیح دهیم.
DOM مخفف Document Object Model است. تصور کنید وبسایت وردپرس شما مانند یک ساختار درختی بزرگ است. هر عنصر در صفحه شما، مانند عناوین متنی، تصاویر، منوها و دکمهها، شبیه شاخه یا برگ این درخت است. این عناصر جداگانه به عنوان گرههای DOM شناخته میشوند.
تعداد کل گرهها در ساختار درختی وبسایت شما اندازه DOM آن است. هر چه عناصر بیشتری در صفحه خود داشته باشید، درخت DOM بزرگتر میشود.
به عنوان مثال، یک صفحه ساده که فقط شامل یک عنوان و یک پاراگراف است ممکن است اندازه DOM کمتری داشته باشد در مقایسه با یک صفحه پیچیده که شامل بخشهای متعدد، تصاویر، فرمهای تماس و محتوای جاسازیشده است.
چگونه اندازه بیش از حد DOM بر عملکرد وبسایت تأثیر میگذارد؟
اندازه بزرگ DOM میتواند به چند روش عملکرد وبسایت وردپرس شما را تحت تأثیر منفی قرار دهد.
تصور کنید زمانی که یک صفحه جدید در وردپرس ایجاد میکنید، عناصری مانند عناوین، پاراگرافها، تصاویر، گالریها، فرمها، دکمهها و آیکونهای شبکههای اجتماعی را اضافه میکنید. هر یک از این عناصر به یک گره DOM در ساختار درختی تبدیل میشود.
در حالی که هر عنصر به تنهایی کوچک به نظر میرسد، تعداد کل آنها میتواند به سرعت افزایش یابد و یک اندازه بیش از حد برای DOM ایجاد کند.
اگر تعداد گرههای DOM شما به طور مداوم افزایش یابد، مرورگر برای خواندن، درک و بارگذاری ساختار وبسایت شما زمان بیشتری نیاز خواهد داشت. این به این دلیل است که یک ساختار پیچیده DOM نیاز به استفاده بیشتر از حافظه و توان پردازشی دستگاه کاربر دارد تا صفحه را نمایش دهد.
همه این موارد منجر به افزایش زمان بارگذاری میشود که میتواند بازدیدکنندگان را ناامید کرده و باعث ترک وبسایت شما قبل از مشاهده محتوایتان شود.
امروزه کاربران انتظار دارند وبسایتها به سرعت بارگذاری شوند. یک وبسایت کند مانند انتظار کشیدن در یک صف طولانی است که افراد را از ماندن منصرف میکند.
علاوه بر این، موتورهای جستجویی مانند گوگل وبسایتهایی را که تجربه کاربری خوبی ارائه میدهند، از جمله سرعت بارگذاری سریع، در اولویت قرار میدهند. بنابراین، اندازه بیش از حد DOM میتواند به طور غیرمستقیم به SEO وردپرس شما آسیب زده و در نهایت باعث کاهش نرخ تبدیل وبسایت شود.
چه تعداد عناصر DOM برای گوگل بیش از حد است؟
در حالی که محدودیت دقیقی وجود ندارد، Google Lighthouse و سایر ابزارهای تست وبسایتهایی را که اندازه DOM آنها بیش از حد است علامتگذاری میکنند. در ادامه تفکیکی از این هشدارها ارائه شده است:
- هشدار: Google Lighthouse زمانی هشدار میدهد که عنصر body صفحه شما بیش از حدود ۸۰۰ گره داشته باشد.
- خطا: اگر عنصر body بیش از ۱۴۰۰ گره داشته باشد، Lighthouse یک خطا نشان میدهد.
بیایید این موضوع را در زمینهای عملی بررسی کنیم تا بفهمیم چه نوع وبسایتهایی ممکن است در این دستهها قرار بگیرند.
بدون بهینهسازی مناسب، یک صفحه ساده که شامل محتوای متنی، تصاویر، یک منوی ناوبری، عناصر پایهای چیدمان و چند افزونه برای فرمها یا اشتراکگذاری در شبکههای اجتماعی باشد، به راحتی میتواند به حدود ۸۰۰ گره برسد.
از طرف دیگر، صفحاتی که بیش از ۱۴۰۰ گره دارند معمولاً پیچیدهتر هستند و ممکن است شامل تعداد بیشتری عنصر باشند. اینها میتوانند شامل اسلایدرها یا کاروسلهای متعدد با تصاویر بزرگ، چیدمانهای پیچیده با عناصر و بخشهای تو در تو، یا محتوای جاسازیشده متعدد باشند.
اینها فقط مثالهای کلی هستند. اجازه ندهید این تصاویری که ذکر شد شما را از ساخت یک وبسایت سفارشی به شیوهای که میخواهید منصرف کند. با این حال، اگر میخواهید مطمئن شوید که بازدیدکنندگان در سایت شما میمانند، باید از اندازه بیش از حد DOM اجتناب کنید.
خوشبختانه، ما یک راهنمای جامع برای کاهش اندازه DOM در وردپرس تهیه کردهایم.
1. استفاده از افزونه بهینهسازی سرعت وردپرس
اولین توصیه ما نصب یک افزونه قدرتمند بهینهسازی سرعت وردپرس است. این افزونهها بهطور خاص طراحی شدهاند تا وبسایت شما را تجزیه و تحلیل کرده و آن را از روشهای مختلف سریعتر کنند.
یک افزونه بهینهسازی سرعت میتواند کارهای فنی لازم برای افزایش سرعت وبسایت شما را انجام دهد. بدین ترتیب شما میتوانید بر مدیریت و ایجاد محتوای خود تمرکز کنید.
در حالی که WP Rocket عمدتاً به عنوان یک افزونه کشینگ شناخته میشود، دارای ویژگیهای زیادی است که میتواند به کاهش اندازه DOM نیز کمک کند. این ویژگیها شامل بهینهسازی فایلها، بارگذاری تنبل و به تعویق انداختن JavaScript است.
ما این ویژگیها را در بخشهای بعدی مقاله به طور مفصل توضیح خواهیم داد.
اما در حال حاضر، استفاده از یک افزونه تقویت سرعت مانند WP Rocket یک گام عالی برای اصلاح اندازه DOM و سریعتر کردن وبسایت شما است، حتی اگر شما تازهکار در وردپرس باشید.
2. بررسی قالب و افزونههای خود
در حالی که افزونهها و قالبهای وردپرس برای افزودن عملکرد و استایل به وبسایت وردپرس شما عالی هستند، گاهی اوقات میتوانند به اندازهگیری بیش از حد DOM کمک کنند.
اولاً، تمام قالبها و افزونهها برابر نیستند. افزونهها و قالبهای کد نویسی شده ضعیف میتوانند منجر به ایجاد یک سند HTML پر از عناصر غیرضروری شوند. این میتواند به طور قابل توجهی اندازه DOM شما را افزایش دهد.
قالبها و افزونههای وردپرس اغلب ویژگیهای اضافی دارند که ممکن است به آنها نیازی نداشته باشید. این ویژگیها میتوانند عناصر ناخواستهای به ساختار وبسایت شما اضافه کنند، حتی اگر شما به طور فعال از آنها استفاده نکنید.
با بررسی دقیقتر آنچه که روی وبسایت شما نصب شده است، میتوانید عوامل احتمالی که به اندازه DOM کمک میکنند را شناسایی کنید.
اگر فکر میکنید یک قالب یا افزونه خاص ممکن است باعث مشکلاتی شود، سعی کنید به طور موقت به قالب پیشفرض وردپرس تغییر دهید یا افزونهها را یکی یکی غیرفعال کنید.
سپس، بررسی کنید که آیا هشدار اندازه DOM پس از اعمال این تغییرات در ابزارهای تست سرعت ناپدید میشود. این میتواند به شما کمک کند تا عنصر مشکلدار را شناسایی کنید.
هنگام انتخاب قالبها و افزونهها، بهتر است از منابع معتبر مانند دایرکتوری وردپرس یا توسعهدهندگان معروف استفاده کنید. این منابع دارای استانداردهای کدنویسی سختگیرانه هستند که شانس وجود کد اضافی که ممکن است به عملکرد وبسایت شما آسیب برساند را کاهش میدهند.
3. بهینهسازی تصاویر و ویدیوهای شما
تصاویر و ویدیوهای بهینهنشده میتوانند اندازه فایلهای بزرگی داشته باشند. این فایلهای بزرگ میتوانند به افزایش اندازه DOM کمک کنند زیرا تبدیل به عناصر اضافی میشوند که مرورگر باید آنها را پردازش کند.
بهینهسازی تصاویر میتواند به طور قابل توجهی اندازه فایلهای آنها را کاهش دهد بدون اینکه کیفیت آنها فدای این کاهش شود. این امر به وبسایت شما کمک میکند تا سریعتر بارگذاری شود و تجربه کاربری کلی را بهبود بخشد.
افزونهای مانند Optimole میتواند راهحل عالی برای بهینهسازی تصاویر شما باشد. Optimole طوری طراحی شده است که به طور خودکار تصاویر وبسایت شما را هنگام بارگذاری بهینه کند.
شما همچنین میتوانید تنظیمات آن را به دقت تنظیم کنید تا کیفیت فشردهسازی را تغییر دهید یا تصاویری که از اندازه مشخصی بزرگتر هستند را تغییر اندازه دهید، که این کار به کاهش بیشتر اندازه فایلها و تأثیر آنها بر اندازه DOM کمک میکند.
اگر نمیخواهید از افزونههای زیادی استفاده کنید، میتوانید از ابزارهای آنلاین رایگان مانند TinyPNG برای فشردهسازی تصاویر خود قبل از بارگذاری آنها در وبسایت وردپرسی خود استفاده کنید.
در مورد ویدیوها، ما پیشنهاد نمیکنیم که آنها را مستقیماً به وردپرس بارگذاری کنید. فایلهای ویدیویی بزرگ میتوانند زمان بارگذاری وبسایت شما را به طور قابل توجهی کند کنند.
رویکرد بهتر استفاده از سرویسهای میزبانی ویدیو مانند یوتیوب یا ویمئو است. این سرویسها ذخیرهسازی و استریم ویدیوهای شما را مدیریت میکنند، که بار را از روی سرور وبسایت شما برمیدارند و اندازه DOM را کاهش میدهند.
سپس میتوانید ویدیوها را مستقیماً به صفحات خود با استفاده از کدهای جاسازیشده که توسط سرویس میزبانی ارائه میشود، وارد کنید.
4. پیادهسازی بارگذاری تنبل
زمانی که یک صفحه وب طولانی با محتوای زیاد را باز میکنید، معمولاً تمام این عناصر به طور همزمان بارگذاری میشوند. این فرایند ممکن است مدتی طول بکشد، به ویژه در اتصالات اینترنتی کندتر.
بارگذاری تنبل رویکرد هوشمندانهتری دارد. این روش بارگذاری عناصر غیرضروری مانند تصاویر و ویدیوها را به تعویق میاندازد. این عناصر تنها زمانی بارگذاری میشوند که واقعاً به آنها نیاز باشد، هنگامی که کاربر در حال پیمایش صفحه است.
این بدان معنی است که محتوای ضروری که ابتدا بارگذاری میشود (مانند متن و چیدمان) سریعتر بارگذاری میشود. در نتیجه، این باعث بارگذاری سریعتر صفحه اولیه و تجربه کاربری روانتر میشود.
راهاندازی بارگذاری تنبل آسان است، بهویژه اگر از قبل از افزونه بهینهسازی سرعت وردپرس مانند WP Rocket استفاده میکنید.
فقط به قسمت تنظیمات » WP Rocket در داشبورد وردپرس خود بروید. سپس روی تب “Media” کلیک کنید.
در اینجا، فقط تمام گزینهها را برای فعال کردن بارگذاری تنبل برای تصاویر، ویدیوها و iFrameها علامت بزنید.
اگر میخواهید یک گالری تصاویر نمایش دهید، توصیه میکنیم از یک افزونه گالری با قابلیت بارگذاری تنبل استفاده کنید.
Envira Gallery نمونهای عالی از این نوع افزونهها است. علاوه بر بارگذاری تنبل، میتوانید یک تأخیر زمانی مشخص برای بارگذاری تصاویر تنظیم کنید.
5. صفحهبندی نظرات یا پستهای دارای محتوای زیاد
پستهای بیش از حد طولانی یا بخشهای نظرات بزرگ معمولاً اندازه DOM زیادی دارند که سرعت بارگذاری وبسایت شما را کاهش میدهد. اینجاست که صفحهبندی بسیار مفید میشود.
صفحهبندی اساساً محتوای شما را به بخشهای کوچکتر و قابل مدیریت تقسیم میکند و کار را برای کاربران آسانتر میسازد تا اطلاعات را پیمایش و مطالعه کنند.
اگر مقالات عمیقی مینویسید، بهتر است آنها را به بخشهای منطقی تقسیم کنید. این کار به خوانندگان اجازه میدهد بین بخشها استراحت کنند و از مواجهه با یک متن طولانی و خستهکننده جلوگیری شود.
خوشبختانه، میتوانید به راحتی پستهای طولانی را با استفاده از بلوک «Page Break» در ویرایشگر بلوک تقسیم کنید.
برای راهنمای گامبهگام، میتوانید مقاله ما در مورد چگونگی تقسیم پستهای وردپرس به چند صفحه را مطالعه کنید.
همچنین، پیشنهاد میکنیم از اسکرول بیپایان اجتناب کنید. اگرچه این ویژگی میتواند افراد را مدت زمان بیشتری در سایت شما نگه دارد چون نیازی به جابجایی دستی بین صفحات ندارند، اما این موضوع میتواند باعث مشکلات عملکردی روی سرور شما شود.
6. فشردهسازی فایلهای CSS و JavaScript
عملکرد و سبک ظاهری وبسایت شما به فایلهای کدی مانند CSS و JavaScript وابسته است. اگرچه این فایلها ضروری هستند، اما اگر به درستی بهینهسازی نشوند، میتوانند به افزایش اندازه DOM کمک کنند.
فشردهسازی میتواند این مشکل را با حذف عناصر غیرضروری از کد، مانند نظرات، فضاها و شکستن خطوط، حل کند. این اندازه کوچکتر به معنای زمان بارگذاری سریعتر و اندازه DOM کوچکتر است.
با این حال، باید توجه داشت که فشردهسازی گاهی ممکن است باعث بروز مشکلات سازگاری با برخی تمها یا افزونهها شود.
قبل از فشردهسازی کد خود، بهتر است از وبسایت خود نسخه پشتیبان تهیه کنید و در صورت امکان تغییرات را در محیط تست یا محلی آزمایش کنید. این کار به شما این امکان را میدهد که مشکلات احتمالی را قبل از تاثیرگذاری بر سایت زنده خود شناسایی کنید.
سپس میتوانید راهنمای ما را در مورد نحوه فشردهسازی فایلهای CSS و JavaScript در وردپرس برای دستورالعملهای گام به گام مطالعه کنید.
همانطور که در راهنما خواهید دید، فشردهسازی کد شما آسان است اگر قبلاً از افزونهای مانند WP Rocket استفاده میکنید. تنها کاری که باید انجام دهید این است که به بخش تنظیمات » WP Rocket بروید و به تب «بهینهسازی فایلها» بروید.
سپس، تنها کافی است ویژگیها را برای فشردهسازی فایلهای CSS و JavaScript فعال کنید.
برخی از ارائهدهندگان هاستینگ وردپرس همچنین ویژگیهای داخلی برای فشردهسازی فایلهای CSS و JavaScript ارائه میدهند.
به عنوان مثال، SiteGround افزونه Speed Optimizer را برای فشردهسازی CSS ارائه میدهد.
Hostinger نیز ویژگی مشابهی از طریق CDN داخلی خود ارائه میدهد که در طرح تجاری و سطوح بالاتر موجود است.
7. کاهش JavaScript و CSS مسدودکننده رندر
یک روش دیگر برای بهینهسازی فایلهای CSS و JavaScript، کاهش مسدودکنندههای رندر است.
منابع مسدودکننده رندر مانند مواد اولیهای هستند که از ساخته شدن خانه (محتوای وبسایت شما) جلوگیری میکنند تا زمانی که آن منابع تحویل داده شوند و در جای خود قرار گیرند. هر چه زمان بیشتری طول بکشد تا این منابع بارگذاری شوند، زمان بیشتری طول میکشد تا کاربران محتوای وبسایت شما را ببینند.
WP Rocket ویژگیهای داخلی برای کاهش CSS و JavaScript مسدودکننده رندر دارد.
به عنوان مثال، میتوانید فایلهای CSS و JavaScript را ترکیب کنید که این کار تعداد درخواستهای HTTP مورد نیاز وبسایت شما را کاهش میدهد. درخواستهای کمتر به معنای زمان انتظار کمتر برای مرورگر است تا همه چیز بارگذاری شده و محتوای شما نمایش داده شود.
شما میتوانید هر کد CSS که در صفحات شما استفاده نمیشود را نیز حذف کنید.
این کار نه تنها مسدودکننده رندر را کاهش میدهد، بلکه اندازه کلی صفحه و تعداد درخواستهای HTTP را نیز کاهش میدهد.
علاوه بر این، ویژگیای به نام «بارگذاری جاوا اسکریپت با تاخیر» وجود دارد. این ویژگی به مرورگر میگوید که بارگذاری برخی از فایلهای جاوا اسکریپت را تا زمانی که محتوای اصلی وبسایت شما (HTML) نمایش داده نشده است، به تعویق بیندازد.
بدین ترتیب، کاربران محتوای وبسایت شما را سریعتر مشاهده میکنند، حتی اگر تمام عملکردهای پسزمینه هنوز بارگذاری نشده باشند.
8. فعالسازی کش وردپرس
کشینگ بهطور مستقیم اندازهی DOM را کاهش نمیدهد، اما عملکرد وبسایت شما را از نظر سرعت بارگذاری بهطور قابل توجهی بهبود میبخشد.
وقتی کشینگ فعال میشود، اینگونه عمل میکند: وقتی کاربری دوباره به وبسایت شما سر میزند، مرورگر ابتدا کش خود را بررسی میکند. اگر فایلها قبلاً بهطور محلی ذخیره شده باشند، میتوانند سریعتر بارگذاری شوند و زمان بارگذاری صفحه را بهطور قابل توجهی کاهش دهند.
این باعث میشود که DOM سریعتر بارگذاری و نمایش داده شود، که منجر به تجربهای روانتر برای بازدیدکنندگان میشود.
کشینگ همچنین به سرور شما کمک میکند که بهطور کارآمدتر عمل کند، زیرا بار کاری آن کاهش مییابد. این کار به سرور اجازه میدهد تا روی کارهای مهمتری مانند پردازش DOM تمرکز کند، که در نهایت زمان بارگذاری شما را سرعت میبخشد.
خوشبختانه، تنظیم کش مرورگر با استفاده از پلاگینی مانند WP Rocket بسیار ساده است. زیرا این پلاگین بهطور خودکار کشینگ را با تنظیمات بهینه برای وبسایت شما فعال میکند.
حتی بهتر از آن، WP Rocket بهطور مداوم کش وبسایت شما را در تمام زمانها ذخیره میکند. هر زمان که کش پاک شود (بهصورت دستی یا خودکار)، WP Rocket بهطور خودکار فایلهای کش جدیدی تولید میکند.
WP Rocket همچنین این امکان را به شما میدهد که هر زمان که بخواهید کش وردپرس را پاک کنید. این میتواند زمانی مفید باشد که تغییرات قابل توجهی در وبسایت خود اعمال کردهاید و میخواهید اطمینان حاصل کنید که کاربران آخرین نسخه سایت شما را مشاهده میکنند.
9. از یک CDN وردپرس استفاده کنید
CDN (شبکه تحویل محتوا) یک شبکه از سرورهاست که در سراسر جهان پراکنده شدهاند. در حالی که یک CDN به طور مستقیم اندازه کد سایت شما را تغییر نمیدهد، اما باعث میشود سایت شما سریعتر بارگذاری شود.
این به این دلیل است که CDN نسخههایی از محتوای استاتیک سایت شما (تصاویر، اسکریپتها، استایل شیتها) را روی سرورهای واقع در مکانهای مختلف ذخیره میکند. هنگامی که کسی سایت شما را بازدید میکند، کامپیوتر او محتوا را از نزدیکترین سرور CDN به خود دانلود میکند.
این کار زمان دانلود را به طور چشمگیری کاهش میدهد، زیرا همه چیز از سرور اصلی شما که ممکن است دور باشد، دانلود نمیشود. این تحویل سریعتر باعث پردازش سریعتر DOM میشود.
علاوه بر این، CDN به سرور اصلی شما کمک میکند تا سریعتر عمل کند، زیرا بار تحویل محتوا را تقسیم میکند. این امکان را میدهد تا سرور بر روی مهمترین وظایف مانند پردازش DOM تمرکز کند. در نتیجه، این کار باعث میشود سایت شما سریعتر بارگذاری شود.
10. پایگاه داده وردپرس خود را بهینه کنید
وبسایت وردپرس شما برای ذخیره تمام اطلاعات مهم خود مانند پستها، نظرات، حسابهای کاربری و حتی تنظیمات به یک پایگاه داده متکی است.
با گذشت زمان، این پایگاه داده ممکن است دادههای غیرضروری زیادی را در خود ذخیره کند، مانند نسخههای قدیمی پستها، نظرات اسپم یا اطلاعات باقیمانده از افزونههای حذفشده.
اگرچه خود پایگاه داده بخشی از DOM نیست، اما یک پایگاه داده سنگین میتواند سرعت وبسایت شما را کاهش دهد. یک وبسایت کند میتواند باعث شود که اندازه DOM بزرگتر به نظر برسد، زیرا همه چیز دیرتر بارگذاری و رندر میشود.
بهینهسازی پایگاه داده شما با حذف دادههای غیرضروری کمک میکند تا وبسایت شما روانتر اجرا شود و میتواند به طور غیرمستقیم اندازه DOM را بهبود بخشد.
دیدگاهتان را بنویسید