حل مشکل بهم ریختگی سایت بعد از نصب WP Rocket

اگه بعد از فعال‌کردن وردپرس راکت، فونت‌ها عوض شدن، منو باز نمی‌شه یا اسلایدر و بخش‌های صفحه درست نمایش داده نمی‌شن، معمولاً لازم نیست افزونه رو حذف کنید. اول همه لایه‌های کش رو پاک کنید و بعد قابلیت‌های بهینه‌سازی CSS و JavaScript رو یکی‌یکی آزمایش کنید. این روش کمک می‌کنه تنظیم یا فایل مشکل‌دار رو بدون خاموش‌کردن همه قابلیت‌های افزایش سرعت پیدا کنید.

در این راهنما، حل مشکل بهم ریختگی سایت بعد از نصب WP Rocket رو از ساده‌ترین بررسی‌ها شروع می‌کنیم. بعد سراغ Delay JavaScript Execution، کنسول مرورگر، CDN و تداخل افزونه‌ها می‌ریم. اگه تازه با این مفاهیم آشنا شدید هم نگران نباشید؛ هر مرحله رو با زبان ساده توضیح می‌دیم.

چرا بعد از نصب وردپرس راکت ظاهر سایت به هم می‌ریزه؟

وردپرس راکت برای سریع‌ترشدن سایت می‌تونه فایل‌های CSS و JavaScript رو کوچک‌تر کنه یا اجرای بعضی اسکریپت‌ها رو عقب بندازه. CSS کدی هست که رنگ، فونت و چیدمان صفحه رو می‌سازه. JavaScript هم بخش‌های تعاملی مثل منو، فرم، پاپ‌آپ و اسلایدر رو کنترل می‌کنه. اگه ترتیب بارگذاری این فایل‌ها تغییر کنه، ممکنه بخشی از ظاهر یا عملکرد صفحه خراب بشه.

گاهی هم تنظیمات درست هستن، ولی مرورگر، سرور یا CDN هنوز نسخه قبلی فایل‌ها رو نشون می‌ده. CDN یا شبکه توزیع محتوا، نسخه‌ای از فایل‌های سایت رو روی چند سرور نگه می‌داره تا صفحه سریع‌تر باز بشه. پس قبل از دست‌زدن به تنظیمات، باید مطمئن بشید نسخه قدیمی صفحه از کش نمایش داده نمی‌شه.

وردپرس راکت با خیلی از قالب‌ها و افزونه‌ها کار می‌کنه، ولی سازگاری کامل با همه ترکیب‌ها تضمین‌شده نیست. بعضی قابلیت‌های قالب، صفحه‌ساز یا افزونه‌های بهینه‌سازی ممکنه همون فایل رو دوباره پردازش کنن و تداخل بسازن.

قبل از تغییر تنظیمات، از سایت نسخه پشتیبان بگیرید

قبل از شروع، از فایل‌ها و پایگاه داده سایتتون نسخه پشتیبان کامل بگیرید. پایگاه داده همون بخشی هست که نوشته‌ها، تنظیمات و اطلاعات بیشتر افزونه‌ها توی اون ذخیره می‌شن. می‌تونید از ابزار بکاپ شرکت هاستینگ یا افزونه پشتیبان‌گیری مطمئنتون کمک بگیرید.

اگه سایت فروشگاهی یا پربازدید دارید، بهتره آزمایش‌ها رو اول روی سایت آزمایشی یا Staging انجام بدید. سایت آزمایشی یک کپی خصوصی از سایت اصلیه که تغییراتش جلوی چشم بازدیدکننده‌ها نیست.

حل سریع بهم ریختگی سایت بعد از نصب WP Rocket

کش وردپرس راکت رو پاک کنید: از نوار بالای پیشخوان روی WP Rocket و بعد پاک‌کردن کش کلیک کنید.

