آموزش بهینه سازی و فشرده سازی کد های CSS

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

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

آموزش فشرده سازی کد های css

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

ابزار آنلاین فشرده سازی کد های css

سپس با یک صفحه شبیه به عکس زیر مواجه خواهید شد:

در صفحه بالا میتوانید کد های سی اس اس خود را وارد نمایید و به ترتیب مراحل پایین را انجام بدهید:

1- ابتدا کد های css خود را در جعبه سفید رنگ حاوی متن “Paste your CSS code here…” وارد نمایید.

2- در صورت تمایل برای حذف آخرین سمیکالن (;) از آخرین دستور هر بلوک در کد های css میتوانید تیک گزینه “حذف آخرین سمیکالن” را بزنید.

3- در صورت تمایل برای حذف کلیه کامنت ها (توضیحاتی که در کد نوشته می شوند و برای کاربران سایت قابل مشاهده نیست. این توضیحات فقط برای برنامه نویسان قابل مشاهده است) در کد های css میتوانید تیک گزینه “حدف کامنت ها” را بزنید.

4- در صورت تمایل برای فشرده سازی بسیار زیاد کد ها میتوانید تیک گزینه “فشرده سازی زیاد” را بزنید. این گزینه باعث می شود که کد های شما در فشرده ترین حالت ممکن قرار بگیرند.

5- در صورت تمایل برای مجزا سازی استایل ها یا بلوک های کد های css میتوانید تیک گزینه “مجزا سازی استایل ها” را بزنید. این گزینه باعث میشود بلوک های کد از همدیگر جدا شوند و برای برنامه نویس خوانایی بیشتری داشته باشد. توجه نمایید: در صورت گذاشتن تیک گزینه “فشرده سازی زیاد”، گزینه “مجزا سازی استایل ها” غیر فعال خواهد شد.

6- در صورتی که میخواهید همه کد های موجود در جعبه را با هم انتخاب نمایید تا بتوانید همه آنها را با هم کپی کنید، بر روی گزینه “انتخاب همه” کلیک نمایید.

7- در صورتی که میخواهید همه کد های موجود در جعبه را پاک نمایید، بر روی گزینه “پاک کردن” کلیک نمایید.

8- در آخر برای انجام بهینه سازی و فشرده سازی کد های css بر اساس معیار هایی که در بالا تعیین کرده اید، بر روی گزینه “فشرده سازی کد” کلیک نمایید تا کد ها فشرده شوند.

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