المنتور کند شده؟ راهنمای جامع افزایش سرعت و رفع باگ‌های رایج المنتور (۲۰۲۵)

 سرعت المنتور، بهینه‌سازی Elementor، رفع کندی وردپرس، Core Web Vitals وردپرس، بهینه‌سازی تصاویر WebP، کش وردپرس، بهینه‌سازی JS/CSS، Redis، LiteSpeed Cache

خلاصهٔ اجرایی (TL;DR):

• اول عیب‌یابی داده‌محور: اندازه‌گیری TTFB، LCP، INP، CLS با Lighthouse و DevTools.

• بردهای سریع ۳۰ دقیقه‌ای: Regenerate CSS & Data، فعال‌سازی بهینه‌سازهای خود المنتور، خاموش‌کردن افزونه‌های سنگین غیرضروری، تغییر ساختارهای تو‌در‌تو.

• بهینه‌سازی عمیق: تصاویر (WebP/AVIF)، فونت‌ها (woff2 + preload)، JS/CSS (defer/delay + UUCSS با whitelist)، کش لایه‌ای (Page + Object)، CDN، ارتقای PHP/سرور.

• الگوی صفحه سبک در المنتور: Container (Flexbox)، حداقل‌سازی DOM، اجتناب از Lottie/ویدئوهای سنگین در above-the-fold، پیش‌بارگذاری تصویر LCP.

• رفع باگ‌های پرتکرار: «Elementor Not Loading»، پنل خاکستری، ۵۰۰/۵۰۲، ذخیره‌نشدن تغییرات، تداخل جی‌کوئری/افزونه.

۱) علائم کندی و اثر آن بر سئو/فروش

• TTFB بالا (بیش از ۳۰۰ms): نشان‌دهنده مشکل سرور/کش.

• LCP بالای ۲.۵s: معمولاً بخاطر تصویر بزرگ هدر/هیرو، فونت‌ها یا اسکریپت‌های بلاک‌کننده.

• INP (تعامل‌پذیری) بالای ۲۰۰ms: اسکریپت‌های زیاد، رویدادهای اسکرول/کلیک سنگین، انیمیشن‌های JS.

• CLS: جابه‌جایی چیدمان به خاطر تصاویر/فونت‌های بدون ابعاد یا بنرهای دیررندر.

• اسکرول/ادیتور کند در المنتور: DOM حجیم (Section/Column تو‌در‌تو)، ویجت‌های سنگین، Motion Effects زیاد.

۲) عیب‌یابی حرفه‌ای در ۳۰ دقیقه

1. Lighthouse & PageSpeed (موبایل/دسکتاپ): LCP/INP/CLS و فرصت‌ها را یادداشت کن.

2. DevTools → Network:

   • سایز صفحه < ۱.۵MB (موبایل هدف ایده‌آل)

   • درخواست‌ها < ۷۰ (موبایل)

   • بزرگ‌ترین فایل‌ها (Top offenders) را شناسایی کن.

3. Coverage: CSS/JS استفاده‌نشده را ببین.

4. Query Monitor (پلاگین): کندترین کوئری‌ها، هوک‌ها، درخواست‌های خارجی.

5. Site Health وردپرس: هشدارها، نسخه PHP، ماژول‌ها.

6. کنسول مرورگر: ارورها/هشدارهای JS (تداخل نسخه jQuery/Third-party).

۳) بردهای سریع (Quick Wins)

• Elementor → Tools → Regenerate CSS & Data

• پاک‌سازی کش (پلاگین و CDN) و غیرفعال‌کردن موقت افزونه‌های غیرضروری

• تبدیل Section/Column به Container (Flexbox) و کاهش تو‌در‌تویی

• حذف افکت‌های Motion/Parallax غیرضروری در Above-the-Fold

• جایگزینی آیکون‌فونت با SVG (Inline SVG/Inline Font Icons)

۴) تنظیمات پیشنهادی داخل المنتور (Performance First)

Elementor → Settings → Advanced/Experiments (یا Performance):

• Optimized DOM Output: فعال ✅

• Improved Asset Loading: فعال ✅

• Inline Font Icons: فعال ✅ (حذف بار Font Awesome سنگین)

