کاهش حجم فایل‌های JS و CSS | روش فشرده سازی کدها


نویسنده:
دوشنبه 8 دی 1399
کاهش حجم فایل‌های js و css

احتمالاً زمانی که وب‌سایت خود را در ابزارهای تست سرعت و بهینه‌سازی چک می‌کنید با خطاهایی جهت فشرده سازی فایل‌ها با عنوان minify مواجه می‌شوید. کاهش حجم فایل‌های JS و CSS و فشرده‌سازی آنها باعث کاهش حجم صفحه و در نتیجه افزایش سرعت سایت می‌شود.

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

روش‌های بهینه‌سازی کد و کاهش حجم فایل‌های JS و CSS

۱- استفاده از ابزارهای آنلاین

ابزارهای آنلاینی وجود دارند که کافیست کدهای خود را در آنجا قرار دهید تا آنها را به صورت فشرده به شما تحویل دهند. یکی از این ابزارها minifier.org است. به این وب‌سایت مراجعه کنید و کدهای وب‌سایت خود را در آن قرار دهید.

 بهینه‌سازی کدها و کاهش حجم فایل‌های JS و CSS

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

وب سایت های دیگری مثل cssMinifier و jscompress هم برای انجام این کار ساخته شده اند.

۲- استفاده از پلاگین راکت در وردپرس

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

برای نمونه در افزونه راکت (wp rocket)، کافیست به بخش فشرده سازی فایلها (file optimization) مراجعه کرده و گزینه‌های فشرده سازی را فعال کنید.

همچنین بخوانید: آموزش کار با افزونه راکت


۳- افزونه‌‌ی Fast Velocity Minify برای فشرده سازی فایل

اگر وب‌سایت شما وردپرسی است کافیست برای فشرده سازی فایل‌های سایت خود به سراغ این پلاگین بروید. این افزونه بیش از ۱۰۰هزار نصب فعال دارد و می‌تواند فقط با چند کلیک باعث افزایش سرعت وب‌سایت شما شود.

با نصب این افزونه در پنل وردپرس در منو تنظیمات وب‌سایت ، زیرمنویی با عنوان Fast Velocity Minify اضافه می‌شود. وارد این قسمت شوید و در تب setting گزینه‌های Enable HTML Processing و Enable CSS Processing و Enable JS Processing را فعال کنید.

 بهینه‌سازی کدها و کاهش حجم فایل‌های JS و CSS در وردپرس

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


در مقالات گذشته روش‌های برای بهینه‌سازی تصاویر هم ارائه داده بودیم. کافیست به مقاله‌ی روش‌های فشرده سازی تصاویر مراجعه کنید. چرا که فشرده کردن تصاویر نقش زیادی در بهینه‌سازی وب‌سایت دارد.

مطالب زیر را حتما بخوانید

phpmyadmin چیست؟ آشنایی با ویژگی‌ها و کاربردهای آن در فضای وب

phpmyadmin نرم‌افزار منبع بازی است که با استفاده از PHP برای مدیریت پایگاه داده نوشته شده است.

رازهایی برای افزایش بازدید سایت به صورت ارگانیک

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

چگونه می‌توانیم باعث ایندکس نشدن سایت توسط موتورهای جستجو شویم؟

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

رفع گام به گام خطا Destination Folder Already Exists در وردپرس

خطا Destination Folder Already Exists در وردپرس از جمله مهم‌ترین مواردی است که هر ادمین وب‌سایتی ممکن است با آن...

دیدگاهتان را بنویسید

2 پاسخ به “کاهش حجم فایل‌های JS و CSS | روش فشرده سازی کدها”

  1. زمانی گفت:

    سلام وقتتون بخیر توضیحات عالی بود ولی من یه مشکل دارم بعد از اینکه در extention را bundler minifier را دانلود کردم مرحله بعدش را که select میکنم گزینه ای مربوط به bundler یا minifier نمیاره .
    ممنون میشم راهنمایبم کنید

دیدگاهتان را بنویسید