کش مرورگر، سرور و CDN رو پاک کنید: اگه هاست یا CDN شما کش جداگانه داره، اون رو هم تخلیه کنید.

سایت رو در پنجره ناشناس باز کنید: این پنجره کمک می‌کنه نسخه ذخیره‌شده مرورگر کمتر روی آزمایش اثر بذاره.

بهینه‌سازی CSS و JavaScript رو موقتاً خاموش کنید: وارد تنظیمات وردپرس راکت و بخش File Optimization بشید و گزینه‌های فعال این بخش رو برای آزمایش غیرفعال کنید.

بعد از ذخیره تنظیمات، دوباره کش رو پاک کنید و صفحه خراب رو در پنجره ناشناس ببینید. اگه ظاهر سایت درست شد، یکی از همین گزینه‌ها یا یکی از فایل‌های پردازش‌شده عامل مشکله. حالا می‌تونید با مراحل بعدی دقیقاً پیداش کنید.

پیدا کردن تنظیمی که ظاهر سایت رو خراب کرده

همه گزینه‌ها رو هم‌زمان فعال نکنید. هر بار فقط یک گزینه رو روشن کنید، تغییرات رو ذخیره کنید، کش‌ها رو پاک کنید و همون صفحه رو دوباره ببینید. وقتی مشکل برگرده، آخرین گزینه‌ای که فعال کردید مهم‌ترین مظنونه.

بررسی تنظیمات بهینه‌سازی CSS

از پیشخوان وردپرس وارد «تنظیمات ← WP Rocket» بشید و بخش File Optimization یا بهینه‌سازی فایل رو باز کنید.

گزینه Minify CSS files یا فشرده‌سازی CSS رو خاموش کنید. اگه مشکل ادامه داشت، Remove Unused CSS یا حذف CSS استفاده‌نشده رو هم غیرفعال کنید. این قابلیت تلاش می‌کنه کدهای ظاهراً اضافی رو کنار بذاره، ولی ممکنه استایل بخشی که بعداً باز می‌شه، مثل منوی موبایل یا پاپ‌آپ، در بارگذاری اول شناسایی نشه.

اگه با خاموش‌کردن یکی از گزینه‌ها ظاهر صفحه درست شد، فعلاً همون گزینه رو غیرفعال نگه دارید. بعد از اون می‌تونید فایل یا بخش ناسازگار رو دقیق‌تر بررسی کنید.

بررسی تنظیمات بهینه‌سازی JavaScript

برای JavaScript هم از Minify JavaScript files شروع کنید. بعد گزینه Load JavaScript deferred رو بررسی کنید؛ این گزینه بارگذاری اسکریپت‌ها رو طوری تغییر می‌ده که محتوای اصلی زودتر آماده بشه. در آخر Delay JavaScript Execution رو آزمایش کنید که اجرای اسکریپت‌های واجد شرایط رو تا زمان تعامل کاربر عقب می‌ندازه.

تشخیص نشانه‌های رایج هر مشکل

• اگه فونت، فاصله‌ها، رنگ یا ستون‌بندی خراب شده، اول تنظیمات CSS رو بررسی کنید.
• اگه منو، فرم یا پاپ‌آپ باز نمی‌شه، تنظیمات JavaScript و خطاهای Console مهم‌تر هستن.
• اگه اسلایدر یا بخش متحرک نمایش داده نمی‌شه، Delay JavaScript Execution رو موقتاً خاموش کنید.
• اگه بخشی تا اولین کلیک، لمس، حرکت ماوس یا فشردن کلید سفید می‌مونه، احتمال ارتباط مشکل با تأخیر اجرای JavaScript بیشتره؛ ولی باید با آزمایش تأییدش کنید.

عیب‌یابی Delay JavaScript Execution

تأیید مشکل با غیرفعال‌کردن موقت قابلیت

اول Delay JavaScript Execution یا بارگذاری JavaScript با تأخیر رو خاموش کنید، تنظیمات رو ذخیره کنید و همه کش‌ها رو پاک کنید.

