کاهش css بهینه سازی CSS: روش ها و خدمات آنلاین ما فایل های CSS و JavaScript را به صورت آنلاین فشرده می کنیم

آیا اصلا فشرده سازی کد CSS ضروری است؟

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

روش های فشرده سازی CSS

یادداشت: فشرده سازی استاتیک، فشرده سازی تا - 80٪ - 90٪

یادداشت: فشرده سازی پویا، فشرده سازی تا -75٪ - 95٪ (بستگی به شما دارد)

یادداشت: فشرده سازی استاتیک، فشرده سازی تا - 50٪

فقط روش فشرده سازی css را که دوست دارید انتخاب کنید و روی آن کلیک کنید یا تمام روش ها را بخوانید و خودتان نتیجه گیری کنید که من به شدت توصیه می کنم.

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

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

اول - 7372 بایت

دوم - 62609 بایت

اولین css کوتاه و خوانا نوشته شده است، بنابراین فشرده تر خواهد شد.

کمپرسور آنلاین CleanCSS

آدرس: www.cleancss.com

یک سرویس کاملاً خوب، بیایید نتایج فشرده سازی css آن را ببینیم.

نتیجه:

اول - فشرده به 7075 بایت (96%)

دومی به 52797 بایت (84.3٪) فشرده شده است.

کمپرسور آنلاین FormatCSS

آدرس: www.lonniebest.com/FormatCSS

این سرویس بیشتر برای قالب بندی فایل های css به جای فشرده سازی آنها طراحی شده است. متن css با استفاده از کپی/پیست وارد می شود.

نتیجه:

اول - فشرده به 8105 بایت (109.9٪)

دومی به 61715 بایت (98.5%) فشرده شده است.

برخطکمپرسورکمپرسور CSS رابسون

آدرس: iceyboard.no-ip.org/projects/css_compressor

این سرویس از نظر بارگیری کد منبع css انعطاف پذیر است. می توانید css را از یک فهرست محلی، از اینترنت یا کپی/پیست در آن بارگیری کنید. بیایید به نتایج فشرده سازی فایل های css نگاه کنیم.

نتیجه:

اول - فشرده به 6326 بایت (86.3٪)

دومی به 48985 بایت (78.2٪) فشرده شده است.

برخطcssکمپرسور html Tabifier

آدرس: tools.arantius.com/tabifier

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

نتیجه:

اول - فشرده شده به 7876 بایت (106.8٪)

دومی به 60706 بایت (96.9٪) فشرده شده است.

فشرده سازی CSS با استفاده از PHP

فشرده‌سازی CSS با استفاده از PHP به روش‌های مختلفی در دسترس است، اما من فقط یکی را ارائه می‌دهم که جالب‌ترین آن برای درک من است. مزیت فشرده سازی css در php پویایی و انعطاف پذیری از نظر تنظیمات فشرده سازی است، زیرا شما خودتان آنها را با استفاده از اسکریپت php خود تنظیم می کنید. اسکریپت من به این شکل است:

یک کد بسیار ساده و راحت که در یک فایل css قرار می دهید که باید به آشناترین روش متصل شود. ویژگی این اسکریپت php استفاده از عبارات منظم است که تمام نظرات و کاراکترهای فضای خالی را حذف می کند و در نتیجه css را فشرده می کند.

فشرده سازی CSS پایه 62

روش بسیار جالب و موثر است، اما ثابت است، یعنی هر بار که فایل css خود را تغییر می دهید، باید مراحل فشرده سازی فایل css را طی کنید. این روش گام به گام در زیر توضیح داده شده است.

1. فشرده سازیcss با استفاده از کمپرسور

شما باید از یکی از کمپرسورهای CSS برای حذف تمام کاراکترهای فضای خالی و تراز کردن کدهای CSS در یک خط استفاده کنید.

2. خلقتفایل js

