CSS را کوچک کنید

CSS را کوچک کنید

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

CSS minifier چه کاری انجام می دهد؟

همراه با تغییرات ایجاد شده در فایل های CSS؛ ابعاد کاهش می یابد، خطوط غیر ضروری حذف می شوند، خطوط نظرات و فاصله های غیر ضروری حذف می شوند. علاوه بر این، اگر بیش از یک کد در CSS گنجانده شود، این کدها نیز حذف می شوند.

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

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

چرا باید فایل های CSS خود را کوچک کنید؟

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

به یاد داشته باشید، 40٪ از مردم حتی 3 ثانیه صبر نمی کنند تا صفحه اصلی شما بارگیری شود، و گوگل توصیه می کند که سایت ها حداکثر ظرف 2 تا 3 ثانیه بارگیری شوند.

فشرده سازی با ابزار CSS minifier مزایای زیادی دارد.

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

CSS minifier چگونه کار می کند؟

بهتر است قبل از کوچک کردن فایل های سایت خود از آنها نسخه پشتیبان تهیه کنید. حتی می توانید یک قدم جلوتر رفته و فایل های خود را در یک سایت آزمایشی کوچک کنید. به این ترتیب قبل از ایجاد تغییرات در سایت زنده خود مطمئن می شوید که همه چیز آماده است.

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

می توانید عملکرد سرعت صفحه خود را با استفاده از GTmetrix، Google PageSpeed ​​Insights و YSlow، یک ابزار تست عملکرد منبع باز تجزیه و تحلیل کنید.

حال بیایید ببینیم که چگونه فرآیند کاهش را انجام دهیم.

1. Minifier CSS دستی

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

CSS minifier یک ابزار آنلاین رایگان برای کوچک کردن CSS است. وقتی کد را کپی و در فیلد متنی «Input CSS» جای‌گذاری می‌کنید، ابزار CSS را کوچک می‌کند. گزینه هایی برای دانلود خروجی کوچک شده به صورت فایل وجود دارد. برای توسعه دهندگان، این ابزار یک API نیز ارائه می دهد.

JSCompress ، JSCompress یک کمپرسور آنلاین جاوا اسکریپت است که به شما امکان می دهد فایل های JS خود را تا 80 درصد از اندازه اصلی خود فشرده و کاهش دهید. کد خود را کپی و جایگذاری کنید یا چندین فایل را برای استفاده آپلود و ترکیب کنید. سپس روی “Compress JavaScript – Compress JavaScript” کلیک کنید.

2. CSS minifier با پلاگین های PHP

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

• ادغام،
• کوچک کردن،
• تازه کردن،
• افزونه های وردپرس

این افزونه بیشتر از کوچک کردن کد شما انجام می دهد. این فایل‌های CSS و جاوا اسکریپت شما را ترکیب می‌کند و سپس فایل‌های ایجاد شده با استفاده از Minify (برای CSS) و Google Closure (برای جاوا اسکریپت) را کوچک می‌کند. Minification از طریق WP-Cron انجام می شود تا بر سرعت سایت شما تأثیری نداشته باشد. هنگامی که محتوای فایل‌های CSS یا JS شما تغییر می‌کند، آنها دوباره رندر می‌شوند تا نیازی به خالی کردن کش خود نداشته باشید.

JCH Optimize ویژگی های بسیار خوبی برای یک افزونه رایگان دارد: CSS و جاوا اسکریپت را ترکیب و کوچک می کند، HTML را کوچک می کند، فشرده سازی GZip را برای ترکیب فایل ها و رندر sprite برای تصاویر پس زمینه فراهم می کند.

CSS Minify ، فقط باید نصب و فعال کنید تا CSS خود را با CSS Minify کوچک کنید. به Settings > CSS Minify بروید و فقط یک گزینه را فعال کنید: Optimize and Minify code CSS.

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

به Settings > Fast Velocity Minify بروید. در اینجا تعدادی گزینه برای پیکربندی افزونه پیدا خواهید کرد، از جمله جاوا اسکریپت پیشرفته و استثناهای CSS برای توسعه دهندگان، گزینه های CDN و اطلاعات سرور. تنظیمات پیش فرض برای اکثر سایت ها به خوبی کار می کنند.

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

3. مینی فایر CSS با افزونه های وردپرس

CSS minifier یک ویژگی استاندارد است که معمولاً در افزونه های کش پیدا می کنید.

• موشک WP،
• W3 مجموع کش،
• WP SuperCache،
• WP Fastest Cache.

امیدواریم راه‌حل‌هایی که در بالا ارائه کرده‌ایم شما را در مورد نحوه انجام مینی‌فایر CSS روشن کرده باشد و بتوانید درک کنید که چگونه می‌توانید آن را در وب‌سایت خود اعمال کنید. اگر قبلا این کار را انجام داده اید، از چه روش های دیگری برای سریعتر کردن وب سایت خود استفاده کرده اید؟ برای ما در بخش نظرات درباره Softmedal بنویسید، فراموش نکنید که تجربیات و پیشنهادات خود را برای بهبود محتوای ما به اشتراک بگذارید.