اگه بخش خراب درست شد، ارتباط مشکل با این قابلیت تأیید می‌شه. اگه تغییری ندیدید، سراغ تنظیمات دیگه یا تداخل قالب و افزونه‌ها برید.

استفاده موقت از Safe Mode

Safe Mode یا حالت امنِ Delay JavaScript Execution برای عیب‌یابی موقته. این حالت بخش بزرگی از اسکریپت‌های وردپرس، قالب و افزونه‌ها رو از تأخیر خارج می‌کنه. اگه با فعال‌کردنش مشکل حل شد، می‌فهمید یکی از اسکریپت‌های خارج‌شده نیاز به بررسی داره. Safe Mode رو به‌عنوان تنظیم دائمی نگه ندارید، چون هدفش پیداکردن علت مشکله.

بررسی استثناهای یک‌کلیکی و استثناهای خودکار

وردپرس راکت برای بعضی ابزارها و سرویس‌های شناخته‌شده استثناهای آماده داره. بعضی استثناهای سازگاری هم به‌صورت پویا از فضای ابری افزونه دریافت می‌شن. این موارد با Safe Mode فرق دارن؛ Safe Mode یک آزمایش گسترده انجام می‌ده، ولی استثناها اسکریپت‌های مشخصی رو هدف می‌گیرن.

اضافه‌کردن کمترین استثنای لازم

اگه فایل مشکل‌دار رو پیدا کردید، فقط بخش منحصربه‌فردی از نام یا نشانی همون فایل رو به کادر استثنا اضافه کنید. تعداد زیادی فایل یا یک پوشه کامل رو بدون آزمایش کنار نذارید؛ چون بخشی از فایده بهینه‌سازی از بین می‌ره. اگه مطمئن نیستید کدوم بخش از نشانی فایل رو باید وارد کنید، قبل از تغییر از پشتیبانی کمک بگیرید. بعد از هر استثنا، کش رو پاک کنید و نتیجه رو دوباره بسنجید.

پیدا کردن فایل مشکل‌دار با Console مرورگر

Console یا کنسول مرورگر بخشی از ابزارهای توسعه‌دهنده‌ست که خطاهای JavaScript و مشکل بارگذاری فایل‌ها رو نشون می‌ده. برای بررسی، این مراحل رو انجام بدید:

1. روی صفحه راست‌کلیک کنید و Inspect رو بزنید.
2. تب Console رو باز کنید.
3. پیام‌های قبلی رو پاک کنید و صفحه رو دوباره بارگذاری کنید.
4. خطاهای قرمز رو بررسی کنید و نام فایل یا افزونه تکرارشده در خطا رو یادداشت کنید.
5. اگه نام فایل و ارتباطش با بخش خراب مشخص بود، فایل مشکوک رو به فهرست استثناها اضافه کنید، کش رو پاک کنید و دوباره آزمایش کنید.

هر پیام قرمزی به وردپرس راکت مربوط نیست. برای مطمئن‌شدن، یک‌بار همون صفحه رو با قابلیت مشکوک خاموش باز کنید. اگه خطا و خرابی با هم ناپدید شدن، سرنخ قابل‌اعتمادتری دارید.

بررسی تداخل وردپرس راکت با کش و بهینه‌سازی‌های دیگه

استفاده هم‌زمان از Autoptimize

وردپرس راکت با Autoptimize سازگاری داخلی داره، ولی بهتره قابلیت‌های تکراری کوچک‌سازی و پردازش فایل‌ها رو در هر دو افزونه هم‌زمان فعال نکنید. مشخص کنید کدوم افزونه مسئول بهینه‌سازی CSS و JavaScript باشه و بعد کش هر دو رو پاک کنید.

تفاوت وب‌سرور LiteSpeed با افزونه LiteSpeed Cache