شما باید یک فایل js ایجاد کنید و کد زیر را در آن قرار دهید:

Document.write("");

به جای /* your style */، رشته به دست آمده را در مرحله اول فرآیند فشرده سازی وارد کنید.

3. فشرده سازی پایه 62

همانطور که می بینید، اکنون یک فایل js دارید که با استفاده از سرویس فشرده می کنید بسته بندیhttp://dean.edwards.name/packer/

کد فایل js خود را در قسمت بالایی قرار دهید و کادر را انتخاب کنید کد Base62، پس از آن نتیجه را در قسمت پایین دریافت خواهید کرد.

این روش به شما این امکان را می دهد که یک فایل css را در اندازه های 15 کیلوبایت تا 8 کیلوبایت، یعنی تقریبا 50% فشرده سازی کنید. مزیت چنین روش پیچیده ای این است که کد حاصل را در یک فایل js قرار می دهید که بقیه اسکریپت های js شما در آن قرار دارند و همه با هم بارگذاری می شوند.

من تمام دانش خود را در مورد فشرده سازی ارائه کردمcss اگر نظری در مورد روش های فشرده سازی کارآمدتر داریدcss، لطفا در نظرات ارسال کنید. با تشکر از توجه شما!

بهینه سازی صفحات وب بخش فوق العاده مهمی است. این نه تنها شامل بهینه سازی کد برنامه سایت، بلکه بهینه سازی شیوه نامه های آبشاری (CSS) نیز می شود که توسط بسیاری از مدیران وب نادیده گرفته می شود.

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

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

ابتدا حتما از خواص عمومی استفاده کنید. اگر به جای حاشیه-پایین، حاشیه-چپ، حاشیه-راست و حاشیه-بالا از یک حاشیه با مقادیر چهار خط قبلی استفاده کنید، می توانید چند خط ذخیره کنید، به عنوان مثال: بدن ( حاشیه: 10px 2px 10px 5px ; ).

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

هیچ کس در اهمیت نظرات شکی ندارد. با حذف کامل آنها، برای یافتن کد مورد نیاز خود بدون افزونه Firebug مشکل تری خواهید داشت. اما فراموش نکنید که آنها بیشترین سهم را از محتوای فایل style.css دارند. برای اصلاح این سوء تفاهم، توصیه می شود از توضیحات کوتاه تری استفاده کنید. به عنوان مثال، به جای ///* یک انحراف طولانی غزلی */// می توانید از یک /* لوگو */ به یاد ماندنی استفاده کنید.

البته روش‌های بهینه‌سازی دیگری نیز وجود دارد، اما مراجعه به منابع ویژه‌ای که با آن‌ها می‌توانید مستقیماً از مرورگر CSS را بهینه کنید، بسیار آسان‌تر است.

نمونه ترین آنها CleanCSS.com بود. این سایت چندین گزینه فشرده سازی ارائه می دهد: کم، استاندارد، زیاد، فوق العاده و سفارشی. گزینه فشرده سازی استاندارد متعادل ترین گزینه بین وزن و خوانایی است. بالا و بالاتر توصیه می شود فقط در صورتی استفاده شود که در آینده تغییری در CSS ایجاد نکنید، زیرا کد کاملاً غیرقابل خواندن می شود. همچنین تعدادی گزینه اضافی مانند فشرده سازی رنگ و فونت، انتخابگرهای مرتب سازی و غیره را ارائه می دهد. می توانید نتیجه نهایی را یا به صورت متن دریافت کنید یا آن را به یک فایل صادر کنید.

در بین خدمات روسی، بهینه ساز CSS در وب سایت CY-PR.com نتایج مناسبی را نشان داد. عملکرد آن عملا هیچ تفاوتی با CleanCSS ندارد. با تنظیمات استاندارد، نسبت فشرده سازی می تواند به 25٪ برسد، با حداکثر تنظیمات - بیش از 30٪. متاسفانه هیچ صادراتی به فایل وجود ندارد.

