کاهش حجم CSS و جاوا اسکریپت در وردپرس

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

توی این آموزش اول سرعت سایتتون رو اندازه می‌گیریم، بعد سراغ نصب و تنظیم افزونه Fast Velocity Minify می‌ریم و در آخر نتیجه رو دوباره بررسی می‌کنیم. در کنارش یاد می‌گیرید اگه منو، فرم یا ظاهر سایت خراب شد، چطور فایل مشکل‌ساز رو پیدا کنید.

کاهش حجم CSS و جاوا اسکریپت چه کمکی به سایتتون می‌کنه؟

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

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

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

قبل از شروع، سرعت سایتتون رو اندازه بگیرید

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

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

آدرس صفحه، تاریخ آزمایش، امتیازها، LCP، INP، CLS، حجم انتقال‌یافته و تعداد درخواست‌ها رو جایی یادداشت کنید. داده واقعی کاربران و آزمایش لحظه‌ای ابزار یکی نیستن؛ پس نتیجه هر ابزار رو با نتیجه همون ابزار مقایسه کنید. سرعت هم فقط یکی از بخش‌های تجربه کاربری و سئو هست و امتیاز خوب به‌تنهایی رتبه بهتر رو تضمین نمی‌کنه. توضیح بیشتر رو در مقاله تأثیر سرعت سایت در سئو می‌خونید.

قبل از کاهش حجم CSS و جاوا اسکریپت چه کارهایی لازمه؟

• نسخه پشتیبان بگیرید: از فایل‌ها و پایگاه داده سایتتون یک نسخه سالم داشته باشید تا اگه مشکلی پیش اومد، بتونید سایت رو برگردونید.
• تغییرات رو در محیط تست انجام بدید: محیط تست یک کپی خصوصی از سایت هست که بازدیدکننده‌ها اون رو نمی‌بینن. اول تنظیمات رو اونجا امتحان کنید.
• همه بخش‌ها رو به‌روز کنید: وردپرس، قالب و افزونه‌ها رو به نسخه‌های سازگار و جدید ارتقا بدید. برای Fast Velocity Minify هم فقط آخرین نسخه رسمی رو نصب کنید.
• هر بار یک گزینه رو تغییر بدید: اگه چند تنظیم رو هم‌زمان عوض کنید، پیدا‌کردن عامل خرابی سخت می‌شه.
• کش رو پاک کنید: کش یعنی نسخه موقتی فایل‌ها و صفحه‌ها. بعد از هر تغییر، کش افزونه، افزونه کش، سرور و CDN رو پاک کنید و صفحه رو در پنجره ناشناس یا با بارگذاری مجدد بدون کش بررسی کنید.

آشنایی با افزونه Fast Velocity Minify

Fast Velocity Minify فایل‌های CSS و جاوا اسکریپت رو پردازش و فشرده می‌کنه و برای بعضی تنظیمات، امکان ترکیب فایل‌ها رو هم می‌ده. این افزونه فایل‌های بهینه‌شده رو در پوشه کش نگه می‌داره تا لازم نباشه برای هر بازدید دوباره ساخته بشن. مسیر دقیق این پوشه ممکنه با نسخه افزونه و تنظیمات هاست فرق داشته باشه؛ پس برای پیداکردنش صفحه تنظیمات افزونه یا فایل‌های داخل wp-content/cache رو بررسی کنید.

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

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

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

رخش امکانات مرتبطی مثل کش صفحه، فشرده‌سازی CSS، جاوا اسکریپت و HTML، بارگذاری تنبل تصاویر، تبدیل تصاویر به WebP یا AVIF و حذف CSS بلااستفاده رو یکجا در اختیارتون می‌ذاره. مدیریت فونت‌ها، هماهنگی با CDN و Cloudflare و بعضی بهینه‌سازی‌های ووکامرس هم جزو قابلیت‌های معرفی‌شده برای این افزونه هستن.

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