وب‌سرور LiteSpeed نرم‌افزار سروره و وردپرس راکت می‌تونه روی اون کار کنه. برای آشنایی ساده‌تر با این بخش، راهنمای وب‌سرور و کاربرد اون رو ببینید. ولی افزونه LiteSpeed Cache یک افزونه بهینه‌سازی جداست و نباید هم‌زمان با وردپرس راکت برای انجام کارهای مشابه فعال باشه.

بررسی Varnish و کش شرکت هاستینگ

Varnish و بعضی سیستم‌های کش هاست، نسخه کامل صفحه رو روی سرور نگه می‌دارن. اگه بعد از پاک‌کردن کش وردپرس راکت هنوز صفحه خراب دیده می‌شه، کش پنل هاست رو هم پاک کنید یا از پشتیبانی هاست بخواید این کار رو انجام بده.

پاک‌سازی و هماهنگ‌کردن کش Cloudflare

اگه از Cloudflare استفاده می‌کنید، کش اون رو هم بررسی کنید. در بعضی پیکربندی‌ها وردپرس راکت پاک‌سازی رو هماهنگ می‌کنه، ولی اگه نسخه قدیمی باقی مونده، از پنل Cloudflare کش نشانی مشکل‌دار رو پاک کنید. تنظیمات و روش اتصال APO ممکنه با تغییر نسخه افزونه‌ها عوض بشه؛ پس جزئیات فعلی رو در مستندات رسمی Cloudflare بررسی کنید.

بررسی قابلیت‌های بهینه‌سازی قالب و صفحه‌ساز

بعضی قالب‌ها و صفحه‌سازها تولید CSS، کوچک‌سازی فایل یا بارگذاری تنبل دارن. این قابلیت‌ها رو موقتاً خاموش کنید و نتیجه رو ببینید. بعد فقط یک ابزار رو مسئول هر نوع بهینه‌سازی بذارید تا یک فایل چند بار پردازش نشه.

اگه با غیرفعال‌کردن تنظیمات مشکل حل نشد، چه کار کنید؟

• صفحه رو با یک مرورگر، دستگاه و اینترنت دیگه آزمایش کنید.
• Console مرورگر و گزارش خطاهای PHP هاست رو بررسی کنید. PHP زبان اصلی اجرای وردپرس روی سروره. جای گزارش خطا در هر هاست فرق داره؛ معمولاً می‌تونید اون رو در بخش Error Logs پنل هاست پیدا کنید یا از پشتیبانی هاست کمک بگیرید.
• تداخل قالب و افزونه‌ها رو فقط روی سایت آزمایشی بررسی کنید. می‌تونید از راهنمای عیب‌یابی وردپرس هم کمک بگیرید.
• فهرست رسمی ناسازگاری‌های وردپرس راکت رو ببینید.
• برای پشتیبانی، نشانی صفحه، تصویر خطا، مراحل بازسازی مشکل و گزینه‌ای که با خاموش‌کردنش مشکل حل می‌شه رو بفرستید. اطلاعات ورود یا داده حساس رو در پیام عمومی قرار ندید.

چطور تنظیمات رو بدون برگشتن مشکل دوباره فعال کنید؟

1. هر بار فقط یک قابلیت رو فعال کنید.
2. بعد از هر تغییر، کش وردپرس راکت، سرور، CDN و مرورگر رو پاک کنید.
3. صفحه اصلی، صفحات داخلی و بخش‌های تعاملی رو در پنجره ناشناس آزمایش کنید.
4. اگه مشکل برگشت، فقط فایل ضروری رو از قابلیت مربوط کنار بذارید.
5. نتیجه هر آزمایش رو یادداشت کنید تا مجبور نشید مراحل قبلی رو تکرار کنید.

چک‌لیست نهایی رفع بهم ریختگی سایت

