چگونه فایل های CSS و جاوا اسکریپت را کم حجم کنیم؟

آیا می خواهید در سایت وردپرسیتان فایل ها را کم حجم کنید؟ مینی فای کردن فایل های CSS و Javascript در سایت های وردپرسی باعث افزایش سرعت سایت می شود. در این مطلب به شما شیوه کم حجم کردن فایل های CSS و Javascript را برای افزایش کارایی و سرعت آموزش می دهیم.

مینی فای چیست و چه زمانی به آن نیاز دارید؟

کلمه مینی فای (Minify) اصطلاحی است برای توضیح روشی که طی آن ، حجم فایل های سایت شما کاهش می یابد. عملکرد آن به این صورت است که فضاها و خطوط خالی و کاراکترهای غیر ضروری را از کدهای سایت شما حذف می کند. این روش معمولا فقط برای فایل هایی توصیه می شود که به مرورگر کاربر فرستاده می شوند یعنی فایل های HTML ، CSS و JavaScript. شما همچنین می توانید حجم فایل های PHP را کاهش دهید اما از آنجایی که PHP یک زبان سمت سرور است ، مینی فای کردن فایل های آن تأثیری روی سرعت برای کاربر نمی گذارد.

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

در اینجا نمونه ای از یک کد 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;margin-bottom:10px}

اگر در تلاش هستید تا در سرویس های Google Pagespeed و  GTMetrix امتیاز کامل (100) دریافت کنید ، مینی فای کردن فایل های CSS و JavaScript نقش به سزایی در رسیدن به این هدف دارد.

با وجود توضیحات ارائه شده بیایید ببینیم چگونه می توان به راحتی مراحل کم حجم کردن فایل های CSS و JavaScript را طی کرد.

کم حجم کردن فایل های CSS و JavaScript در وردپرس

اول از همه لازم است افزونه Better WordPress Minify را نصب و فعال کنید. برای جزئیات بیشتر ، توصیه میکنم مطلبی را که با عنوان “راهنمای گام به گام نحوه ی نصب یک افزونه ی وردپرس” منتشر کرده ام مطالعه نمایید. پس از فعال کردن افزونه ، یک منوی جدید با عنوان “BWP Minify” در پنل مدیریت سایتتان اضافه می شود. با کلیک روی آن وارد بخش تنظیمات افزونه می شوید.

در صفحه تنظیمات لازم است تیک دو گزینه اول را بزنید تا مراحل مینی فای کردن فایل های CSS و JavaScript وب سایت وردپرسی شما به طور خودکار انجام شود. اکنون می توانید روی دکمه “Save Changes” (ذخیره تغییرات) کلیک کنید تا دو گزینه ای که تیک آنها را زده اید ذخیره شوند. بسیاری گزینه های پیشرفته دیگری هم در این صفحه وجود دارند. تنظیمات پیش فرض برای اکثر سایت های وردپرسی به خوبی عمل می کنند اما شما می توانید این تنظیمات را مورد به مورد بررسی کنید و در صورت لزوم تغییر دهید.

در مرحله بعد لازم است به صفحه اصلی یا یکی از صفحات سایتتان وارد شوید. کلیک راست کنید و گزینه ” View Page Source” را انتخاب کنید.

در اینجا کدهای HTML که توسط سایت وردپرسی شما تولید شده است را مشاهده خواهید کرد. اگر دقیق تر نگاه کنید متوجه خواهید شد این افزونه فایل های CSS و جاوا اسکریپت را به جای اینکه از فولدر مربوط به قالب ها یا افزونه ها لود کند از فولدر خودش لود می کند. این فایل ها نسخه مینی فای شده فایل های اصلی CSS و JavaScript سایت شما هستند. افزونه  Better WordPress Minify این فایل ها را نگه می دارد و در عوض نسخه مینی فای شده را به مرورگر کاربران ارسال می کند.

تمام مراحل بهینه سازی فایل های CSS و JavaScript به همین راحتی انجام شد. امیدواریم این مطلب به شما کمک کرده باشد یاد بگیرید چطور مراحل مینی فای کردن فایل های CSS و JavaScript را در سایت های وردپرسی به راحتی طی کنید.

منبع: wpbeginner.com