آموزش فشرده کردن (Minify) فایل های CSS و JavaScript در وردپرس

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

فشرده سازی (Minify) چیست و چه موقع به آن نیاز دارید؟

فشرده سازی یا همان Minify روشی است که با استفاده از آن می توانید حجم فایل های موجود در سایت خود را کم کنید. اینکار با حذف فضاهای خالی و کارکترهای غیرضروری از کدها انجام می شود. معمولاً از این روش برای فایل هایی استفاده می شود که به مرورگر کاربر ارسال می شود. این فایل ها شامل فایل های HTML، CSS و جاوااسکریپت می شود. همچنین شما می توانید فایل های PHP را نیز فشرده سازی بکنید، اما باید بدانید که PHP یک زبان برنامه نویسی سمت سرور است و فشرده سازی آن سرعت بارگذاری صفحات برای کاربران را بهبود نخواهد بخشید. به طور کلی می توان گفت؛ اگر می خواهید سرعت بارگذاری وب سایت خود را به یکباره افزایش دهید، فشرده کردن فایل‌های css در وردپرس می تواند یک انتخاب عالی باشد. در ادامه شما را با راه های کاهش حجم فایل‌ های JS و CSS در وردپرس آشنا می کنیم.

بیشتر بخوانید: آموزش لینک سازی داخلی در وردپرس 

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

همانطور که اشاره شد، با فشرده کردن فایل های css و جاوا اسکریپت در وردپرس می توانید تا حدود خیلی زیاد سرعت بارگذاری وب سایت خود را بالا ببرید که این موضوع نه تنها به بهبود رتبه شما در گوگل کمک می کند، بلکه باعث رضایت بیشتر کاربران از شما نیز می شود. همراه ما باشید تا آموزش بهینه سازی فایل های CSS JS در وردپرس را با استفاده از 3 روش مختلف در اختیار شما قرار دهیم.

1. نحوه فشرده کردن فایل های CSS و JavaScript در وردپرس با افزونه WP Rocket
2. آموزش minify کردن فایل های css و جاوا اسکریپت با استفاده از هاست
3. راه های کاهش حجم فایل‌ های JS و CSS در وردپرس با افزونه Autoptimize

در ادامه توضیحاتی در خصوص هریک از این روش ها در اختیار شما قرار می دهیم. امیدوارم تا انتهای این اموزش مارو همراهی کنید.

1- نحوه فشرده کردن فایل های CSS و JavaScript در وردپرس با افزونه WP Rocket

یکی از ساده ترین و بهترین روش ها برای فشرده سازی فایل های CSSو JavaScript در وردپرس ، استفاده از افزونه موشک وردپرس یا همان WP Rocket می باشد. این افزونه یکی از بهترین پلاگین های افزایش سرعت سایت می باشد که تاکنون ارائه شده است. در واقع این افزونه به شما این امکان را می دهد تا به سادگی کش را به وردپرس خود اضافه و سرعت وب سایت و زمان بارگذاری صفحه را به میزان قابل توجهی بهبود ببخشید.

برای انجام اینکار، در ابتدا باید افزونه WP Rocket را خریداری کرده و سپس در سایت خود نصب و فعال کنید ( برای خرید افزونه کلیک کنید ). پس از آن باید افزونه را در سایت خود نصب و فعال کنید. اگر با طریق نصب افزونه آشنایی ندارید می توانید مطلب “آموزش نصب افزونه وردپرس” را مشاهده کنید. همچنین در صورت نیاز می توانید مطلب ” آموزش کار با افزونه راکت (Wp Rocket) وردپرس” را نیز مشاهده کنید.

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

حال از این قسمت باید تیک گزینه Minify CSS files را علامت بزنید.

بیشتر بخوانید: نحوه اضافه کردن CSS در وردپرس

پس از آن افزونه WP Rocket هشداری را به شما نشان می دهد که ممکن است مواردی را در سایت شما خراب کند. نگران نباشید و ادامه دهید و در نهایت روی دکمه «فعال کردن Minify CSS” کلیک کنید. اگر در آینده مشکلی برای سایت شما رخ داد و یا سایت شما خراب شد، کافیست این گزینه را غیرفعال کنید.

در مرحله بعد، از انتهای صفحه باید به بخش فایل های جاوا اسکریپت مراجعه کنید. در این بخش کافیست تیک گزینه “Minify JavaScript files” را علامت بزنید.

پس از آن دوباره یک هشدار به شما نشان داده می شود که بهتر است ان را فعلاً نادیده بگیرید و روی دکمه  “فعال کردن Minify JavaScript” کلیک کنید. در نهایت فراموش نکنید که تغییرات خود را ذخیره کنید. پس از انجام اینکار، افزونه به صورت خودکار شروع به فشرده کردن فایل های css و js در وردپرس شما می کند.

بیشتر بخوانید: آموزش نمایش لینک شبکه های اجتماعی نویسندگان سایت در وردپرس 

2- آموزش minify کردن فایل های css و جاوا اسکریپت با استفاده از هاست

یکی دیگر از روش های که می توانید از آن برای فشرده سازی فایل های خود استفاده کنید، مراجعه به ارائه دهنده میزبانی یا همان هاست می باشد. به عنوان مثال: ما از هاست SiteGround استفاده می کنیم، بنابراین در ادامه شما را نحوه فشرده کردن فایل های CSS و JavaScript در وردپرس با استفاده از SiteGround آشنا می کنیم.

افزونه SiteGround Optimizer یک پلاگین بهینه سازی عملکرد است که روی پلتفرم خودش کار می کند و باعث می شود زمان بارگذاری سایت شما بهبود بخشد. بنابراین باید در ابتدا افزونه SiteGround Optimizer را در سایت خود نصب و فعال کنید. این افزونه به صورت رایگان در مخزن وردپرس به ثبت رسیده که می توانید به سادگی آن را در سایت خود فعال کنید. پس از اینکه افزونه برای شما فعال شد، از بخش نوار کناری روی گزینه “SG Optimizer” کلیک کنید.

پس از آن وارد بخش تنظیمات افزونه می شود. حال در این صفحه در ابتدا از بخش “Other Optimizations” روی دکمه “Go To Frontend” همانند تصویر زیر کلیک کنید.

در صفحه بعدی، باید گزینه “Minify CSS files” را فعال کنید.

در مرحله بعد، به تب جاوا اسکریپت مراجعه کنید و سپس گزینه «کوچک کردن فایل‌های جاوا اسکریپت» را فعال نمائید. پس از آن افزونه شروع به فشرده سازی فایل های CSSو JavaScript در وردپرس می کند.

بیشتر بخوانید: آموزش نحوه اضافه کردن کد سفارشی در وردپرس 

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

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

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

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

در نهایت فراموش نکنید که تغییرات خود را ذخیره کنید تا افزونه شروع به فشرده سازی فایل های سایت شما کند.

بیشتر بخوانید: آموزش حل مشکل Render-Blocking جاوا اسکریپت و CSS در وردپرس

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

بیشتر بخوانید: آموزش اضافه کردن استایل دلخواه به ابزارک ها در وردپرس

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

همانطور که اشاره شد، با فشرده سازی فایل های CSSو JavaScript در وردپرس حجم فایل های سایت شما کم می شود که این موضوع باعث می شود سایت شما با سرعت بالاتری برای کاربران بارگذاری شود. ما در این مطلب نحوه فشرده کردن فایل های CSS و JavaScript در وردپرس را با استفاده از 3 روش مختلف به شما آموزش دادیم. امیدوارم این مطلب مورد رضایت شما عزیزان قرار گرفته باشد.

منبع: wpbeginner