آموزش جامع بهینهسازی المنتور یکی از دغدغههای اصلی طراحان وبسایت است که به دنبال تعادل میان طراحی بصری جذاب و سرعت بارگذاری خیرهکننده هستند. آموزش جامع بهینهسازی المنتور به شما کمک میکند تا با شناسایی گلوگاههای عملکردی، سایت خود را بدون افت کیفیت طراحی، بهینه کنید. اگرچه بسیاری بر این باورند که صفحهسازها ذاتاً با کندی همراه هستند، اما با دنبال کردن این آموزش جامع بهینهسازی المنتور، متوجه خواهید شد که تنظیمات درست و معماری اصولی کدها، ورق را به نفع شما برمیگرداند. در این راهنمای کامل، تمام ترفندهای تخصصی برای کاهش DOM Size و مدیریت منابع را بررسی میکنیم.
اصول و مبانی در آموزش جامع بهینهسازی المنتور
در اولین گام از آموزش جامع بهینهسازی المنتور، باید روی ساختار لایهها متمرکز شویم. استفاده از ساختار Flexbox Containers بهجای سکشنهای قدیمی، پایه و اساس بهینهسازی المنتور است؛ چرا که کدهای HTML اضافه (DOM) را به شدت کاهش میدهد. در این بخش از آموزش جامع بهینهسازی المنتور، درک میکنیم که لایههای تودرتو مستقیماً روی زمان رندر صفحه و LCP تأثیر منفی دارند. با استفاده از کانتینرهای فلکسباکس، مرورگر میتواند صفحه را بسیار سریعتر تحلیل و نمایش دهد؛ لذا قانون اول در این آموزش، استفاده از ساختارهای مدرن برای کاهش حجم خروجی است.
استراتژیهای فنی در آموزش جامع بهینهسازی المنتور
ادامه مبحث آموزش جامع بهینهسازی المنتور ما را به مدیریت منابع سنگین مانند فونتها و اسکریپتها میرساند. المنتور بهطور پیشفرض کتابخانههای آیکون سنگینی بارگذاری میکند؛ در این بخش از آموزش جامع بهینهسازی المنتور یاد میگیرید که چگونه با غیرفعال کردن فونتهای گوگل و بارگذاری محلی (Local) آنها، نهتنها حریم خصوصی را حفظ کنید، بلکه سرعت بارگذاری فونتها را به دلیل کاهش درخواستهای خارجی به سرورهای گوگل افزایش دهید. این استراتژی فنی، یکی از ارکان اصلی کاهش زمان بارگذاری در سایتهای سنگین المنتوری است.
بهینهسازی فونتها و آیکونها
فونتها و آیکونهای استفادهشده در المنتور نیز باید مدیریت شوند. بارگذاری چند خانواده فونت، وزنهای متعدد و نسخههای مختلف یک فونت، تعداد درخواستها و حجم فایلها را افزایش میدهد. برای بیشتر سایتها، استفاده از یک خانواده فونت با دو یا سه وزن موردنیاز، مانند 400، 500 و 700، کافی است.
فونتهای فارسی را تا حد امکان بهصورت محلی روی سرور سایت بارگذاری کنید و فقط وزنهایی را نگه دارید که واقعاً در طراحی استفاده میشوند. همچنین اگر در سایت از آیکونهای محدودی استفاده میکنید، فعال بودن کتابخانههای کامل و سنگین آیکون ضرورتی ندارد. در صورت امکان، آیکونهای موردنیاز را با فرمت SVG بهصورت کنترلشده استفاده کنید و پیش از بارگذاری، محتوای SVG را از نظر کدهای اضافی یا اسکریپتهای مشکوک بررسی کنید.
تنظیم بارگذاری CSS و JavaScript
در تنظیمات المنتور، قابلیتهای بهینهسازی مانند Improved Asset Loading و Improved CSS Loading را در صورت سازگاری با قالب و افزونههای سایت فعال کنید. این گزینهها میتوانند نحوه بارگذاری فایلهای CSS و JavaScript را بهینهتر کنند و از بارگذاری بخشی از منابع غیرضروری جلوگیری کنند.
توضیح : در تنظیمات المنتور، بخش تنظیمات ← امکانات و در نسخههای قدیمیتر بخش آزمایشها را بررسی کنید. در صورت وجود گزینههایی مانند بارگذاری بهینه منابع یا بارگذاری بهینه فایلهای CSS،یا اسامی مشابه، ابتدا از سایت نسخه پشتیبان بگیرید و سپس سازگاری آنها را با قالب و افزونههای فعال بررسی کنید. نام و محل این قابلیتها ممکن است در نسخهها و ترجمه های مختلف المنتور متفاوت باشد یا برخی از آنها بهصورت پیشفرض فعال شده باشند.
برای افزونههای جانبی المنتور نیز بخشهایی مانند مدیریت منابع، بارگذاری شرطی، مدیریت ویجتها و بارگذاری منابع هنگام نیاز را بررسی کنید. غیرفعال کردن ویجتهای بلااستفاده و جلوگیری از بارگذاری فایلهای غیرضروری در تمام صفحات، یکی از روشهای مؤثر برای کاهش حجم صفحات و افزایش سرعت سایت است.
با این حال، فعال کردن قابلیتهای آزمایشی بدون بررسی نتیجه ممکن است باعث بههمریختگی ظاهر صفحات شود. پس از هر تغییر، صفحه اصلی، منوی موبایل، فرمها، اسلایدرها، پاپآپها و صفحات ساختهشده با المنتور را در حالت ناشناس مرورگر آزمایش کنید. اگر از LiteSpeed Cache استفاده میکنید، پس از تغییر تنظیمات المنتور، کش سایت و کش CSS/JS را پاک کنید تا نتیجه واقعی نمایش داده شود.
در فشردهسازی فایلهای CSS و JavaScript نیز باید دقت کرد. ترکیب یا تأخیر در اجرای برخی فایلها ممکن است با المنتور یا افزونههای جانبی تداخل ایجاد کند. بنابراین بهجای فعال کردن همزمان همه گزینهها، تغییرات را مرحلهبهمرحله اعمال کنید و اثر هر تنظیم را با ابزارهایی مانند PageSpeed Insights و Lighthouse بسنجید.
تنظیمات پیشرفته و قابلیتهای آزمایشی (Experiments)
المنتور بهصورت مداوم در حال بهبود کارایی است. در بخش “Experiments” میتوانید ویژگیهایی را فعال کنید که به شدت به عملکرد سایت کمک میکنند. گزینه “Optimized DOM Output” یکی از مهمترین قابلیتهاست که کدهای اضافی و دراپدیوهای (div) غیرضروری را حذف میکند. همچنین “Inline Font Icons” برای کاهش درخواستهای CSS بسیار حیاتی است. دقت داشته باشید که برخی از این قابلیتها ممکن است با قالبهای قدیمی تداخل داشته باشند، بنابراین همیشه پس از فعالسازی، سایت را در یک محیط تست (Staging) بررسی کنید.
علاوه بر این، ویژگی “Improved Asset Loading” را بررسی کنید. این قابلیت به المنتور اجازه میدهد فقط فایلهای مورد نیاز برای هر صفحه را بارگذاری کند، بهجای اینکه کل کتابخانه CSS المنتور را در تمام صفحات فراخوانی کند. این یکی از کلیدیترین بخشها در پروژههای بزرگ است که به کاهش چشمگیر TTFB (زمان اولین بایت) کمک میکند.
نقش هاستینگ و کش در مکملسازی با المنتور
بسیاری از توسعهدهندگان فکر میکنند اگر تنظیمات المنتور را درست انجام دهند، کار تمام است. اما اگر هاستینگ شما ضعیف باشد یا کش درستی نداشته باشید، تمام تلاشهای شما هدر میرود. المنتور برای اجرا به حافظه PHP کافی نیاز دارد. اگر حافظه PHP (Memory Limit) سایت شما پایین باشد، رندر شدن صفحات پیچیده با المنتور بسیار کند خواهد بود. حداقل مقدار توصیه شده برای سایتهای سنگین المنتوری، ۵۱۲ مگابایت است.
همچنین، استفاده از کش سمت سرور (مانند LiteSpeed Cache) برای المنتور ضروری است. از آنجایی که المنتور فایلهای CSS دینامیک تولید میکند (در پوشه /uploads/elementor/css/)، حتماً تنظیمات کش را طوری پیکربندی کنید که این فایلها به درستی کش شوند و در صورت تغییر در طراحی، بهطور خودکار بازسازی (Regenerate) شوند.
یکپارچهسازی با کل خوشه محتوایی (Content Cluster)
المنتور در خلاء کار نمیکند. برای اینکه تمام تلاشهای شما برای بهینهسازی این صفحهساز به نتیجه برسد، باید آن را با استراتژیهای کلی سرعت سایت هماهنگ کنید. اگر در بخش تصاویر از فرمتهای مدرن استفاده نکنید، المنتور هر چقدر هم بهینه باشد، باز هم با کندی مواجه خواهید شد. برای تکمیل این مسیر، حتماً لینکهای زیر را که بخشی از خوشه محتوایی ما هستند، بررسی کنید:
- برای شروع زیرساختی، مقاله بهینهسازی سرعت سایت وردپرسی را بخوانید تا بفهمید چگونه هاست و کش با المنتور هماهنگ میشوند.
- در بخش محتوا، حتماً از فشردهسازی تصاویر بدون افت کیفیت استفاده کنید؛ چرا که سنگینترین المانهای صفحات المنتوری، تصاویر هستند.
- برای نحوه نمایش صحیح در موبایل و جلوگیری از پرش صفحه، راهنمای جامع تصاویر واکنشگرا را مطالعه کنید.
- برای درک بهتر تاثیر لایههای المنتور بر رندر اولیه، مقاله بهبود LCP را بررسی کنید.
- و نهایتاً برای سنجش نهایی و اطمینان از خروجی، مقیاسهای Core Web Vitals را در سایت خود تنظیم کنید.
خطاهای رایج در استفاده از المنتور که باید از آنها دوری کرد
یکی از بزرگترین اشتباهات، نصب افزونههای جانبی (Add-on Packs) برای کوچکترین تغییرات است. هر افزونهای که نصب میکنید، احتمالاً چندین فایل JS و CSS جدید به صفحه تزریق میکند که باعث کندی میشود. سعی کنید تا جای ممکن از قابلیتهای بومی خودِ المنتور (Custom CSS, Flexbox) استفاده کنید.
همچنین، استفاده از فونتهای فارسی که بهینه نشدهاند (حجم بالا) یا فرمتهای قدیمی (مثل ttf بهجای woff2) یکی دیگر از قاتلان سرعت در المنتور است. همیشه فونتهای خود را به فرمت woff2 تبدیل کنید که بیشترین فشردهسازی را دارد. در نهایت، فراموش نکنید که همیشه پس از تغییرات در طراحی، کش افزونههای کشینگ (مانند LiteSpeed Cache) را پاک کنید تا کدهای جدید CSS بازسازی شوند.
غیرفعال کردن ویجتهای اضافی المنتور
یکی از مؤثرترین مراحل در آموزش جامع بهینهسازی المنتور، غیرفعال کردن ویجتهایی است که در سایت استفاده نمیشوند. المنتور و افزونههای جانبی آن معمولاً مجموعه بزرگی از ویجتها، اسکریپتها و فایلهای CSS را در اختیار شما قرار میدهند؛ اما فعال بودن همه این امکانات بهتنهایی میتواند باعث افزایش حجم منابع و پیچیدهتر شدن ساختار صفحات شود.
در پیشخوان وردپرس، از مسیر Elementor > Editor > Home > Tools یا بخش تنظیمات مربوط به ویجتها، فهرست ابزارهای فعال را بررسی کنید. ویجتهایی مانند شمارنده، اسلایدر، نمودار، فلیپباکس، گالریهای پیشرفته، نقشه، پاپآپ و فرمهایی که در هیچ صفحهای استفاده نمیشوند، بهتر است غیرفعال شوند. این کار بهخصوص زمانی اهمیت دارد که از افزونههایی مانند Essential Addons، Premium Addons یا ElementsKit استفاده میکنید؛ زیرا این افزونهها ممکن است دهها ویجت و کتابخانه اضافی را به سایت اضافه کنند.
غیرفعالسازی ویجتهای بلااستفاده، جایگزین حذف افزونه نیست، اما میتواند تعداد درخواستهای غیرضروری و حجم فایلهای بارگذاریشده را کاهش دهد. پس از اعمال تغییرات، چند صفحه مهم سایت مانند صفحه اصلی، صفحات خدمات، نوشتهها و فرم تماس را بررسی کنید تا مطمئن شوید ویجتهای موردنیاز همچنان فعال هستند.
مدیریت افزونههای جانبی المنتور
افزونههای جانبی المنتور امکانات طراحی بیشتری فراهم میکنند، اما استفاده همزمان از چند افزونه مشابه میتواند باعث بارگذاری فایلهای تکراری، افزایش حجم DOM و ایجاد تداخل در استایلها شود. برای مثال، اگر چند افزونه مختلف ویجتهای مشابهی برای اسلایدر، آکاردئون، فرم یا گالری ارائه میکنند، بهتر است فقط یکی از آنها را نگه دارید و بقیه را غیرفعال کنید.
همچنین لازم نیست تمام ویجتهای یک افزونه جانبی در سراسر سایت فعال باشند. در صورت پشتیبانی افزونه از قابلیت Asset Manager یا مدیریت منابع، بارگذاری CSS و JavaScript هر ویجت را فقط برای صفحات موردنیاز فعال کنید. اگر یک ویجت فقط در صفحه تماس استفاده شده است، نباید فایلهای مربوط به آن در تمام نوشتهها و صفحات سایت بارگذاری شوند.
قبل از حذف یا غیرفعالسازی هر افزونه، صفحات مهم را بررسی و از پایگاه داده و فایلهای سایت نسخه پشتیبان تهیه کنید. برخی صفحات ممکن است از ویجتهای قدیمی استفاده کنند و حذف ناگهانی افزونه باعث نمایش خطا یا از بین رفتن بخشی از طراحی شود.
استفاده صحیح از کانتینرهای Flexbox
در پروژههای جدید، استفاده از Flexbox Container معمولاً ساختار سبکتری نسبت به سکشنها و ستونهای قدیمی المنتور ایجاد میکند. در طراحیهای قدیمی، برای ساخت یک ردیف ساده ممکن است چندین سکشن، ستون، inner section و المان تو در تو ایجاد شود. این ساختار تعداد عناصر DOM را افزایش میدهد و پردازش صفحه را برای مرورگر دشوارتر میکند.
هنگام طراحی، هر کانتینر را فقط زمانی ایجاد کنید که واقعاً به آن نیاز دارید. از ساخت کانتینرهای تودرتوی غیرضروری، ستونهای خالی و المانهای مخفی متعدد برای نسخه موبایل خودداری کنید. اگر تنها تفاوت یک بخش در موبایل و دسکتاپ مربوط به فاصله یا اندازه فونت است، بهتر است آن را با تنظیمات واکنشگرا کنترل کنید و برای هر دستگاه یک نسخه جداگانه از همان محتوا نسازید.
کاهش تعداد عناصر HTML بهخصوص در بخش بالایی صفحه، میتواند زمان پردازش و رندر اولیه را کاهش دهد و به بهبود شاخصهایی مانند LCP و INP کمک کند.
کاهش استفاده از المانهای سنگین
برخی المانهای المنتور، بهدلیل استفاده از انیمیشن، اسکریپتهای تعاملی یا کتابخانههای خارجی، منابع بیشتری مصرف میکنند. اسلایدرهای بزرگ، پسزمینههای ویدیویی، انیمیشنهای متعدد، شمارندههای متحرک، پاپآپهای پیچیده و گالریهای پیشرفته نمونههایی از این موارد هستند.
در صفحات مهم سایت، بهخصوص صفحه اصلی و صفحات فرود، از انیمیشن فقط برای هدایت توجه کاربر استفاده کنید. فعال کردن افکت ورود برای تعداد زیادی از عناصر، استفاده از حرکتهای همزمان یا اجرای اسکرولافکتهای متعدد میتواند پردازش مرورگر را افزایش دهد و تجربه کاربر را در تلفنهای ضعیف کاهش دهد.
برای محتوای مهم بالای صفحه، طراحی ساده و پایدار معمولاً عملکرد بهتری دارد. در صورتی که از ویدیو استفاده میکنید، تصویر جایگزین مناسبی تعیین کنید، فایل ویدیو را از نظر حجم بهینه کنید و اجازه ندهید ویدیوی سنگین، محتوای اصلی صفحه را به تأخیر بیندازد.
بهینهسازی تصاویر در صفحات المنتوری
تصاویر استفادهشده در ویجتهای Image، Image Box، Gallery و پسزمینه سکشنها باید پیش از بارگذاری بهینه شوند. برای هر تصویر، ابعاد واقعی موردنیاز را تعیین کنید؛ زیرا بارگذاری یک تصویر ۲۵۰۰ پیکسلی برای نمایش در یک کادر ۴۰۰ پیکسلی، حجم صفحه را بدون دلیل افزایش میدهد.
فرمتهایی مانند WebP و AVIF معمولاً حجم کمتری نسبت به JPEG و PNG دارند. برای تصاویر بالای صفحه، کیفیت، ابعاد و اولویت بارگذاری را با دقت تنظیم کنید. تصویر شاخص یا تصویر اصلی بخش ابتدایی صفحه نباید بهصورت Lazy Load بارگذاری شود، زیرا ممکن است بارگذاری محتوای اصلی را به تأخیر بیندازد. در مقابل، تصاویر پایینتر صفحه میتوانند با بارگذاری تنبل، پس از آماده شدن بخش قابل مشاهده، دریافت شوند.
برای جلوگیری از جابهجایی layout، مقدار مناسب width و height یا نسبت ابعاد مشخص برای تصاویر در نظر بگیرید. این کار به کاهش CLS کمک میکند و باعث میشود محتوای صفحه هنگام بارگذاری ناگهان جابهجا نشود.
بررسی طراحی واکنشگرا بدون ایجاد محتوای تکراری
المنتور امکان مخفی کردن یک المان در دسکتاپ، تبلت یا موبایل را فراهم میکند؛ اما مخفی کردن چند نسخه متفاوت از یک محتوا همیشه به معنی حذف آن از کد HTML نیست. اگر برای هر دستگاه نسخه جداگانهای از یک بخش بسازید، ممکن است حجم DOM و تعداد عناصر پردازشی افزایش پیدا کند.
بهتر است ابتدا یک ساختار مشترک ایجاد کنید و تفاوتهای نمایش را با تنظیمات واکنشگرای المنتور کنترل نمایید. فقط در شرایطی که طراحی موبایل و دسکتاپ واقعاً تفاوت اساسی دارد، از نسخههای جداگانه استفاده کنید. پس از طراحی، صفحه را در چند اندازه نمایش بررسی کنید تا متنها، دکمهها، تصاویر و فاصلهها بدون همپوشانی یا شکست ظاهری نمایش داده شوند.
این رویکرد علاوه بر کاهش حجم صفحه، نگهداری طراحی را نیز سادهتر میکند و احتمال ایجاد خطا در ویرایشهای آینده را کاهش میدهد.
راهنمای تخصصی تنظیمات پیشنهادی (Checklist)
برای اینکه در عمل، بهترین نتیجه را بگیرید، این چکلیست را در پنل المنتور خود اعمال کنید:
- تنظیمات پیشرفته: گزینه CSS Print Method را روی Internal Embedding بگذارید (در صورت استفاده از کش حرفهای).
- Experiments: تمام گزینههای مربوط به DOM Output و Inline Icons را فعال کنید.
- فونتها: تمام فونتهای گوگل را غیرفعال کرده و از فونتهای محلی استفاده کنید.
- سایز کانتینرها: تا جای ممکن از ساختارهای
GridوFlexboxاستفاده کنید و ازSectionهای قدیمی فاصله بگیرید. - استایلهای گلوبال: بهجای دادن استایل دستی به هر المان، از Global Colors و Global Fonts استفاده کنید تا کد CSS سایت تکراری نباشد.
مستندات رسمی برای حرفهایها
برای مطالعه دقیق مستندات فنی المنتور و بررسی ویژگیهای جدید Performance، به لینک زیر مراجعه کنید:
Elementor Performance Optimization Documentation
این مستندات مرجع اصلی برای بررسی تنظیمات Experimental و روشهای بهینه توسعه با المنتور است.