• Load JS in Footer: فعال ✅

• Lazy Load Background Images: فعال ✅ (نه برای تصویر LCP)

• Flexbox Containers: فعال ✅ (جایگزین Sections/Columns)

• CSS Print Method: External فایل‌ها (برای کش بهتر)

• پس از تغییرات: Regenerate CSS و پاک‌سازی کش.

۵) تصاویر حرفه‌ای: WebP/AVIF + کنترل LCP

• قاعدهٔ طلایی: هیچ‌وقت تصویر Full Size را مستقیماً نگذار—سایزبندی متناسب (مثلاً ۱۶۰۰px قهرمان صفحه).

• فرمت‌ها: WebP (سازگاری عالی)، AVIF (سبک‌تر، اما سازگاری را بررسی کن).

• تصویر LCP (هیرو):

  • Lazy نکن، Preload کن.

  • ابعاد width/height را مشخص کن تا CLS صفر شود.

• نسبت تصویر به باکس را دقیق تنظیم کن (Cover/Contain) و از کراپ بی‌مورد بپرهیز.

نمونه preload در هدر (قالب یا Hook):

۶) فونت‌ها: سبک، محلی، کنترل‌شده

• فونت‌های فارسی را محلی (Self-hosted) با فرمت woff2 و subset (فقط کاراکترهای لازم) سرو کن.

• وزن‌ها را حداکثر ۲–۳ وزن نگه دار (۴۰۰/۵۰۰/۷۰۰).

• CSS:

• Preload فونت‌های حیاتی:

۷) اسکریپت‌ها و استایل‌ها: Defer/Delay + UUCSS

• Delay JS Execution (در WP Rocket/LiteSpeed Cache): اجرای JS بعد از تعامل کاربر (لیست سفید برای ضروری‌ها).

• Defer برای اسکریپت‌های غیرضروری، Move to Footer در تنظیمات المنتور/قالب.

• Remove Unused CSS (UUCSS) با ابزار پلاگین (دقت با المنتور: componentهای پویا را whitelist کن—مثل کلاس‌های فعال تب/آکاردئون).

• ترتیب بارگذاری: Critical CSS در head (اتوماتیک با ابزار پلاگین)، باقی CSS async/defer.

چند Handle رایج برای whitelist (مثال—نسبت به سایت خودت بررسی کن):

۸) کش چندلایه و CDN

• Page Cache: یکی را انتخاب و به‌درستی کانفیگ کن (WP Rocket / LiteSpeed Cache / FlyingPress …).

• Object Cache (Redis/Memcached): مخصوصاً سایت‌های فروشگاهی/داینامیک.

• Server Cache (LiteSpeed Server برندهٔ سرعت برای وردپرس).

• CDN: Cloudflare/BunnyCDN؛ فعال‌سازی Brotli، HTTP/3، Early Hints (در صورت امکان).

• قانون پاک‌سازی: پس از بروزرسانی قالب/پلاگین/المنتور حتماً Purge All + Regenerate.

۹) سرور و PHP: زیربنای سرعت

• PHP 8.2 یا 8.3، OPcache فعال، HTTP/2 یا 3، TLS 1.3.

• منابع حداقلی پیشنهادی: ۲ vCPU، ۴GB RAM برای سایت‌های پرترافیک/المنتور سنگین.

• php.ini (یا از هاست):

• وردپرس:

• TTFB هدف: < 200–300ms (اروپا/ایران بستگی به موقعیت سرور/CDN).

۱۰) دیتابیس: سبک‌سازی و سلامت

• WP-Optimize: پاک‌سازی Revision، Draft، Trash، Transients منقضی‌شده.

• Autoloaded Options: مقادیر autoload بسیار حجیم (> ۱MB) را کاهش بده (Query Monitor → Options).

• ایندکس‌گذاری مناسب جداول سفارشی (در پروژه‌های خاص).

• Heartbeat Control: کاهش فرکانس در wp-admin.

• Cron: اگر پرترافیک هستی، از Server Cron به جای WP-Cron استفاده کن.

۱۱) معماری صفحه در المنتور: سبک فکر کن