• صفحه اصلی، نوشته‌ها، برگه‌ها و صفحات دسته‌بندی درست دیده می‌شن.
• منو، فرم‌ها، پاپ‌آپ‌ها، جستجو و اسلایدرها کار می‌کنن.
• نسخه موبایل و دسکتاپ رو جداگانه بررسی کردید.
• در سایت فروشگاهی، سبد خرید، تسویه‌حساب، درگاه پرداخت و ورود کاربران آزمایش شدن.
• Console مرورگر بعد از بارگذاری صفحه خطای تازه و مرتبط نشون نمی‌ده.
• نتیجه رو در حالت واردشده و خارج‌شده از حساب کاربری دیدید.

افزونه رخش

افزونه وردپرس راکت رایگان نیست و برای فعال‌سازی، دریافت به‌روزرسانی و پشتیبانی رسمی باید لایسنس اون رو بخرید. اگه دنبال یک جایگزین برای وردپرس راکت هستید، می‌تونید افزونه رخش رو امتحان کنید. رخش افزونه بهینه‌سازی سرعت وردپرسه که تیم خودمون در میهن وردپرس ساخته. این افزونه قابلیت‌هایی مثل کش صفحات، بهینه‌سازی فایل‌های CSS و JavaScript، بارگذاری تنبل تصاویر و مدیریت بهتر منابع سایت رو در اختیارتون می‌ذاره.

ما رخش رو با هدف ساده‌ترشدن بهینه‌سازی سایت و کاهش تداخل‌هایی ساختیم که ممکنه بعد از پردازش CSS و JavaScript با بعضی افزونه‌های افزایش سرعت ببینید. طبق تجربه خودمون، رخش مشکلاتی مثل بهم ریختن ظاهر صفحه بعد از فعال‌کردن تنظیمات بهینه‌سازی رو که در بعضی سایت‌ها با وردپرس راکت دیده می‌شه، برای سایت ما ایجاد نکرده. البته نتیجه نهایی به قالب، افزونه‌ها و تنظیمات هر سایت هم بستگی داره؛ پس بهتره تغییر افزونه رو اول روی نسخه آزمایشی سایتتون انجام بدید.

ما در حال حاضر روی سایت میهن وردپرس دیگه از وردپرس راکت استفاده نمی‌کنیم و به‌جاش سایتمون رو با رخش بهینه می‌کنیم. اگه می‌خواید رخش رو جایگزین افزونه کش فعلی کنید، اول از سایتتون نسخه پشتیبان بگیرید، افزونه بهینه‌سازی قبلی رو غیرفعال کنید و کش‌های باقی‌مونده رو پاک کنید. بعد هم قابلیت‌های رخش رو مرحله‌به‌مرحله فعال کنید و صفحه‌های مهم سایت رو روی موبایل و دسکتاپ آزمایش کنید.

سؤال‌های متداول درباره بهم ریختگی سایت با وردپرس راکت

جمع‌بندی

برای حل مشکل بهم ریختگی سایت بعد از نصب WP Rocket، اول همه لایه‌های کش رو پاک کنید و صفحه رو در پنجره ناشناس ببینید. اگه مشکل باقی موند، گزینه‌های بهینه‌سازی CSS و JavaScript رو موقتاً خاموش کنید و بعد هر بار فقط یکی از اون‌ها رو دوباره فعال کنید. با این روش می‌تونید بدون حدس‌زدن بفهمید کدوم قابلیت ظاهر یا عملکرد سایتتون رو خراب کرده.

اگه مشکل از Delay JavaScript Execution بود، Safe Mode رو فقط برای عیب‌یابی به کار ببرید و در پایان کمترین استثنای لازم رو اضافه کنید. یادتون نره بعد از هر تغییر، کش وردپرس راکت، سرور و CDN رو پاک کنید و منوها، فرم‌ها، اسلایدرها و نسخه موبایل رو دوباره آزمایش کنید. هدف اینه که سرعت سایت حفظ بشه، ولی هیچ بخش مهمی برای بازدیدکننده‌ها خراب نمونه.

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.