نصب Fast Velocity Minify در وردپرس

1. وارد پیشخوان وردپرس بشید و از منوی «افزونه‌ها» روی «افزودن افزونه تازه» کلیک کنید.
2. عبارت Fast Velocity Minify رو در کادر جست‌وجو بنویسید. نام افزونه و سازنده رو با صفحه رسمی تطبیق بدید.
3. روی دکمه نصب افزونه و بعد روی دکمه فعال‌سازی کلیک کنید. متن دقیق این دکمه‌ها ممکنه در نسخه‌های مختلف وردپرس کمی فرق داشته باشه.
4. صفحه تنظیمات افزونه رو از پیشخوان باز کنید. جای دقیق منو ممکنه با نسخه افزونه فرق داشته باشه.

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

آموزش تنظیمات Fast Velocity Minify

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

در مرحله اول، گزینه بالای صفحه تنظیمات با عنوان Purge Minified CSS/JS files instantly رو فعال کنید. توضیح فعلی این گزینه می‌گه فایل‌های کش CSS و جاوا اسکریپت به‌صورت پیش‌فرض برای سازگاری بهتر با بعضی شرکت‌های هاستینگ تا ۷ روز نگه‌داری می‌شن. با فعال‌کردن این گزینه، افزونه فایل‌های فشرده قدیمی رو زودتر پاک می‌کنه تا بعد از تغییر تنظیمات، نسخه تازه فایل‌ها رو ببینید. چون نام و رفتار گزینه‌ها ممکنه بین نسخه‌ها عوض بشه، متن داخل صفحه تنظیمات نسخه نصب‌شده رو هم بخونید.

فشرده‌سازی فایل‌های CSS

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

اگه ظاهر صفحه خراب شد، فشرده‌سازی CSS رو موقتاً خاموش کنید. اگه مشکل برطرف شد، فایل‌های CSS رو یکی‌یکی از پردازش افزونه مستثنا کنید تا فایل یا ترکیب ناسازگار پیدا بشه. برای دیدن مسیر فایل، روی صفحه کلیک راست کنید، «Inspect» یا «بازرسی» رو بزنید و زبانه Network رو باز کنید. Network بخشی هست که فایل‌های دریافت‌شده صفحه رو نشون می‌ده.

فشرده‌سازی فایل‌های جاوا اسکریپت

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

اگه قابلیتی از کار افتاد، با کلیک راست و انتخاب «Inspect» یا «بازرسی» ابزار توسعه‌دهنده مرورگر رو باز کنید و به زبانه Console برید. Console خطاهای جاوا اسکریپت رو نشون می‌ده. فشرده‌سازی رو خاموش کنید و دوباره همون قابلیت رو آزمایش کنید. بعد فایل مشکوک رو از بهینه‌سازی کنار بذارید و تنظیم رو دوباره روشن کنید. یادتون نره مشکل همیشه از یک فایل تنها نیست و گاهی تغییر ترتیب اجرای چند اسکریپت باعث خطا می‌شه.

ترکیب فایل‌های CSS و جاوا اسکریپت

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

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

بهینه‌سازی فونت‌ها و فایل‌های خارجی

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

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

مدیریت کش افزونه

فایل‌های ساخته‌شده افزونه داخل پوشه کش نگه‌داری می‌شن، ولی مسیر دقیق اون ممکنه با نسخه افزونه و تنظیمات هاست فرق داشته باشه. بعد از تغییر قالب، به‌روزرسانی افزونه، ویرایش CSS یا جاوا اسکریپت و تغییر تنظیمات بهینه‌سازی، از گزینه پاک‌سازی کش داخل خود Fast Velocity Minify استفاده کنید.

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

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