توضیح سایر خدمات بی معنی است، زیرا آنها مطابق با همان طرحی که CleanCSS.com و CY-PR.com ذکر شده کار می کنند، اما وجود دارند و کاملاً کاربردی هستند.

خانم ها و آقایان، بیایید پارانویا را روشن کنیم:

با این حال، اگر میانگین نتیجه را در نظر بگیریم، 2 ابزار با حاشیه نسبتاً زیاد برجسته می شوند:

1. cssresizer.com (84.13%);

whois spoiler

nikitas@pentagon:~$ whois cssresizer.com

Whois Server نسخه 2.0

نام دامنه در دامنه های .com و .net اکنون قابل ثبت است
با بسیاری از ثبت کنندگان رقیب مختلف. به http://www.internic.net بروید
برای اطلاعات دقیق

نام دامنه: CSSRESIZER.COM
ثبت کننده: REGISTRAR OF DOMAIN NAMES REG.RU LLC
شناسه ثبت کننده حامی IANA: 1606
سرور Whois: whois.reg.com
آدرس ارجاع: http://www.reg.ru
سرور نام: NS1.MCHOST.RU
سرور نام: NS2.MCHOST.RU
سرور نام: NS3.MCHOST.RU
سرور نام: NS4.MCHOST.RU
وضعیت: clientTransferProhibited https://icann.org/epp#clientTransferProhibited
تاریخ به روز رسانی: 21-آوریل-2016
تاریخ ایجاد: 08-آوریل-2016
تاریخ انقضا: 08-آوریل-2017

برای اطلاعات بیشتر در مورد کدهای وضعیت Whois، لطفاً به https://icann.org/epp مراجعه کنید

توجه: تاریخ انقضای نمایش داده شده در این رکورد، تاریخ است
حمایت ثبت کننده از ثبت نام دامنه در رجیستری می باشد
در حال حاضر منقضی شده است. این تاریخ لزوماً نشان دهنده انقضا نیست
تاریخ توافق ثبت کننده نام دامنه با اسپانسر
ثبت کننده کاربران می توانند به پایگاه داده Whois ثبت کننده حمایت کننده مراجعه کنند
تاریخ انقضای گزارش شده توسط ثبت کننده برای این ثبت نام را مشاهده کنید.

شرایط استفاده: شما مجاز به دسترسی یا پرس و جو به Whois ما نیستید
پایگاه داده از طریق استفاده از فرآیندهای الکترونیکی که حجم بالایی دارند و
به جز خودکار در صورت لزوم برای ثبت نام دامنه یا
اصلاح ثبت های موجود؛ داده ها در رجیستری جهانی VeriSign
خدمات" ("VeriSign") پایگاه داده Whois توسط VeriSign برای ارائه شده است
فقط برای اهداف اطلاعاتی و کمک به افراد در به دست آوردن اطلاعات
در مورد یا مربوط به سابقه ثبت نام دامنه. VeriSign ندارد
صحت آن را تضمین کند. با ارسال یک درخواست Whois، موافقت می کنید که رعایت کنید
طبق شرایط استفاده زیر: شما موافقت می کنید که فقط می توانید از این داده ها استفاده کنید
برای مقاصد قانونی و اینکه تحت هیچ شرایطی از این داده ها استفاده نخواهید کرد
به: (1) اجازه دادن، فعال کردن یا پشتیبانی از انتقال جرم
تبلیغات ناخواسته، تجاری یا درخواست از طریق ایمیل، تلفن،
یا فکس؛ یا (2) فرآیندهای الکترونیکی، خودکار و حجم بالا را فعال کنید
که برای VeriSign (یا سیستم های کامپیوتری آن) اعمال می شود. تالیف
بسته بندی مجدد، انتشار یا سایر استفاده از این داده ها به صراحت می باشد
بدون رضایت کتبی قبلی VeriSign ممنوع است. قبول میکنی که نکنی
استفاده از فرآیندهای الکترونیکی که خودکار و با حجم بالا برای دسترسی به یا
پرس و جو از پایگاه داده Whois به جز مواردی که منطقاً برای ثبت نام ضروری است
نام دامنه یا تغییر ثبت های موجود. VeriSign این حق را برای خود محفوظ می دارد
برای اطمینان از دسترسی شما به پایگاه داده Whois به صلاحدید خود محدود شود
ثبات عملیاتی VeriSign ممکن است دسترسی شما به آن را محدود یا قطع کند
پایگاه داده Whois برای عدم رعایت این شرایط استفاده. VeriSign
این حق را برای خود محفوظ می دارد که در هر زمان این شرایط را تغییر دهد.

