آموزش کامپیوتر و اینترنتآموزش وبلاگ نویسیابزار وبمسترترفندستانمعرفی لینک

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

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

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

حتماً می دانید که یکی از معیارهای مهم در طراحی سایت، بهینه سازی سایت یعنی سرعت بارگذاری وب سایت بالا باشد و همچنین مقدار پهنای باندی که وب سایت مصرف می کند، کم باشد. برای رسیدن به این معیار، راه حل های مختلفی در زمینه های مختلف طراحی سایت وجود دارد که یکی از آن ها کاهش حجم کد های 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 استفاده نمایید.

برچسب ها

سیدرضا بازیار

به وب سایت شخصی من خوش آمدید! من سیدرضا بازیار هستم، متولد 1374 شهرستان کازرون. در حال حاضر دانشجوی رشته مهندسی فناوری اطلاعات هستم، مسلط به زبان های: HTML5 - CSS3 - JavaScript در حال یادگیری زبان های PHP و Python هستم و علاقه بسیار زیادی به برنامه نویسی تحت وب ، هوش مصنوعی و زمینه امنیت اطلاعات دارم.

‫2 نظرها

  1. سلام وقت بخیر…من برا اولین باره که از هاست و .. استفاده میکنم و بعد از نصب وردپرس رو هاست هنگام ورود یوزر و پسورد ک میزنم ارور میده ک من فایل کانفیگ سمپل رو پیدا نمیکنم واس همین مجبور میشم دوباره از کانفیگ به سمپل کانفیگ برگردونم!!!! این ارور ک رفع این دفعه میخواد قسمت پیشوند رو هم پر کنم در حالی ک پیشوند جدولامو تغییر ندادم همونwp_ هستش!!!
    لطفا راهنمایی کنید ممنون

  2. با احترام
    سایت شما دارای مطالب با کیفیت بسیار بالایی است
    که در سایت های ایرانی که نیست(حتی ارایه کننده سرویس ها)

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بستن