مجله خبری هاست ایران » طراحی و توسعه » سئو و بهینه سازی سایت » روش های کاهش حجم کدهای CSS
سئو و بهینه سازی سایت طراحی و توسعه

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

کاهش حجم css

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

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

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

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

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


مقاله مرتبط: ٢٠ ترفند CSS که هر طراح وب باید بداند


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

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

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

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

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

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

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

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

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

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

  • وارد کردن متن CSS
  • آپلود فایل CSS

وارد کردن متن CSS : در این روش ابتدا کدهای CSS سایتتان را به صورت جداگانه در قسمت مورد نظر کپی کرده و روی دکمه ارسال کلیک کنید.

وارد کردن متن CSS

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

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

پس از کلیک روی گزینه ارسال میزان فشرده سازی کدهای CSS به شما نمایش داده می شود و شما می توانید کد فشرده شده را جایگزین کد اصلی نمایید.
تذکر : استفاده از این ابزار فقط برای کدهایی کاربرد دارد که به صورت دستی به سایت اضافه شده اند. در صورتی که از قالب های آماده استفاده می کنید استفاده از ابزار فشرده سازی فایل های CSS توصیه نمی شود چراکه ممکن است استایل های وب سایت شما دچار مشکل شوند.
آپلود فایل CSS : تفاوت این قسمت با بخش قبلی در این است که شما می توانید تا ۱۰ فایل CSS را صورت هم‌زمان فشرده سازی کرده و فایل فشرده شده را دانلود کنید.

آپلود فایل CSS

پس از فشرده سازی تمامی فایل ها نسخه بهینه سازی شده را جایگزین فایل اصلی نمایید.

افزودن دیدگاه

کلیک برای ثبت دیدگاه