در دنیای دیجیتال، هر کسری از ثانیه اهمیت دارد. از این رو، عملکرد یک وب‌سایت برای رضایت و تعامل کاربران بسیار حیاتی است. کاهش اندازه DOM المنتور برای افزایش سرعت سایت می‌تواند احتمال دستیابی به اهداف وب‌سایت شما را افزایش دهد.
یک وب‌سایت با خروجی DOM (Document Object Model) بزرگ باعث افزایش حجم HTML می‌شود که می‌تواند به عملکرد سایت آسیب برساند. با این حال، تکنیک‌هایی وجود دارد که می‌توانند اندازه DOM سایت شما را کاهش دهند. این مقاله به بررسی روش‌های مختلف برای بهینه‌سازی وب‌سایت‌های طراحی‌شده با المنتور می‌پردازد و استراتژی‌هایی را برای کاهش حجم HTML ارائه می‌دهد.
درک مشکل حجم زیاد DOM
DOM (مدل شیء سند) ساختار یک صفحه وب را نشان می‌دهد. حجم زیاد DOM معمولاً به معنای ساختار پیچیده صفحه است که اغلب به دلیل استفاده بیش از حد از عناصر HTML، گره‌های تو در تو، یا محتوای داینامیک به وجود می‌آید. صفحاتی که تعداد زیادی عنصر HTML دارند، معمولاً کندتر بارگذاری می‌شوند و می‌توانند بر انیمیشن‌ها و سایر تعاملات کاربر تأثیر بگذارند.
تأثیر اندازه DOM بر عملکرد صفحه
اندازه بزرگ DOM می‌تواند زمان رندر را افزایش دهد و منجر به تأخیر در نمایش صفحه و زمان بارگذاری کندتر شود. این موضوع به این دلیل است که مرورگرها باید هر گره (node) را پردازش و رندر کنند. علاوه بر این، هر گره DOM نیاز به حافظه مرورگر دارد که می‌تواند باعث اتمام منابع سیستم و افزایش مصرف حافظه شود. این مسأله ممکن است به اُفت عملکرد، به‌ویژه در سرور های با سخت‌افزار ضعیف‌تر منجر شود.
علاوه بر این، اندازه بیش از حد DOM می‌تواند موجب کندی تعاملات کاربری و کاهش پاسخگویی در حین استفاده از وب‌سایت شود. تعداد زیاد عناصر DOM معمولاً شامل تعداد زیادی شنونده رویداد (Event Listener) می‌شود که حجم اضافه ایجاد کرده و تعاملات کاربری را کُند می‌کند. هرچند تمامی دلایل را ذکر نمی‌کنیم، اما به‌طور کلی می‌توان گفت که هرچه اندازه HTML بزرگ‌تر باشد، سرعت بارگذاری صفحه کندتر خواهد بود.
چگونه می‌توان اندازه DOM را با ابزارهای خارجی اندازه‌گیری کرد؟
برای بررسی اندازه DOM بر عملکرد وب‌سایت می‌توانید از ابزارهای زیر استفاده کنید:
Google Chrome DevTools : به پنل “Elements” بروید تا عناصر DOM و عمق تو در تویی آنها را بررسی کنید. از تب “Performance” برای ارزیابی عملکرد رندر و شناسایی گلوگاه‌های احتمالی ناشی از دستکاری DOM استفاده کنید.
Lighthouse : ابزار Lighthouse اطلاعاتی در مورد اندازه‌های متریک DOM مانند “DOM Size”، “DOM Depth” و “Maximum DOM Depth” ارائه می‌دهد که نقاط قابل بهبود را شناسایی می‌کند.
WebPageTest : از متریک‌های اندازه DOM در نمودارهای Waterfall و نتایج عملکرد برای درک رابطه بین پیچیدگی DOM و زمان بارگذاری صفحه استفاده کنید.
چه چیزی به‌عنوان اندازه بزرگ DOM در نظر گرفته می‌شود؟
Lighthouse صفحات با DOM بیش از حد را به‌صورت زیر نشان می‌دهد:
– هشدار می‌دهد زمانی که عنصر <body> بیش از 818 گره داشته باشد.
– خطاها را زمانی نشان می‌دهد که عنصر <body> بیش از 1400 گره داشته باشد.
با این حال، این متریک‌ها ممکن است در آینده تغییر کنند. علاوه بر این، ابزارهای مختلف ممکن است آستانه‌های متفاوتی را برای هشدار درباره اندازه بیش از حد DOM تنظیم کنند.
آموزش کاهش اندازه DOM المنتور
المنتور یک صفحه ساز با قابلیت کشیدن و رها کردن است که فرآیند افزودن عناصر به صفحه را ساده می‌کند. استفاده از المنتور معمولاً تأثیر منفی بر عملکرد سایت شما ندارد. با این حال، اقداماتی وجود دارد که می‌توانید برای بهینه‌سازی بیشتر صفحات ساخته‌شده انجام دهید. این شامل کاهش تعداد عناصر HTML است که می‌تواند اندازه DOM را بدون تأثیر بر طراحی کاهش دهد.
برای بهینه‌سازی مؤثر، بهتر است ساختار عناصر طرح‌بندی المنتور را درک کنید. ما بر عناصر طرح‌بندی تمرکز می‌کنیم زیرا یک صفحه معمولی شامل ده‌ها عنصر از این نوع است، بنابراین بهینه‌سازی آنها تأثیر بیشتری دارد.
آموزش کاهش اندازه DOM المنتور شامل 3 تکنیک توصیه‌شده برای بهینه‌سازی عناصر صفحه عبارتند از:
– مهاجرت از بخش‌ها/ستون‌ها به کانتینرها.
– ساده‌سازی کانتینرها با کانتینرهای تک‌لایه.
– استفاده از کانتینرهای با عرض کامل به‌جای کانتینرهای با عرض جعبه‌ای در صورت امکان.
بیایید درباره کاهش اندازه DOM در المنتور بیشتر یاد بگیریم.
انواع عناصر در المنتور
المنتور دو نوع عنصر دارد:
ابزارک ها : تمامی عناصر معمولی که برای ساخت وب‌سایت خود استفاده می‌کنید، مانند عنوان، تصویر، آیکون، دکمه، جداکننده و غیره.
عناصر طرح‌بندی : عناصر ساختاری مانند بخش‌ها/ستون‌ها و کانتینرها. این عناصر ابزارک ها را در بر می‌گیرند و آنها را با هم گروه‌بندی می‌کنند.
ما قصد داریم روی عناصر طرح‌بندی تمرکز کنیم تا ببینیم چگونه می‌توان اندازه DOM را کاهش داد.
ساختار HTML عناصر طرح‌بندی:
در المنتور، هر عنصر ساختاری از دو تگ <div> تشکیل شده است: یک <div> بیرونی و یک <div> داخلی. این نکته مهم است، زیرا قصد داریم ببینیم چگونه می‌توان تعداد عناصر HTML را در عناصر طرح‌بندی ساختاری شما کاهش داد.
ساختار HTML بخش/ستون:
هنگام استفاده از بخش‌ها و ستون‌ها، HTML نهایی شامل دو سطح طرح‌بندی است که هر کدام دارای دو عنصر <div> هستند، دو عنصر برای بخش‌ها و دو عنصر برای ستون‌ها. در مجموع، ما ابزارک ها را با چهار عنصر <div> می‌پوشانیم.
<div class="elementor-section">
<div class="elementor-container" >
<div class="elementor-column">
<div class="elementor-widget-wrap">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>
</div>
</div>ساختار HTML کانتینر:
المنتور کانتینرها را به‌عنوان روشی برای ساخت صفحات با ساختار سبک‌تر و DOM بهینه‌تر معرفی کرد.
هنگام تغییر به کانتینرها، HTML خروجی فقط شامل دو عنصر <div> است، نه چهار، که به معنای دستیابی به همان طراحی با نصف تعداد عناصر <div> می‌باشد.
<div class="e-con">
<div class="e-con-inner">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>ساده کردن ساختار HTML با استفاده از کانتینرها
در گذشته، از بخش‌ها یا ستون‌ها برای ساختاردهی به وب‌سایت‌ها استفاده می‌شد. امروزه، وب‌سایت‌های مدرن از CSS Flex و CSS Grid برای دستیابی به همان ساختار بصری با کدنویسی کمتر استفاده می‌کنند. به همین دلیل، المنتور کانتینرها را معرفی کرد. با تبدیل عناصر ساختاری به کانتینرها، می‌توانید ساختار HTML را ساده کرده و از حجم غیرضروری جلوگیری کنید.
در حالی که بخش‌ها به صورت دسته ای روی هم قرار می‌گیرند، ستون‌ها به‌طور موازی در کنار هم قرار می‌گیرند. از طرف دیگر، کانتینرها می‌توانند عناصر داخلی را به‌صورت ردیفی یا ستونی قرار دهند. می‌توانیم از این تفاوت‌ها برای بهینه‌سازی برخی ساختارها استفاده کنیم.
اگر یک بخش چندین ستون دارد، ساختارهای تبدیل‌شده دارای یک کانتینر با جهت ستون و چندین کانتینر با جهت ردیف خواهند بود. اما اگر یک بخش فقط یک ستون داشته باشد، می‌توانید این ساختار را هنگام تبدیل به کانتینرها بهینه کنید. همچنین می‌توانید یک سطح کانتینر را بدون تأثیر بر طراحی حذف کنید و 50٪ کاهش اندازه DOM را از چهار عنصر <div> به فقط دو عنصر <div> تبدیل نمایید. اکنون این کاهش را در تعداد عناصر طرح‌بندی در هر صفحه ضرب کنید تا تأثیر آن بر وب‌سایت خود را محاسبه کنید.
شایان ذکر است که می‌توانید اندازه DOM را در عناصر بخش/ستون که شامل بخش‌های داخلی هستند به‌طور قابل توجهی کاهش دهید. در این موارد، عنصر 8 سطح از عناصر <div> را قبل از نمایش ابزارک به کار می‌گیرد. با تبدیل به کانتینرها، می‌توانید این سطوح را از هشت سطح به چهار سطح و در برخی موارد فقط به دو سطح از عناصر <div> کاهش دهید.
اگر هنوز از ساختار بخش/ستون استفاده می‌کنید، زمان آن رسیده که به کانتینرها مهاجرت کنید. برای ساده‌سازی این انتقال، المنتور حتی یک دکمه “تبدیل به کانتینر” برای این منظور فراهم کرده است.
ساختار جعبه‌ای در مقایسه با تمام عرض
روش دیگری برای بهینه‌سازی اندازه DOM، تمایز بین کانتینرهای جعبه‌ای و کانتینرهای تمام عرض است.
یک کانتینر جعبه‌ای دارای یک عرض مشخص می باشد و نیاز به استفاده از یک <div> داخلی در المنتور دارد. از طرف دیگر، یک کانتینر با عرض کامل که به هر دو طرف کشیده می‌شود، تنها به یک عنصر <div> نیاز دارد.
ساختار جعبه‌ای:
<div class="e-con">
<div class="e-con-inner">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>ساختار تمام عرض:
<div class="e-con">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>بهینه‌سازی ساختار کانتینرهای تو در تو
اکنون که ساختارهای مختلف HTML برای کانتینرهای جعبه‌ای و تمام عرض را درک کرده‌ایم، می‌توانیم شروع به بهینه‌سازی خروجی DOM وب‌سایت خود کنیم، به‌ویژه کانتینرهایی که کانتینرهای دیگری را در خود جای داده‌اند.
نکته بهینه‌سازی بعدی به این صورت است: اگر یک کانتینر والد دارید که از عرض جعبه‌ای استفاده می‌کند، می‌توانید همه کانتینرهای تو در تو را به تمام عرض تنظیم کنید. به این ترتیب، همان طراحی را خواهید داشت، اما با HTML کمتری.
<div class="e-con e-con-parent">
<div class="e-con-inner">
<div class="e-con e-con-child">
…
</div>
<div class="e-con e-con-child">
…
</div>
</div>
</div>ساختار HTML بالا یک کانتینر والد جعبه‌ای دارد. اگر دو کانتینر فرزند نیز جعبه‌ای باشند، هر یک از آنها شامل دو سطح از عناصر <div> خواهند بود. اما اگر آنها عرض کامل باشند، فقط یک <div> استفاده خواهد شد.
یک بار دیگر، این بهینه‌سازی فقط در صورتی معتبر است که کانتینر والد جعبه‌ای باشد.
نتیجه‌گیری
همان‌طور که مشاهده کردید، سه استراتژی ساده برای کاهش اندازه DOM المنتور عناصر طرح‌بندی وجود دارد: 1. جایگزینی عناصر طرح‌بندی بخش/ستون با کانتینرها؛ 2. ساده کردن کانتینرهایی که تنها یک کانتینر تو در تو دارند؛ 3. اگر از کانتینرهای تو در تو استفاده می‌کنید و کانتینر والد جعبه‌ای است، تنظیم همه کانتینرهای داخلی به تمام عرض. این استراتژی‌ها می‌توانند به حذف تعداد زیادی از عناصر <div> غیرضروری از HTML وب‌سایت شما کمک کرده و عملکرد کلی صفحه وب را بهبود بخشند.
به این مقاله چه امتیازی می دهید؟
امتیاز کل
با امتیاز دادن به مقاله های آچار ودرپرس ما در تولید محتوای با کیفیت تر یاری برسانید