پایگاه داده رجیستری فقط شامل دامنه های COM، .NET، .EDU و
ثبت نام کنندگان

نام دامنه: cssresizer.com
نام دامنه: cssresizer.com
وضعیت: clientTransferProhibited http://www.icann.org/epp#clientTransferProhibited
شناسه دامنه رجیستری:
سرور WHOIS ثبت کننده: whois.reg.com
آدرس ثبت کننده: https://www.reg.com/
آدرس ثبت کننده: https://www.reg.ru/
آدرس ثبت کننده: https://www.reg.ua/
تاریخ به روز رسانی:
تاریخ ایجاد: 2016-04-08T14:01:10Z
تاریخ انقضای ثبت نام: 2017/04/08
ثبت کننده: ثبت کننده نام های دامنه REG.RU LLC
شناسه ثبت IANA: 1606
ایمیل تماس با سوء استفاده از ثبت: [ایمیل محافظت شده]
تلفن تماس با ثبت نام: +7.4955801111
شناسه ثبت نام کننده:
شناسه ثبت نام کننده:
نام ثبت کننده: حفاظت از شخص خصوصی
خیابان ثبت‌کننده: صندوق پستی 87، خدمات حفاظتی REG.RU
شهر ثبت نام کننده: مسکو
ایالت/استان ثبت کننده:
کد پستی ثبت نام کننده: 123007
کشور ثبت کننده: RU
تلفن ثبت نام کننده: +7.4955801111
تلفن خارجی ثبت نام کننده:
فکس ثبت نام کننده: +7.4955801111
فاکس ثبت نام کننده:
ایمیل ثبت نام کننده: [ایمیل محافظت شده]
شناسه مدیریت:
نام مدیر: حفاظت از شخص خصوصی
Admin Street: صندوق پستی 87، REG.RU Protection Service
شهر مدیریت: مسکو
ایالت/استان مدیریت:
کد پستی مدیریت: 123007
کشور مدیریت: RU
تلفن مدیریت: +7.4955801111
قسمت تلفن مدیریت:
فکس مدیریت: +7.4955801111
فکس ادمین خارجی:
ایمیل ادمین: [ایمیل محافظت شده]
شناسه فنی:
نام فنی: حفاظت از شخص خصوصی
Tech Street: صندوق پستی 87، REG.RU Protection Service
شهر فنی: مسکو
ایالت/استان فنی:
کد پستی فنی: 123007
کشور فنی: RU
تلفن فنی: +7.4955801111
قسمت تلفن فنی:
فکس فنی: +7.4955801111
فکس فنی:
ایمیل فنی: [ایمیل محافظت شده]
سرور نام: ns1.mchost.ru
سرور نام: ns2.mchost.ru
سرور نام: ns3.mchost.ru
سرور نام: ns4.mchost.ru
DNSSEC: بدون امضا
URL سیستم گزارش مشکل داده ICANN WHOIS: http://wdprs.internic.net/
>>> آخرین به روز رسانی پایگاه داده WHOIS: 2016-07-27T00:49:39Z<<<

