روش های کاهش حجم کدهای CSS

روش های کاهش حجم کدهای CSS

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

چه چیزی باعث می شود که حجم کدهای CSS زیاد شود؟

عوامل متعددی در افزایش حجم کد های CSS سایت نقش دارند که مهمترین آن ها عبارت اند از:

  • فاصله موجود بین کد های CSS
  • تعداد خط کدها
  • کامنت کردن بخشی از کد های CSS
  • تکراری بودن استایل ها
  • فعال نبودن Gzip

این عوامل علاوه بر افزایش حجم فایل های CSS بر روند و سرعت بارگذاری وب سایت تاثیرگذار هستند.

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

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

  • بهینه سازی کد ها به صورت دستی
  • استفاده از افزونه های بهینه سازی (وردپرس، جوملا و…)
  • استفاده از ابزار های آنلاین بهینه سازی فایل های CSS

بهینه سازی کدهای CSS به صورت دستی

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

روش های کاهش حجم کدهای CSS

این روش به دلیل زمانبر بودن و امکان بروز خطا توسط طراح قابلیت اطمینان کمتری نسبت به شیوه های دیگر دارد.

استفاده از افزونه های بهینه سازی

یکی از دیگر روش ها برای فشرده سازی کدهای CSS استفاده از افزونه های معروفی چون W٣ Total Cache در سیستم مدیریت محتوای وردپرس و افزونه JCH Optimize در جوملا است. یکی از مهمترین مشکلات این شیوه عدم سازگاری آن با قالب های مختلف است و ممکن است ساختار وب سایت را درهم بریزد.
از دیگر مشکلاتی که این افزونه ها می توانند در پی داشته باشند ایجاد مشکلات امنیتی است. توصیه می شود پیش از نصب این افزونه ها جوانب امنیتی را در نظر بگیرید.
تذکر : پیش از نصب این گونه افزونه ها یک نسخه پشتیبان (Backup) از وب سایت خود تهیه نمایید.

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

آخرین روش برای فشرده سازی CSS استفاده از ابزار های آنلاین بهینه سازی فایل های CSS است. این شیوه مطمئن ترین راه برای بهینه سازی کد ها به حساب می آید. در زیر برخی از وب سایت های فشرده سازی فایل های CSS برای شما لیست شده اند:

برنامه نویسان دات نت می توانند با اسفاده از ابزار قرار داده شده در IDE خود ویژوال استادیو اقدام به فشرده سازی خودکار فایل های CSS و جاوااسکریپت خود نمایند، این ابزار در ASP.Net MVC و ASP.et MVC Core موجود می باشد که از طریق لینک زیر می توانید راهنمای استفاده از آن را فرا بگیرید:

 

لینک کوتاه این مطلب: 

 



تصویر امنیتی