کوچک کردن فایل های CSS و جاوا اسکریپت

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

Minification (کوچک سازی) چیست و چه زمانی به آن نیاز دارید؟

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

به مثال زیر دقت کنید. قبل از کوچک کردن فایل CSS :

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

بعد از کوچک کردن فایل CSS :

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

به شما توصیه میکنیم فقط فایل‌هایی را که به مرورگرهای کاربر ارسال می‌شوند کوچک کنید. مانند فایل های HTML، CSS و جاوا اسکریپت.

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

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

اگر امتیاز سایت شما در ابزار های Google Pagespeed یا GTMetrix مهم است، کوچک کردن CSS و جاوا اسکریپت به میزان قابل توجهی امتیاز شما را بهبود میبخشد. با این اوصاف، بیایید نگاهی به نحوه کوچک کردن فایل های CSS و JavaScript در سایت وردپرسی خود بیاندازیم.

کوچک کردن فایل های CSS و JS با پلاگین Autoptimize

ابتدا باید افزونه Autoptimize را نصب و فعال کنید. پس از فعال سازی، برای پیکربندی تنظیمات افزونه باید به صفحه تنظیمات » Autoptimize مراجعه کنید.

در اینجا، اول باید گزینه “Optimize JavaScript Code” را در بخش JavaScript Options تیک بزنید.

پس از آن، کمی پایین تر به CSS Options بروید و تیک روبروی گزینه “Optimize CSS code” را علامت بزنید.

فراموش نکنید که برای ذخیره تنظیمات خود بر روی دکمه Save تغییرات کلیک کنید. سپس می توانید روی دکمه Empty Cache کلیک کنید تا شروع به استفاده از فایل های کوچک شده خود کنید. این افزونه همچنین می تواند برای رفع رندر مسدود کردن جاوا اسکریپت و CSS در وردپرس استفاده شود.

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