برای اطلاعات بیشتر در مورد کدهای وضعیت Whois، لطفاً مراجعه کنید
https://www.icann.org/resources/pages/epp-status-codes-2014-06-16-en.

% با ارسال یک درخواست به REG.RU Whois Service
% شما موافقت می کنید که از شرایط استفاده زیر پیروی کنید:
% http://www.reg.ru/whois/servpol (به روسی)
% http://www.reg.com/whois/servpol (به انگلیسی)

و دوباره:

2 ساز با حاشیه نسبتاً زیاد برجسته می شوند

عصر بخیر من مدت زیادی است که هیچ یادداشتی در مورد بهینه سازی فنی ندارم، بنابراین امروز در مورد آن صحبت خواهم کرد فشرده سازی CSS.

بلافاصله این سؤال مطرح می شود - چرا این لازم است؟ پاسخ ساده است: با بهینه سازی شیوه نامه ها، مقدار کد دانلود شده و وزن فایل style.css کاهش می یابد. در نتیجه وزن صفحه کمتر می شود که باعث صرفه جویی در ترافیک و افزایش سرعت بارگذاری سایت می شود.

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

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

نحوه بهینه سازی CSS و کاهش حجم فایل

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

چه فعالیت هایی را می توان هنگام بهینه سازی CSS انجام داد:

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

البته، می‌توانید راه‌های دیگری برای بهینه‌سازی پیدا کنید، اما من احتمالاً در اینجا توقف می‌کنم و داستان خود را در مورد ابزارهای بهینه‌سازی CSS آنلاین ادامه می‌دهم.

بهینه سازی CSS با استفاده از خدمات آنلاین

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

تعداد کافی ابزار آنلاین (CleanCSS، Online CSS Optimizer و غیره) وجود دارد که می توانند بهینه سازی CSS را انجام دهند. آنها تفاوت زیادی با یکدیگر ندارند، اغلب از الگوریتم ها و کتابخانه های فشرده سازی یکسانی مانند YUICompressor یا CSSTidy استفاده می کنند.

من با جزئیات بیشتری در مورد موردی که بیشتر استفاده می کنم صحبت خواهم کرد. این یک بهینه ساز CSS در پورتال برای مدیران وب سایت CY-PR.com است.

برای شروع، باید یک قطعه CSS یا کل محتویات یک stylesheet را در قسمت متن قرار دهید. از تنظیمات سریع در لیست کشویی سمت راست استفاده کنید:

• حداکثر (کد ناخوانا، کوچکترین اندازه)؛
• بالا (قابل خواندن، اندازه کوچک)؛
• استاندارد (تعادل بین خوانایی و اندازه)؛
• کم (کد قابل خواندن)؛
• خودتان را انتخاب کنید (پارامترهای زیر را وارد کنید).

برای بهینه سازی ایمن، استفاده از فشرده سازی استاندارد توصیه می شود. فقط برای سرگرمی، از سایر تنظیمات سریع استفاده کنید، اما به یاد داشته باشید که یک نسخه پشتیبان داشته باشید. پس از تنظیم پارامترهای فشرده سازی CSS، می توانید با فشار دادن دکمه مستقیماً با اسکریپت شروع به کار کنید. CSS را بهینه کنید.

نتایج در زیر نمایش داده می شود که اندازه کد اصلی و بهینه شده و همچنین نسبت فشرده سازی را به صورت درصد نشان می دهد:

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

این فرآیند حذف کدهای غیر ضروری یا اضافی در فایل های CSS برای کاهش حجم فایل به منظور افزایش سرعت بارگذاری صفحه است.
مورد توجه شما قرار می دهیم 10 ابزار بهینه سازی CSSچه کسی می تواند به شما در سازماندهی کمک کند CSS خود را بهینه کنیدسریع و آسان کد کنید

StyleStats

مسیر بحرانی CSS Generator

هلیوم

CSS Ratiocinator

CSS Lint