فشرده سازی CSS در وردپرس با Autoptimize

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

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

فشرده‌سازی CSS و JavaScript چه کاری انجام می‌ده؟

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

برای نمونه، یک کد CSS معمولی می‌تونه این شکلی باشه:

body {    margin: 20px;    padding: 20px;    color: #333333;    background: #f7f7f7;}h1 {    font-size: 32px;    color: #222222;    margin-bottom: 10px;}

نسخه فشرده همین کد فضای کمتری می‌گیره:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}h1{font-size:32px;color:#222;margin-bottom:10px}

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

افزونه Better WordPress Minify

توی نسخه قدیمی این مقاله، افزونه Better WordPress Minify رو برای فشرده‌سازی فایل‌های CSS و JavaScript معرفی کرده بودیم. ولی این افزونه مدت زیادیه به‌روزرسانی نشده و مخزن رسمی وردپرس هم درباره آزمایش‌نشدنش با نسخه‌های جدید وردپرس هشدار می‌ده. این وضعیت لزوماً به معنی توقف رسمی افزونه نیست، ولی نصب اون روی سایت‌های امروزی انتخاب مطمئنی به نظر نمی‌رسه. توی این نسخه به‌روز، به‌جای اون از Autoptimize استفاده می‌کنیم و در ادامه افزونه رخش رو هم به‌عنوان یک راهکار کامل‌تر برای افزایش سرعت وردپرس معرفی می‌کنیم.

قبل از شروع چه کارهایی انجام بدیم؟

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

اگه سایتتون افزونه کش داره، یادتون باشه بعد از هر تغییر کش اون افزونه و کش مرورگر رو پاک کنید. برای آشنایی با کش می‌تونید آموزش افزونه WP Super Cache و تنظیمات کش وردپرس رو هم ببینید.

نصب Autoptimize در وردپرس

توی پیشخوان وردپرس به مسیر «افزونه‌ها ← افزودن افزونه تازه» برید. عبارت Autoptimize رو جست‌وجو کنید و بعد روی «نصب» و «فعال‌سازی» بزنید. حتماً نام افزونه و سازنده‌ای که داخل مخزن وردپرس نمایش داده می‌شه رو با صفحه رسمی افزونه مقایسه کنید تا افزونه درست رو نصب کنید.

بعد از فعال‌سازی، از پیشخوان به مسیر «تنظیمات ← Autoptimize» برید. اسم و جای بعضی گزینه‌ها ممکنه با نسخه یا زبان پیشخوان شما کمی فرق داشته باشه، ولی بخش‌های اصلی مربوط به JavaScript، CSS و HTML هستن.

فشرده‌سازی JavaScript با Autoptimize

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

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

لازم نیست گزینه تجمیع فایل‌ها رو از همون اول فعال کنید. تجمیع یعنی چند فایل جدا داخل یک فایل قرار بگیرن. نتیجه این کار به اندازه فایل‌ها، کش مرورگر، وابستگی کدها و روش بارگذاری سایتتون بستگی داره. اول فقط فشرده‌سازی رو آزمایش کنید و سراغ گزینه‌های بیشتر برید که واقعاً در آزمون قبل و بعد بهبود ببینید.

فشرده‌سازی CSS با Autoptimize

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

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

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

بهینه‌سازی HTML لازمه؟

Autoptimize می‌تونه کد HTML صفحه رو هم فشرده کنه. HTML ساختار اصلی صفحه رو مشخص می‌کنه. فشرده‌سازی اون معمولاً فاصله‌ها و توضیحات اضافی رو کم می‌کنه، ولی مقدار کاهش حجم همیشه زیاد نیست.

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

چطور نتیجه فشرده‌سازی رو بررسی کنیم؟

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

• LCP: مدت‌زمانی رو نشون می‌ده که محتوای اصلی و بزرگ صفحه دیده بشه.
• CLS: میزان جابه‌جایی ناگهانی عناصر صفحه موقع بارگذاری رو نشون می‌ده.
• TBT: نشون می‌ده مرورگر در آزمایش آزمایشگاهی چه مدت درگیر کارهای سنگین بوده و نتونسته سریع به کاربر پاسخ بده.

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

اگه بعد از فشرده‌سازی سایت خراب شد چه کار کنیم؟

1. آخرین گزینه‌ای که فعال کردید رو خاموش کنید.
2. داخل تنظیمات Autoptimize کش بهینه‌سازی رو پاک کنید. نام و جای این گزینه ممکنه با نسخه افزونه فرق داشته باشه.
3. اگه از افزونه کش، کش هاست یا شبکه توزیع محتوا استفاده می‌کنید، کش اون رو هم پاک کنید. اگه چنین سرویسی ندارید، این مرحله رو رد کنید.
4. صفحه رو در پنجره ناشناس مرورگر دوباره باز کنید.
5. اگه مشکل باقی موند، همه گزینه‌های بهینه‌سازی Autoptimize رو موقتاً خاموش کنید.

اگه با خاموش‌کردن بهینه‌سازی مشکل برطرف شد، تنظیمات رو دوباره یکی‌یکی روشن کنید. این کار مشخص می‌کنه مشکل از CSS، JavaScript یا گزینه دیگه‌ای بوده. اگه سایت بدون Autoptimize هم مشکل داره، احتمالاً دلیل خطا جای دیگه‌ایه. برای بررسی درخواست‌های کند و خطاهای فنی می‌تونید آموزش پیدا کردن دلیل کند شدن وردپرس با Query Monitor رو ببینید.

آیا افزونه رخش انتخاب مناسبیه؟

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

کار رخش فقط فشرده‌سازی فایل‌ها نیست. این افزونه کش کامل صفحه و کش مرورگر رو مدیریت می‌کنه، بعد از پاک‌شدن کش صفحه‌ها رو دوباره گرم می‌کنه و برای صفحه‌هایی مثل سبد خرید، تسویه‌حساب و ورود استثنا در نظر می‌گیره. رخش تصاویر رو هم به WebP یا AVIF تبدیل می‌کنه، بارگذاری تنبل تصاویر و آی‌فریم‌ها رو انجام می‌ده و می‌تونه ابعاد تصاویر رو به‌صورت خودکار اضافه کنه. قابلیت‌هایی مثل کش آبجکت با Redis، بهینه‌سازی زمان‌بندی‌شده دیتابیس، گزارش Core Web Vitals و پنل عیب‌یابی کش هم برای بررسی بخش‌های دیگه سرعت سایت در دسترس هستن.

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

جمع‌بندی

برای فشرده‌سازی CSS در وردپرس لازم نیست کدهای سایتتون رو دستی تغییر بدید. Autoptimize می‌تونه CSS، JavaScript و HTML رو بهینه کنه، ولی بهتره هر گزینه رو جدا فعال کنید و بعد از پاک‌کردن کش، ظاهر و امکانات سایت رو کامل آزمایش کنید.

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

سؤالات متداول

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

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