• Container-based Layout: به‌جای ۳ لایه Section/Column/Inner، حداکثر ۱–۲ لایه Container.

• Grid منطقی: تا حد امکان از تودرتویی بیش از ۳ سطح پرهیز.

• ویجت‌ها: اولویت با ویجت‌های بومی المنتور، Addonهای متفرقه را به‌حداقل برسان.

• Loop/Grid: نتایج را paginate یا limit کن (نه ۲۰+ کارت در بالا).

• ویدئو/Lottie: در Above-the-Fold استفاده نکن؛ در اسکرول‌های پایین‌تر + پوستر سبک.

• آیکون‌ها: SVG Inline به‌جای آیکون‌فونت.

• پس‌زمینه‌ها: از Gradient/Overlay سنگین کمتر استفاده کن.

۱۲) Core Web Vitals با المنتور (LCP/INP/CLS)

• LCP: تصویر هیرو را Preload، اندازهٔ صحیح، بدون Lazy، فشرده و نزدیک CDN PoP.

• INP: Delay JS غیرضروری، حذف لیسنرهای Scroll/Resize سنگین، انیمیشن با CSS Transform.

• CLS: همهٔ رسانه‌ها width/height، رزرو فضا برای بنر/iframe، font-display: swap.

۱۳) چک‌لیست انتشار صفحه المنتوری

• Lighthouse ≥ ۹۰ موبایل

• LCP < ۲.۵s، INP < ۲۰۰ms، CLS < ۰.۱

• درخواست‌ها < ۷۰، حجم < ۱.۵MB

• تصویر قهرمان preload، فونت woff2 preload

• کش صفحه + Object Cache فعال

• CDN روشن + Brotli/HTTP3

• Regenerate CSS & Data + Purge Cache

• تست روی موبایل واقعی و 3G/4G شبیه‌سازی‌شده

۱۴) رفع خطاهای رایج المنتور (Troubleshooting)

الف) Elementor Not Loading / پنل خاکستری

• افزایش حافظه (بالا)، Safe Mode المنتور فعال، غیرفعال‌سازی موقت همه افزونه‌ها جز المنتور/پرو، تست با قالب Hello.

• Switch Editor Loader Method (ON/OFF تست کن).

• بررسی Console Errors (نسخه jQuery/تداخل اسکریپت امنیتی/فایروال).

ب) ۵۰۰/۵۰۲ در ادیتور

• PHP error log، افزایش max_input_vars، بروزرسانی PHP 8.2، بررسی ماژول‌های لازم.

• خاموش‌کردن UUCSS/Delay JS موقتاً برای ادیتور.

ج) ذخیره‌نشدن/نمایش‌ندادن تغییرات

• پاک‌سازی کش (پلاگین/CDN/هاست)، Regenerate CSS، غیرفعال‌کردن minify هنگام ادیت.

• اطمینان از مجوز فایل‌ها (۰۶۴۴ فایل / ۰۷۵۵ پوشه‌ها).

د) شکستن استایل‌ها بعد از فعال‌سازی Remove Unused CSS

• عنصرهای پویا را Whitelist کن (تب‌ها، اسلایدر، آکاردئون، حالت active).

۱۵) سناریوی واقعی بهبود (Case Snapshot)

• قبل: LCP=4.8s، INP=320ms، حجم=3.4MB، ۱۲۵ درخواست، DOM سنگین

• اقدامات: تبدیل به Container، WebP + preload LCP، فونت woff2 + preload، Delay JS، LSCache+Redis، حذف Addonهای اضافی

• بعد: LCP=1.9s، INP=140ms، حجم=1.1MB، ۶۲ درخواست، امتیاز موبایل Lighthouse از ۴۸ → ۹۴

نتیجه‌گیری

کندی المنتور «اجتناب‌پذیر» است. با معماری صحیح صفحه، بهینه‌سازی رسانه/فونت، مدیریت بار اسکریپت‌ها و زیرساخت درست (کش/سرور/CDN)، به راحتی CWV سبز می‌گیری و هم تجربهٔ ادیتور بهتر می‌شود، هم فروش. این راهنما را مثل چک‌لیست پروژه برای همه صفحات جدید استفاده کن.