1. همه لایه‌های کش سایت، سرور و CDN رو پاک کنید.
2. صفحه‌های مهم رو در پنجره ناشناس باز کنید تا نسخه قدیمی مرورگر مزاحم آزمایش نشه.
3. ظاهر دسکتاپ و موبایل و همه قابلیت‌های تعاملی مهم رو بررسی کنید.
4. با ابزار Inspect مرورگر، زبانه Console رو باز کنید و دنبال خطاهای تازه بگردید.
5. همون صفحه‌ها رو دوباره با PageSpeed Insights و GTmetrix آزمایش کنید.
6. حجم داده دریافت‌شده، تعداد درخواست‌ها، زمان بارگذاری و معیارهای LCP، INP و CLS رو با نتیجه اولیه مقایسه کنید. یادتون باشه INP واقعی ممکنه فقط وقتی داده کافی از بازدیدکننده‌ها جمع شده باشه نمایش داده بشه.

اگه حجم فایل کمتر شد ولی LCP یا INP بدتر شد، تنظیم رو موفق حساب نکنید. هدف فقط گرفتن امتیاز بالاتر نیست؛ سایت باید برای بازدیدکننده سریع، پایدار و قابل استفاده بمونه. برای بررسی دقیق‌تر سمت سرور هم می‌تونید مقاله TTFB چیست و چطور زمان TTFB رو کاهش بدیم رو بخونید.

رفع مشکلات رایج بعد از فشرده‌سازی CSS و جاوا اسکریپت

ظاهر سایت به‌هم ریخته

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

منو، فرم یا اسلایدر کار نمی‌کنه

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

تغییرات جدید سایت نمایش داده نمی‌شن

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

حجم کش خیلی زیاد شده

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

سرعت سایت بهتر نشده یا کمتر شده

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

چه وقت‌هایی بهتره یک فایل رو بهینه‌سازی نکنید؟

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

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

روش‌های تکمیلی برای سبک‌ترکردن CSS و جاوا اسکریپت

• افزونه‌ها و کدهای بدون استفاده رو حذف کنید: غیرفعال‌کردن قابلیت‌های اضافی جلوی بارگذاری بعضی فایل‌ها رو می‌گیره.
• فایل‌ها رو فقط در صفحه لازم بارگذاری کنید: مثلاً کد فرم تماس لازم نیست در همه نوشته‌ها دریافت بشه.
• CSS استفاده‌نشده رو کم کنید: اول مطمئن بشید قانون موردنظر واقعاً در هیچ حالت، دستگاه یا صفحه‌ای استفاده نمی‌شه.
• اجرای جاوا اسکریپت غیرضروری رو عقب بندازید: اسکریپت‌هایی مثل بعضی ابزارهای آمار یا گفت‌وگو می‌تونن بعد از محتوای اصلی اجرا بشن، ولی باید تک‌تک آزمایش بشن.
• از کش و CDN درست استفاده کنید: کش مناسب جلوی پردازش و انتقال تکراری رو می‌گیره و CDN فایل رو از موقعیت نزدیک‌تری به کاربر می‌فرسته.
• فشرده‌سازی سمت سرور رو فعال کنید: Brotli یا Gzip حجم داده در حال انتقال رو کمتر می‌کنن. این قابلیت با Minify فرق داره و معمولاً از تنظیمات هاست یا سرور کنترل می‌شه.

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

جمع‌بندی کاهش حجم CSS و جاوا اسکریپت در وردپرس

برای کاهش حجم CSS و جاوا اسکریپت در وردپرس، اول یک نتیجه پایه ثبت کنید و نسخه پشتیبان بگیرید. بعد Minify مربوط به CSS و جاوا اسکریپت رو جداگانه فعال کنید و ظاهر، منوها، فرم‌ها و خطاهای Console رو بررسی کنید. ترکیب فایل‌ها رو هم یک انتخاب آزمایشی بدونید، نه یک قانون همیشگی؛ مخصوصاً وقتی سایتتون از HTTP/2 یا HTTP/3 استفاده می‌کنه.

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

سؤال‌های متداول

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

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