بهینه‌سازی فایل‌های استایل‌شیت یا CSS در طراحی وب و نگهداری سایت، موضوع مهمی است که شامل کدنویسی استاندارد، حذف کدهای اضافی و رفع خطاها و در نهایت ترکیب کردن فایل‌های متعدد و فشرده‌سازی برای کاهش حجم می‌شود. قبل از ترکیب کردن فایل‌های CSS و فشرده‌سازی، بهتر است کدهای موجود در هر فایل را بررسی کرده و بهینه کنید.
قبلاً در مقاله‌ای به معرفی چند سایت جالب که کدها را مرتب کرده و خوانایی را بیشتر میکنند، پرداختیم. در این مقاله به موضوع تمیز کردن کدها و رفع خطاها می‌پردازیم. با ما باشید.
حذف خطاها و کدهای اضافی در فایل CSS
افزونه‌های زیادی برای برخی نرم‌افزارهای مدیریت سایت نظیر WordPress منتشر شده که کارشان ترکیب کردن فایل‌های CSS و فشرده‌سازی است. استفاده از این افزونه‌ها مفید است و سرعت سایت را افزایش می‌دهد اما قبل از ترکیب و فشرده‌سازی فایل‌های استایل، بهتر است صحت کدها را چک کنید و اگر خطوطی از فایل‌های استایل، اضافی یا اشتباه است، آن را حذف یا تصحیح کنید. برای این منظور می‌توانید از نرم‌افزارهای آفلاین یا سرویس‌های تحت وب استفاده کنید. در این مقاله به معرفی چند سایت مفید در این عرصه می‌پردازیم.
Code Beautifier
وب‌سایت Code Beautifier با زیباسازی کدهای CSS در شناسایی خطاها مفید واقع می‌شود. می‌توانید محتویات فایل CSS را به عنوان ورودی بدهید و سپس از میان آپشن‌های متنوعی که ارایه شده، مواردی را فعال کنید و در نهایت کد خروجی را با ظاهر بهتر و خوانایی بیشتر، تحویل بگیرید.
این سایت ابزار بهینه‌سازی نیز دارد و می‌توانید خروجی را به شکل یک فایل آماده دانلود کنید.
CSS Redundancy Checker
چک کردن فایل CSS به روش دستی برای یافتن خطوط اضافی و تکراری، کار ساده‌ای نیست. اگر فایل کوچک باشد و چند کلاس و آی‌دی خاص در آن تعریف شده باشد، کار مشکل نخواهد بود اما در مورد فایل‌های طولانی با تعداد زیادی کلاس و آی‌دی، طبعاً چک کردن دستی بسیار مشکل و وقت‌گیر می‌شود. سایت CSS Redundancy Checker برای یافتن کلاس‌ها و آی‌دی‌های تکراری در کدهای CSS کاربرد دارد. با حذف کردن کلاس‌هایی که چند مرتبه در فایل تعریف شده، می‌توانید حجم فایل CSS را کاهش دهید.
فشرده‌سازی CSS و ترکیب و متراکم کردن کدها
برای فشرده‌سازی CSS بهترین روش این است که فایل‌های متنی نظیر CSS و JavaScript و حتی HTML را زیپ کنید. شاید زیپ کردن فایل‌های ویدیویی و صوتی و عکس‌ها اثر کمی در کاهش حجم داشته باشد اما زیپ کردن فایل‌های متنی بسیار موثر است. یک روش مرسوم برای زیپ کردن خودکار در سمت سرور، فعالسازی gzip است که قبلاً در مقاله‌ای به آن اشاره کردیم:
البته در برخی سرورها و هاستینگ‌ها این قابلیت وجود ندارد و در برخی دیگر نیز روش‌های بهتری برای زیپ کردن به صورت پیش‌فرض فعال شده و نیازی به فعال کردن gzip نیست.
روش بعدی برای فشرده‌سازی، یونیفای و مینیفای کردن است:
- منظور از Unify کردن این است که دو یا چند فایل CSS را به یک فایل تبدیل کنید که حاوی تمام کدها است.
- Minify کردن به معنی متراکم کردن کدها و حذف فاصله‌ها و نوشتن همه‌ی کدها در یک خط طولانی است.
فایل CSS مینیفای و یونیفای شده، از منظر طراح وب خوانایی خوبی ندارد و زیبا نیست اما در مقابل مرورگرهای اینترنت آن را سریع‌تر خوانده و تفسیر میکنند. بنابراین مینیفای و یونیفای کردن کاری است که پس از زیباسازی فایل‌های CSS و حذف خطاها و کدهای اضافی می‌بایست انجام شود. در ادامه چند سایت برای مینیفای و یونیفای کردن فایل‌های استایل‌شیت معرفی می‌کنیم.
CSS Nano
CSS Nano یکی از ابزارهای مدرن مینیفای کردن فایل‌های CSS است که با استفاده از Nodejs طراحی شده و می‌توانید با اجرا کردن دستورات، از آن استفاده کنید. اما روش گرافیکی و ساده‌تر این است که از اپلیکیشن تحت وب آن استفاده کنید.
CSS Nano بهینه‌سازی‌های مختلفی را به سرعت انجام می‌دهد و حتی از PostCSS که قبلاً در مقاله‌ای به آن اشاره کردیم، استفاده می‌کند.
CSSO
وب‌سایت CSSO هم ابزاری برای مینیفای کردن فایل‌های استایل‌شیت با چند تنظیم ساده است.
می‌توانید Restructure را فعال کنید که با تغییر ساختار، کدهای CSS را بهینه می‌کند. با انتخاب Beautify نیز ظاهر و خوانایی کدها بهینه می‌شود.
CSS Minify
سایت CSS Minify هم یکی از سایت‌های ساده برای مینیفای کردن است که تنظیمات کم و ساده‌ای دارد اما کارش را به نحو احسن انجام می‌دهد. می‌توانید فایل‌های CSS را آپلود کرده یا با مشخص کردن آدرس فایل‌ها، ایمپورت کنید.
Purify CSS
کتابخانه‌ای به اسم Purify CSS یک روش متفاوت برای بهینه کردن فایل‌های CSS دارد. این کتابخانه به جای تغییر دادن فایل CSS یا کدهای پیست شده، روی اپلیکیشن شما اجرا می‌شود و بررسی می‌کند که از کدام فایل‌های CSS و کدام خطوط استفاده نمی‌شود و این موارد را حذف می‌کند.
استفاده از Purify CSS به خصوص در طراحی سایت به کمک کتابخانه‌هایی نظیر Bootstrap مفید است چرا که ممکن است طراح وب از تمام کلاس‌ها و استایل‌ها استفاده نکند. در این صورت حجم فایل CSS بدون آنکه از تمام کلاس‌ها استفاده شده باشد، زیاد خواهد بود. با کمک پیوریفای سی‌اس‌اس می‌توانید فایل‌ها و بخش‌های استفاده نشده را شناسایی کرده و حذف کنید. لذا Purify CSS ابزار بسیار قدرتمندی برای نوشتن قالب و افزونه و طراحی سایت‌های اختصاصی است.
سیاره‌ی آی‌تی