طراحی سایت با المنتور (Elementor) یکی از روش‌های محبوب ساخت وب‌سایت‌های وردپرسی است. این صفحه‌ساز به طراحان اجازه می‌دهد بدون نیاز به کدنویسی پیچیده، صفحات زیبا و حرفه‌ای طراحی کنند.
اما یک مشکل وجود دارد!
گاهی سایتی که با المنتور طراحی شده، از نظر ظاهری بسیار جذاب است، اما هنگام بارگذاری با مشکلاتی مثل تأخیر، کندی نمایش محتوا و عملکرد ضعیف در موبایل مواجه می‌شود.
در چنین شرایطی معمولاً اولین متهم المنتور است. اما آیا واقعاً خود المنتور عامل اصلی کندی سایت است؟
لزوماً نه!
سرعت یک سایت وردپرسی به مجموعه‌ای از عوامل وابسته است؛ از کیفیت هاست و قالب گرفته تا افزونه‌ها، تصاویر، فونت‌ها و نحوه پیاده‌سازی صفحات.
در این مقاله ۷ اشتباه رایج در طراحی سایت با المنتور را بررسی می‌کنیم که می‌توانند عملکرد سایت را تحت تأثیر قرار دهند.
۱. استفاده بیش از حد از ویجت‌ها و المان‌های غیرضروری
یکی از اشتباهات رایج طراحان تازه‌کار، استفاده بیش از اندازه از ویجت‌های المنتور است.
گاهی برای طراحی یک بخش ساده، چندین کانتینر تو در تو، ویجت و المان اضافی ایجاد می‌شود؛ درحالی‌که همان نتیجه را می‌توان با ساختار ساده‌تری پیاده‌سازی کرد.
هرچقدر ساختار صفحه پیچیده‌تر باشد، مدیریت و پردازش آن نیز می‌تواند دشوارتر شود.
راهکار چیست؟
- از ویجت‌های غیرضروری استفاده نکنید.
- ساختار صفحات را تا حد امکان ساده نگه دارید.
- از کانتینرهای تو در تو فقط در صورت نیاز استفاده کنید.
- برای طراحی هر بخش، ابتدا ساده‌ترین راهکار را بررسی کنید.
نکته: تعداد ویجت‌ها به‌تنهایی معیار سنجش سرعت نیست؛ نوع ویجت، کد تولیدشده و منابع موردنیاز آن نیز اهمیت دارند.
۲. استفاده از تصاویر سنگین و بهینه‌نشده
تصاویر یکی از عوامل مهم در حجم صفحات وب هستند.
فرض کنید برای یک صفحه اصلی، چند تصویر با حجم ۲ تا ۴ مگابایت بارگذاری کرده‌اید. در این شرایط حتی اگر طراحی صفحه بسیار ساده باشد، کاربر برای دریافت اطلاعات باید حجم زیادی از داده را دانلود کند.
این مشکل به‌خصوص در اینترنت موبایل بیشتر خودش را نشان می‌دهد.
راهکار چیست؟
- تصاویر را متناسب با ابعاد نمایش بهینه کنید.
- در صورت سازگاری، از فرمت WebP یا AVIF استفاده کنید.
- برای تصاویر غیرضروری از Lazy Loading استفاده کنید.
- تصاویر بزرگ را بدون دلیل در ابعاد اصلی بارگذاری نکنید.
- برای تصویر اصلی بالای صفحه، بارگذاری را به‌درستی مدیریت کنید و آن را بی‌دلیل Lazy Load نکنید.
ابزارهای کاربردی برای این کار:
- Squoosh
- TinyPNG
- ShortPixel
- Imagify
۳. نصب افزونه‌های متعدد برای امکانات ساده
یکی از مشکلات رایج در پروژه‌های وردپرسی، نصب افزونه‌های متعدد برای اضافه کردن قابلیت‌های کوچک است.
برای مثال، ممکن است طراح برای ایجاد یک اسلایدر، افکت حرکتی، آیکون یا تب ساده چند افزونه مختلف نصب کند.
مشکل زمانی ایجاد می‌شود که این افزونه‌ها فایل‌های CSS و JavaScript اضافی را در صفحات بارگذاری کنند یا عملکردهای مشابهی داشته باشند.
راهکار چیست؟
- آیا المنتور خودش این قابلیت را دارد؟
- آیا قالب فعلی چنین امکانی ارائه می‌کند؟
- آیا واقعاً به این قابلیت نیاز داریم؟
- آیا افزونه در تمام صفحات فایل‌های اضافی بارگذاری می‌کند؟
تعداد افزونه‌ها به‌تنهایی معیار کندی نیست. یک افزونه سنگین می‌تواند از چند افزونه سبک مشکل‌سازتر باشد.
۴. استفاده نادرست از انیمیشن‌ها و افکت‌های حرکتی
افکت‌های حرکتی می‌توانند ظاهر سایت را جذاب‌تر کنند، اما استفاده بیش از اندازه از آن‌ها همیشه تصمیم درستی نیست.
افکت‌هایی مانند حرکت هم‌زمان چند المان، اسکرول پارالاکس و انیمیشن‌های پیچیده ممکن است باعث افزایش فشار پردازشی مرورگر شوند.
به‌خصوص در گوشی‌های ضعیف‌تر، این مسئله می‌تواند تجربه کاربری را تحت تأثیر قرار دهد.
راهکار چیست؟
- از انیمیشن‌ها فقط در بخش‌های مهم استفاده کنید.
- افکت‌های غیرضروری را حذف کنید.
- از انیمیشن‌های ساده و سبک استفاده کنید.
- عملکرد صفحات را روی موبایل آزمایش کنید.
- ترجیحاً از انیمیشن‌هایی استفاده کنید که با ویژگی‌های مناسب CSS اجرا می‌شوند.
۵. استفاده از فونت‌های متعدد و غیربهینه
فونت یکی از جزئیاتی است که در طراحی سایت فارسی اهمیت زیادی دارد.
بعضی طراحان برای عنوان‌ها، متن‌ها، دکمه‌ها و بخش‌های مختلف از فونت‌ها و وزن‌های متعددی استفاده می‌کنند.
این کار می‌تواند تعداد درخواست‌های شبکه و حجم فایل‌های دانلودی را افزایش دهد.
راهکار چیست؟
- از یک خانواده فونت مناسب استفاده کنید.
- فقط وزن‌های موردنیاز را بارگذاری کنید.
- در صورت امکان از فرمت WOFF2 استفاده کنید.
- فونت‌های غیرضروری را حذف کنید.
- برای فونت اصلی متن، تنظیم مناسب Font Display را در نظر بگیرید.
یکی از مواردی که در بهینه‌سازی سرعت سایت‌های وردپرسی باید بررسی شود، بارگذاری فونت‌های Google Fonts است.
بعضی قالب‌ها و افزونه‌ها به‌صورت پیش‌فرض فونت‌های گوگل را از سرورهای خارجی دریافت می‌کنند. این موضوع می‌تواند باعث ایجاد درخواست HTTP اضافی و در برخی شرایط تأخیر در نمایش متن‌ها شود.
برای سایت‌های فارسی که از فونت‌های محلی مانند ایران‌سنس، وزیرمتن یا یکان استفاده می‌کنند، معمولاً نیازی به بارگذاری فونت‌های گوگل نیست.
روش اول: غیرفعال کردن فونت‌های گوگل از تنظیمات المنتور
۱. وارد پیشخوان وردپرس شوید.
۲. از منوی Elementor وارد بخش Settings شوید.
۳. در تب Advanced، گزینه Google Fonts را پیدا کنید.
۴. مقدار آن را روی Disable قرار دهید.
۵. تغییرات را ذخیره کنید.
توجه: محل و نام این گزینه ممکن است در نسخه‌های مختلف المنتور متفاوت باشد.
روش دوم: غیرفعال کردن فونت‌های گوگل با کدنویسی
اگر تنظیمات بالا در نسخه المنتور شما وجود نداشت یا می‌خواهید از طریق کد این کار را انجام دهید، می‌توانید از فیلتر زیر استفاده کنید:
```php
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
```
این کد را در فایل functions.php قالب فرزند (Child Theme) یا با افزونه‌ای مانند Code Snippets قرار دهید.
توجه: این فیلتر برای جلوگیری از چاپ فونت‌های گوگل توسط بخش فرانت‌اند المنتور است و لزوماً درخواست‌هایی را که قالب یا افزونه‌های دیگر ایجاد می‌کنند متوقف نمی‌کند.
روش سوم: بررسی و حذف درخواست‌های باقی‌مانده
بعد از غیرفعال‌سازی، سایت را با ابزارهای زیر بررسی کنید:
- Chrome DevTools و بخش Network
- GTmetrix
- Google PageSpeed Insights
در بخش Network عبارت‌های زیر را جست‌وجو کنید:
```text
fonts.googleapis.com
fonts.gstatic.com
```
اگر همچنان درخواست‌هایی مشاهده می‌کنید، احتمالاً قالب یا یکی از افزونه‌ها مسئول بارگذاری فونت است و باید منبع آن را پیدا کنید.
یک نکته مهم:
غیرفعال کردن Google Fonts به معنی حذف فونت‌های سایت نیست. اگر فونت فارسی یا انگلیسی موردنیاز سایت را به‌صورت محلی تعریف نکرده باشید، ممکن است ظاهر نوشته‌ها تغییر کند یا فونت جایگزین مرورگر نمایش داده شود.
به همین دلیل، بهتر است ابتدا فونت‌های موردنیاز را به‌صورت محلی و با فرمت WOFF2 بارگذاری کنید و سپس فونت‌های گوگل غیرضروری را غیرفعال کنید.
۶. نادیده گرفتن تنظیمات بهینه‌سازی المنتور
المنتور تنظیمات مختلفی برای بهبود عملکرد و کاهش کدهای اضافی ارائه می‌دهد.
نادیده گرفتن این قابلیت‌ها می‌تواند باعث شود سایت از امکانات بهینه‌سازی موجود استفاده نکند.
بسته به نسخه المنتور و تنظیمات فعال، گزینه‌هایی مانند موارد زیر قابل بررسی هستند:
- Optimized DOM Output
- Improved Asset Loading
- Optimized Image Loading
- CSS Print Method
- Lazy Load Background Images
البته نام و محل برخی تنظیمات ممکن است بین نسخه‌های مختلف تغییر کند.
راهکار چیست؟
وارد پیشخوان وردپرس شوید و از بخش تنظیمات المنتور، گزینه‌های Performance را بررسی کنید.
قبل از فعال‌سازی تنظیمات جدید، از سایت نسخه پشتیبان تهیه کنید و پس از تغییرات، صفحات مهم را از نظر ظاهری و عملکردی آزمایش کنید.
۷. طراحی سایت بدون تست سرعت و تجربه کاربری
شاید مهم‌ترین اشتباه همین مورد باشد!
بعضی طراحان بعد از اتمام طراحی، فقط ظاهر سایت را بررسی می‌کنند و تصور می‌کنند پروژه آماده تحویل است.
اما یک سایت زیبا الزاماً سایت سریعی نیست.
برای بررسی عملکرد واقعی باید از ابزارهای تخصصی استفاده کنید.
ابزارهای پیشنهادی:
| Google PageSpeed Insights | بررسی عملکرد و Core Web Vitals |
| GTmetrix | تحلیل زمان بارگذاری و منابع |
| WebPageTest | بررسی جزئیات بارگذاری صفحات |
| Chrome DevTools | تحلیل درخواست‌ها و مشکلات فنی |
در این بررسی‌ها بهتر است به سه شاخص اصلی Core Web Vitals توجه کنید:
- LCP: مدت زمان نمایش بزرگ‌ترین محتوای قابل مشاهده صفحه.
- INP: میزان پاسخ‌گویی صفحه به تعاملات کاربر.
- CLS: میزان جابه‌جایی غیرمنتظره عناصر صفحه.
مقادیر مطلوب گوگل عبارت‌اند از:
| LCP | حداکثر ۲.۵ ثانیه |
| INP | حداکثر ۲۰۰ میلی‌ثانیه |
| CLS | حداکثر ۰.۱ |
این اعداد معیارهای رسمی گوگل هستند و صرفاً رسیدن به یک امتیاز بالا در PageSpeed به معنی موفقیت کامل سایت نیست.
جمع‌بندی: آیا المنتور برای طراحی سایت سریع مناسب است؟
المنتور به‌خودی‌خود به معنی طراحی سایت کند نیست.
آنچه اهمیت دارد، نحوه استفاده از این ابزار، کیفیت زیرساخت، انتخاب قالب، تعداد و کیفیت افزونه‌ها و رعایت اصول فنی طراحی سایت است.
اگر می‌خواهید با المنتور سایت حرفه‌ای و سریعی طراحی کنید، بهتر است به‌جای تمرکز صرف بر زیبایی ظاهری، از ابتدای پروژه به عملکرد سایت نیز توجه داشته باشید.
یک طراح حرفه‌ای فقط کسی نیست که بتواند یک صفحه زیبا بسازد؛ بلکه کسی است که بتواند همان صفحه را با عملکرد مناسب، تجربه کاربری خوب و ساختار فنی اصولی پیاده‌سازی کند.
یک سؤال برای طراحان وردپرس:
به تجربه شما، بزرگ‌ترین عامل کندی سایت‌هایی که با المنتور طراحی شده‌اند چیست؟
استفاده بیش از حد از افزونه‌ها، تصاویر سنگین، ساختار پیچیده صفحات یا ضعف هاست؟
تجربه خودتان را در بخش نظرات بنویسید.
