هر < div > اضافی در صفحه شما هزینه‌ای دارد. مرورگر باید HTML بیشتری دانلود کند و مرورگر باید کار بیشتری برای طرح بندی و رنگ آمیزی انجام دهد. ادیتور قدیمی المنتور، با چالش div های تودرتو که بی‌سروصدا سرعت صفحات را کاهش می‌داد همراه بود.
حتما شنیده‌اید که المنتور نسخه 4 عملکرد و سرعت بهتری دارد ، دلیل این موضوع تا حد زیادی به DOM برمی‌گردد. این راهنما به زبان ساده توضیح می‌دهد که DOM تمیز در واقع به چه معناست، ویرایشگر اتمی چگونه آن را تولید می‌کند و چرا برای عملکرد المنتور نسخه 4 مهم است، این آموزش با جزئیات فنی که باعث جذابیت آن می‌شود توضیح داده خواهدشد.
DOM تمیز در المنتور نسخه 4 بدین معناست که ویرایشگر جدید اتمیک، کدهای HTML سبک تر و با پیچیدگی کمتری نسبت به نسخه‌های قدیمی تر المنتور تولید می کند.
کاهش تعداد wrapper ها منجر به کوچک‌تر شدن درخت DOM می‌شود. و مرورگر آن را سریعتر تجزیه ، استایل دهی و رندر می کند. این ویژگی در ترکیب با مدل استایل‌دهی «CSS-first»، باعث بهبود زمان بارگذاری، واکنشگرایی و بهبود Core Web Vitals در المنتور می شود و «DOM تمیز» را به یکی از بزرگترین مزایای عملکردی المنتور نسخه 4 تبدیل می کند.
البته المنتور از نسخه‌های قبلی نیز بهینه‌سازی DOM را شروع کرده بود، اما در ورژن 4 با ویجت های اتمیک این رویکرد را عمیق‌تر کرده و markup ساده‌تری ارائه شد.
نکات کلیدی :
- DOM تمیز در المنتور نسخه 4 با یک یک ساختار HTML سبک تر، به مرورگرها کار کمتری برای پردازش و رندر می دهد.
- ادیتورهای قدیمی تر المنتور از wrapperهای اضافی استفاده می‌کردند: تودرتوسازی بیشتر اندازه صفحه را افزایش می داد و سربار رندر غیرضروری ایجاد می کرد.
- المنتور نسخه 4 ساختار را ساده می کند: عناصر اتمی و استایل بندی CSS-first طرح بندی‌ها را تمیزتر نگه می‌دارند.
- DOM سبک تر لود صفحه، پاسخگویی به تعامل کاربر و Core Web Vitals را بهبود می بخشد.
- افزونه‌های شما همچنان بر نتیجه نهایی تأثیر می گذارند: حتی با المنتور نسخه 4، افزونه‌های کند و غیربهینه ، عملکرد سایت را ضعیف می کند.
DOM چیست و چرا اهمیت دارد؟
بیایید با اصول اولیه شروع کنیم، به این خاطر که مفهوم DOM تمیز در آموزش المنتور تنها زمانی معنا پیدا می‌کند که معنی خود DOM را بدانید.
DOM چیست؟
DOM یک مدل درختی از عناصری است که مرورگر از HTML صفحه شما می سازد. هر عنوان، تصویر، دکمه و کانتینر به یک گره از این درخت تبدیل می شود. مرورگر شما HTML را می‌خواند، این درخت را می‌سازد، سبک‌ها را اعمال می‌کند و سپس همه چیز روی صفحه طرح‌بندی و استایل مناسب نمایش داده می شود.
چرا DOM تمیزاهمیت دارد؟
هرچه این درخت بزرگتر و عمیق تر باشد، مرورگر در هر مرحله مانند تجزیه، استایل‌بندی، طرح بندی و رنگ آمیزی بیشتری انجام می‌دهد. صفحه‌ای با هزاران گره تو در تو، به طور قابل توجهی کندتر از همان طراحی ساخته شده با گره‌های کمتر و سطحی‌تر رندر می شود.
چرا صفحه سازها مشکل DOM سنگین را ایجاد می کنند؟
صفحه سازهایی مثل المنتور کانتینرها را درون کانتینرها قرار دهند. هر سطح تو در تو، گره اضافه می‌کند و آن گره‌ها به سرعت در کل صفحه جمع می‌شوند. به همین دلیل است که “DOM تمیز” به یک نقطه عطف برای عملکرد وب تبدیل شده و در المنتور ورژن 4 نقش مهمی دارد.
مفهوم Clean DOM یا DOM تمیز در المنتور نسخه 4
DOM تمیز یک قابلیت یا ویژگی قابل تنظیم نیست، بلکه نتیجه تغییر ساختار ویرایشگر المنتور در نسخه 4 می باشد.
مشکل نسخه های قدیمی المنتور
در نسخه‌های قبلی ، برای ایجاد یک طرح بندی چندتا wrapper elements در اطراف محتوای واقعی ایجاد میشد. اینکار برای انعطاف پذیری مفید بود، اما یک درخت DOM عمیق و سنگین از طراحی ایجاد می کرد. هرچند در ادیتور ورژن 3 هم اقدامات در جهت بهینه سازی انجام می شد.
وجه تمایز DOM در المنتور ورژن 4
ویرایشگر اتمیک بر اساس یک مدل CSS-first طراحی شده است و از بلوک‌های سازنده‌ی سبک‌تر و سبک‌بندی قابل استفاده مجدد به جای wrapper تو درتو استفاده می کند. ویجت هایی مثل Div Block، طبق توصیف خود المنتور، کانتینرهای سبکی هستند که سریعتر از جایگزین‌های سنگین‌تر در ادیتور ورژن 3 بارگذاری می شوند. wrapper کمتر به معنای DOM کم‌عمق تر و کوچک تر است. این یعنی HTML کمتری برای دانلود و کار کمتر برای مرورگر در هر مرحله رندر.
در نهایت، صفحاتی که سبک تر هستند، سریع تر بارگذاری می شوند، سریعتر به رفتار کاربر پاسخ می‌دهند و نگهداری از آنها نیز آسان‌تر می شود.
چگونه Clean DOM باعث بهبود عملکرد المنتور نسخه 4 می شود
رندر سریع تر
ساختِ یک درخت DOM کوچک‌تر برای مرورگر طبیعتا سریعتر انجام می شود. با وجود گره‌های (nodes) کمتر درخت که همان المان های HTML هستند، مرورگر زودتر به مرحله نمایش کامل صفحه می‌رسد.
عملیات رندرینگ در هر بازدید و روی هر دستگاهی تکرار می شود. روی گوشی‌های کندتری که بسیاری از بازدیدکنندگان شما واقعاً از آنها استفاده می‌کنند هم این عملیات باید انجام شود. درنتیجه، نمایش اولیه (First Paint) سریعتر می شود و صفحه سریعتر نمایش داده می شود.
سبک شدن صفحه
Wrapperهای کمتر به معنای ارسال کمتر HTML و داده‌های کمتر برای دانلود است. برای نمایش در موبایل و زمانی که اتصال اینترنت کند باشد هر کیلوبایت مهم است، و سبک بودن صفحه خیلی اهمیت دارد. DOM تمیز به معنای بارگذاری سریعتر صفحه بدون قربانی کردن طراحی است.
استایل بندی کارآمدتر
مدل CSS-first در المنتور ورژن 4، استایلها را از طریق کلاس‌ها و متغیرهای سراسری قابل استفاده مجدد اعمال می‌کند، نه اینکه استایلها را در ویجت های مختلف تکرار کند.
استفاده از CSS تمیزتر و قابل پیش‌بینی‌تر برای مرورگر آسان‌تر است و باعث استایل‌بندی منسجم با سربار کمتر و حجم کمتر می شود.
بهبود Core Web Vitals
درخت‌های DOM کوچک تر و کم‌عمق تر و سبک استایل کارآمدتر، باعث بهبود معیارهای مورد نظر گوگل مثل سرعت نمایش محتوای اصلی و پایداری طرح بندی می شود.
درواقع، Core Web Vitals هم بر تجربه کاربری و هم بر دیده شدن در نتایج جستجوی گوگل تأثیر می‌گذارد. سایتی که برای بازدیدکنندگان سریع به نظر می‌رسد و برای موتورهای جستجو نیز به همان سرعت خوانده می شود.
DOM کوچک‌تر با کاهش کار مورد نیاز مرورگر، به بهبود عملکرد رندر کمک کند. اما تأثیر آن بر Core Web Vitals به ساختار کلی صفحه ، CSS، JavaScript، تصاویر، فونت‌ها و سایر منابع نیز وابسته است. و صرفا با یک DOM تمیز پارامترهای Core web vitals بهبود نمیابد و باید مکمل ساختار بهینه سایت باشد.
چرا تمیز بودن DOM در موبایل بیشترین اهمیت را دارد؟
دستگاه‌های موبایل قدرت پردازش کمتری دارند و ممکن است اتصال اینترنت کندتر و ناپایدارتری نسبت به کامپیوترهای رومیزی داشته باشند. یک DOM سنگین و تو در تو که در یک لپ‌تاپ سریع با سرعت قابل قبول باز می شود، می‌تواند به طور قابل توجهی روی یک گوشی میان رده کند باشد.
اکثر ترافیک وب هم امروزه از طریق موبایل است و گوگل هم عمدتاً از نسخه موبایل سایت شما برای رتبه‌بندی استفاده می کند. صفحه‌ای که روی موبایل کند است، در جایی که بیشترین اهمیت را برای کاربران و جستجو دارد، کند است.
DOM تمیز، کار تجزیه، استایل‌بندی و طرح‌بندی مرورگر را کاهش می‌دهد، که این کار باعث لود سریع سایت در دستگاه های موبایل می شود. ساخت با ویجت های اتمی سبک المنتور به این معنی است که بازدیدکنندگان موبایل شما در همان ابتدا تفاوت را احساس می کنند.
چگونه DOM صفحه Elementor را بررسی کنیم؟
برای این کار، نیازی نیست حتماً کدنویسی وبسایت بلد باشید.
مرحله ۱:صفحه را در مرورگر باز کنید.
هر صفحه ای از سایت را که می خواهید تست کنید باز کنید.
مرحله ۲: بررسی page source
روی صفحه راست‌کلیک کرده و گزینه view page source یا ctrl+u را انتخاب کنید.
مرحله 3: ساختار تودرتو عناصر را بررسی کنید.
ببینید چه تعداد wrapper یک جزء ساده از صفحه مثلاً یک دکمه را احاطه کرده اند. اگر آن دکمه درون چندین کانتینرِ تو در تو قرار گرفته که شما آنها را ایجاد نکرده‌اید، این همان «عمق DOM» است که به ضرر شما عمل می‌کند.
مرحله 4: بعد از اصلاح، ساختار DOM را دوباره بررسی کنید.
در یک چیدمان تمیزِ مخصوص المنتور نسخه 4 ، همان دکمه در ساختاری با عمق بسیار کمتر قرار دارد.
تاثیر افزونه ها بر DOM تمیز المنتور
المنتور ورژن 4 DOM تمیزی تولید می کند، اما افزونه‌های شما می‌توانند بی‌سروصدا آن را خراب کنند.
افزونه‌ای که برای ورژن قدیمی المنتور ساخته شده ، ممکن است هر ویجتی تولید می کند را در کانتینرهای اضافی قرار دهد. اگر تعداد زیادی از این موارد را در صفحه قرار دهید، حتی در المنتور اتمیک نیز به یک DOM حجیم برمی‌گردید. شاید همه کارها را با ویجت‌های اتمی درست انجام دهید ولی همچنان سایت شما امتیاز عملکرد بهینه را نداشته باشد چون از افزونه های ناکارآمد و قدیمی استفاده کردید.
بنابراین افزونه‌هایی را انتخاب کنید که برای DOM تمیز V4 المنتور و ویجت‌های آن بر اساس ساختار اتمی ایجاد شده‌اند.
آیا یک DOM تمیز سئو را بهبود می‌بخشد؟
نه به طور مستقیم، اما می‌تواند عملکرد سئو را بهبود بخشد. یک DOM تمیز کدهای غیرضروری و تودرتوسازی بیش از حد را کاهش می‌دهد، که پردازش و رندر صفحات شما را برای مرورگرها آسان‌تر می کند. بنابراین، مزیت آن برای سئو غیرمستقیم است.
تست عملی DOM در المنتور ورژن 4
برای بررسی تاثیر ویجت های اتمیک، یک بخش یکسان را با ساختار قدیمی و بعد با المنتور ورژن 4 ایجاد و ساختار Wrapperها را در inspect مرورگر مقایسه کردیم.
در تصویر زیر یک کانتینر و دکمه ادیتور ورژن 3 المنتور برای تست قرار گرفته.
اما در تصویر زیر یک فلکس باکس و دکمه اتمیک ادیتور ورژن 4 در صفحه قرار گرفته و کاملا مشخص می شود که عمق DOM به نسبت قبل در سورس صفحه کمتر می شود.
سوالات متداول
DOM تمیز در المنتور نسخه 4 چیست؟
DOM تمیز در المنتور نسخه 4 به ساختار HTML سبک‌تری اشاره دارد که توسط معماری اتمی آن ایجاد شده است، با wrapper های غیرضروری و تودرتوی کمتر. این به مرورگر ساختار ساده‌تری برای تجزیه، سبک‌دهی و رندر می‌دهد.
آیا المنتور نسخه 4 حجم DOM را کاهش می‌دهد؟
بله ویجت های اتمی در المنتور نسخه 4 به‌گونه‌ای طراحی شده‌اند که ساختار DOM تمیزتر و با عمق کمتری نسبت به ساختارهای قدیمی تر المنتور ایجاد کنند. کاهش تعداد المان‌های غیرضروری می‌تواند حجم کدهای HTML و میزان پردازش مورد نیاز مرورگر برای رندر کردن صفحه را کاهش دهد که این امر منجر به بهبود زمان بارگذاری، واکنشگرایی و بهبود شاخص‌های Core Web Vitals می‌شود.
