قبل از اینکه از هر ویجتی در المنتور استفاده کنید، این مقاله را بخوانید. المنتور ویجت‌های زیادی دارد که طراحی را سریع‌تر می‌کند، اما بعضی از آن‌ها فایل‌های CSS و JavaScript سنگینی لود می‌کنند که حتی اگر محتوای خوبی هم داشته باشید، گوگل و کاربر صبرشان را از دست می‌دهند. در این مقاله از وبتا تیم ویجت های سنگین المنتور را بررسی خواهیم کرد.
لیست ویجت های سنگین المنتور
| ویجت المنتور | تأثیر روی سرعت | دلیل اصلی |
| اسلایدر / کاروسل(slider) | خیلی زیاد | کتابخانه Swiper.js سنگین |
| گالری تصاویر( Gallery) | خیلی زیاد | Lightbox + چند اسکریپت |
| پخش‌کننده ویدیو(Video) | خیلی زیاد | لود کامل YouTube API |
| نقشه گوگل( Google Maps) | خیلی زیاد | Google Maps API سنگین |
| پارالاکس / افکت پس‌زمینه(Parallax / Background Effects) | خیلی زیاد | اسکریپت‌های scroll مداوم |
| شمارنده معکوس(Countdow Timer | متوسط | JS تایمر همیشه فعال |
| شمارنده اعداد(Counter / Number Counter) | متوسط | JS انیمیشن اعداد |
| نوار پیشرفت(Progress Bar) | متوسط | انیمیشن CSS+JS پیچیده |
| پاپ‌آپ( Popup Builder) | خیلی زیاد | کل پاپ‌آپ حتی اگر نمایش نیابد لود می‌شود |
| نمودار / چارت(Charts (Pro)) | خیلی زیاد | کتابخانه Chart.js کامل |
| نمایش پست‌ها Masonry( Posts — Masonry Layout) | خیلی زیاد | کتابخانه Masonry.js |
| متن تایپ‌شونده( Animated Headline / Typewriter) | متوسط | JS انیمیشن متن |
| اشتراک‌گذاری شبکه اجتماعی(Social Share Buttons) | متوسط | لود SDK شبکه‌های اجتماعی |
| اکوردئون / تب پیشرفته( Nested Accordion / Advanced Tabs) | متوسط | JS تودرتوی سنگین |
| فرم تماس المنتور( Form (Elementor Pro)) | متوسط | اسکریپت‌های validation |
چرا این ویجت های المنتور سایت را کند می‌کنند؟
برای اینکه بفهمیم چرا بعضی از ویجت های المنتور سنگین هستند، باید بدانیم وقتی صفحه‌ای در مرورگر باز می‌شود چه اتفاقی می‌افتد. مرورگر باید همه فایل‌های CSS و JavaScript صفحه را دانلود و پردازش کند ، parse و اجرا کند. و تنها بعد از این مرحله است که محتوا نمایش داده می‌شود.
المنتور برای هر ویجت، فایل‌های جانبی خاص خودش را لود می‌کند. مشکل اینجاست که بعضی ویجت‌ها به کتابخانه‌های JavaScript بزرگ وابسته هستند .مثل Swiper برای اسلایدر، یا Chart.js برای نمودار.
| ⚠️ المنتور این فایل‌ها را حتی اگر ویجت در پایین صفحه باشد و کاربر هیچ‌وقت به آن نرسد هم لود می‌کند. یعنی هزینه سرعتی را می‌پردازید بدون اینکه کاربر آن ویجت را ببیند. |
بررسی تفصیلی هر ویجت المنتور
| 🎠 اسلایدر / کاروسل ( Slider / Carousel) خیلی سنگین اسلایدر محبوب‌ترین و در عین حال مضرترین ویجت المنتور از نظر سرعت است. المنتور برای این ویجت کتابخانه Swiper.js را لود می‌کند که به‌تنهایی حدود ۱۳۰ کیلوبایت JavaScript و CSS اضافی به صفحه اضافه می‌کند. • Swiper.js: ~۸۰KB JS + ۵۰KB CSS فقط برای یک اسلایدر • تمام تصاویر اسلاید در لود اولیه فراخوانده می‌شوند • این در حالی است که کاربران معمولاً فقط اسلاید اول را می‌بینند.
✓ جایگزین سبک: یک تصویر ثابت باکیفیت به‌جای اسلایدر. اگر حتماً اسلایدر می‌خواهید، از CSS-only slider استفاده کنید بدون JavaScript استفاده کنید. |
| 🗺️ نقشه گوگل (Google Maps Widget) خیلی سنگین ویجت نقشه گوگل در المنتور به‌صورت پیش‌فرض کل Google Maps JavaScript API را از همان لحظه لود صفحه فراخوانی می‌کند. این API به‌تنهایی می‌تواند بیش از ۵۰۰ کیلوبایت به صفحه اضافه کند. • Google Maps API: بیش از ۵۰۰KB منابع خارجی • درخواست به سرورهای خارجی = DNS lookup اضافی • حتی اگر نقشه پایین صفحه باشد هم در لود اولیه فراخوانده می‌شود
✓ جایگزین سبک: به‌جای ویجت نقشه، یک تصویر screenshot از گوگل‌مپ بگذارید که با کلیک به نقشه واقعی لینک شود. یا از تکنیک Lazy Load Maps با کلیک کاربر استفاده کنید.
|
| 🎬 پخش‌کننده ویدیو ( Video Widget) خیلی سنگین وقتی ویجت ویدیوی المنتور را با یوتیوب استفاده می‌کنید، مرورگر YouTube IFrame API را لود می‌کند؛ حتی قبل از اینکه کاربر روی دکمه پخش کلیک کند. • YouTube IFrame API به‌صورت خودکار لود می‌شود • چند cookie تحلیلی گوگل هم همراهش می‌آید • Thumbnail ویدیو با کیفیت بالا لود می‌شود حتی بدون پخش
✓ جایگزین سبک: از تکنیک YouTube Facade استفاده کنی، فقط تصویر پیش‌نمایش نشان می‌دهید و ویدیو فقط وقتی کاربر کلیک کرد لود می‌شود. |
| ✨ پارالاکس و افکت‌های پس‌زمینه Parallax / Background Effects خیلی سنگین افکت‌های پارالاکس نیاز به اجرای JavaScript در هر فریم از اسکرول کاربر دارند. این یعنی CPU مرورگر دائماً مشغول است که روی موبایل‌های ضعیف‌تر کاملاً محسوس می‌شود. • JS در هر رویداد scroll اجرا می‌شود — بارگذاری مداوم CPU • روی موبایل‌های ضعیف باعث لرزش و کندی می‌شود • گوگل این نوع انیمیشن‌ها را در Core Web Vitals منفی ارزیابی می‌کند
✓ جایگزین سبک: تصویر پس‌زمینه ثابت با CSS background-attachment:fixed — همان ظاهر بصری بدون هیچ JavaScript. |
| 🎭 پاپ‌آپ بیلدر Popup Builder خیلی سنگین پاپ‌آپ‌های المنتور یک مشکل اساسی دارند: کل محتوای پاپ‌آپ در HTML صفحه لود می‌شود حتی اگر کاربر هیچ‌وقت روی دکمه‌ای که پاپ‌آپ را باز می‌کند کلیک نکند. • محتوای پاپ‌آپ حتی بدون نمایش کاملاً لود می‌شود • اگر چند پاپ‌آپ داشته باشید، همه به‌طور همزمان لود می‌شوند • اسکریپت‌های تشخیص رفتار کاربر همیشه فعال هستند
✓ جایگزین سبک: افزونه‌های سبک‌تر مثل Hustle یا OptinMonster که پاپ‌آپ را فقط در زمان نیاز لود می‌کنند. |
ویجت‌های سبک و پیشنهادی المنتور
خوشبختانه المنتور ویجت‌های زیادی هم دارد که کاملاً سبک هستند. اینها باید ستون فقرات طراحی‌تان باشند:
| متن و عنوان Heading / Text Editor سبک‌ترین ویجت المنتور — فقط HTML ساده بدون هیچ اسکریپتی | تصویر ساده Image Widget تصویر بدون lightbox — کاملاً CSS |
| دکمه Button Widget یک لینک HTML با استایل — بدون JS | آیکون و آیکون‌باکس Icon / Icon Box Font Awesome که معمولاً از قبل لود شده |
| جداکننده Divider یک خط CSS — سبک‌ترین ویجت ممکن | اکوردئون ساده Accordion (Basic) JS سبک برای باز و بسته شدن — قابل قبول |
| تب‌های ساده Tabs (Basic) JS کم برای سوئیچ بین تب‌ها — قابل قبول | ستاره‌بندی Star Rating CSS خالص — هیچ JS ندارد |
| نقل‌قول ثابت Testimonial (Single) بدون اسلایدر — کاملاً سبک | فضای خالی Spacer فقط یک div با ارتفاع — صفر بار اضافی |
| ✓ قانون طلایی: قبل از استفاده از هر ویجت جدید در المنتور، از خودتان بپرسید: «آیا این ویجت JavaScript لود می‌کند؟» اگر جواب بله است، ببینید آیا می‌توانید همان نتیجه را با CSS خالص بگیرید. |
چطور بفهمیم کدام ویجت سایت را کند کرده؟
سه روش ساده برای پیدا کردن ویجت مقصر:
- Chrome DevTools — تب Network: صفحه را در Chrome باز کنید، F12 بزنید، تب Network را انتخاب کنید و صفحه را رفرش کنید.
- PageSpeed Insights: آدرس صفحه را در pagespeed.web.dev وارد کنید. در بخش Opportunities می‌بینید کدام اسکریپت‌ها مشکل‌ساز هستند.
- روش آزمون و خطا: ویجت‌های مشکوک را موقتاً حذف کنید، دوباره تست بگیرید و ببینید امتیاز بالا رفت یا نه.
| ✓ ابزار پیشنهادی: افزونه Query Monitor در وردپرس نشان می‌دهد کدام اسکریپت‌ها و استایل‌ها در هر صفحه لود می‌شوند و از کجا می‌آیند — خیلی مفید برای پیدا کردن ویجت مقصر. |
| نتیجه‌گیری المنتور یک ابزار قدرتمند است اما قدرت آن با مسئولیت همراه است. هر ویجت المنتور که اضافه می‌کنید، یک هزینه سرعتی دارد بعضی کم، بعضی زیاد. اسلایدر، نقشه گوگل، پارالاکس، پاپ‌آپ و ویدیو یوتیوب بدون lazy load این ها چند ویجت المنتور هستند که اگر امروز این ویجت های المنتور را از سایتتان حذف یا جایگزین کنید، بیشترین تأثیر را روی سرعت می‌بینید. قانون ساده: هر چیزی که حرکت دارد، احتمالاً JavaScript دارد. هر چیزی که JavaScript دارد، سرعت سایت را پایین می‌آورد. قبل از استفاده از هر ویجت المنتور زیبایی، از خودتان بپرسید آیا ارزشش را دارد یا نه؟ |
