۱۰ روش برای بهینه سازی کدهای CSS و افزایش سرعت وب سایت :: طراحی سایت

۱۰ روش برای بهینه سازی کدهای CSS و افزایش سرعت وب سایت

شنبه, ۲۹ تیر ۱۳۹۸، ۰۱:۳۳ ب.ظ

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

optimise

فریمورک ها این تعادل را برهم میزنند وقتی از فریمورک هایی همچون jQuery UI استفاده می کنید، فایل های css و جاوا اسکریپت مربوط به این فریمورک ها اندازه صفحات html را به سرعت افزایش می‌دهند. اغلب توسعه‌دهندگان از این بابت کمترین مشکل را حس میکنند زیرا که اکثر آنها دارای سیستم های قدرتمند با اینترنت های بسیار سریع هستند. اما واقعیت این است که وبسایت شما برای کاربران طراحی می‌شود و باید به سرعت بارگذاری آن توجه ویژه ای کرد.

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

در این مقاله به چندین روش برای بهینه سازی CSS خواهم پرداخت. ممکن است هر کدام از آنها قابلیت پیاده شدن بر روی پروژه های شما را نداشته باشند، اما در ذهن داشتن آنها می تواند بسیار مفید باشد.

از اختصار در نوشتن کدها استفاده کنید

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

p { margin-top: 1px;
    margin-right: 2px;
    margin-bottom:  3px;
    margin-left: 4px; }

p { margin: 1px 2px 3px 4px; }

کد هایی از CSS که استفاده نمیشوند را پیدا نموده و حذف کنید

حذف کدهای بلااستفاده در CSS می‌تواند تا حد زیادی باعث افزایش سرعت وب سایت شما شود. خوشبختانه مرورگر کروم قابلیت ویژه ای را در اختیار ما میگذارد که می توانیم از آن برای پیدا کردن کد های بلااستفاده بهره ببریم. از منوی Developer زیر منوی Developer Tools را انتخاب کنید سپس به سربرگ Sources رفته و ترکیب کلیدهای کنترل ، شیفت و p را بفشارید.

اکنون Show Coverage را تایپ کرده و این دستور را اجرا کنید. در این حالت مرورگر کروم به شما قسمت هایی از فایل های css که استفاده نمی شوند را نمایش میدهد.

از مشکلات آگاهی داشته باشید

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

کدهای حیاتی در CSS را به صورت Inline درج کنید

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

style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>

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

سالهای قبل مجموعه ایی از تصاویر PNG نیمه شفاف برای ایجاد افکت های گوناگون در وب سایت ها استفاده می‌شدند. امروز فیلتر های CSS جایگزین آنها شده و باعث صرفه جویی در منابع می شوند. برای مثال کد زیر باعث می شود تصویر مورد نظر به صورت سیاه و سفید نمایش داده شود :

img {
    -webkit-filter: grayscale(100%); /* old
safari */
    filter: grayscale(100%);
}

از میانبر های رنگ استفاده کنید

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

target { background-color: #ffffff; }
target { background: #fff; }

واحدهای غیر ضروری در CSS را حذف کنید

CSS طیف گسترده‌ای از واحدها و فرمت های اعداد را پشتیبانی میکند. آنها یک هدف ایده آل برای بهینه‌سازی هستند. همانطور که در نمونه مثال زیر نشان داده شده است هر دو صفر قبل از ممیز و بعد از آن می‌تواند برداشته شود. به علاوه همیشه به یاد داشته باشید که مقدار صفر همیشه صفر است و نیاز به قرار دادن واحد در کنار آن نیست.

padding: 0.2em;
margin: 20.0em;
avalue: 0px;
padding: .2em;
margin: 20em;
avalue: 0;

فضاهای خالی را حذف کنید

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

کامنت ها را حذف کنید

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

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

تیم با تجربه yahoo اپلیکیشنی را ایجاد کرده است که برخی وظایف فشرده سازی را برای ما انجام می دهد(اینجا) این اپلیکیشن یک فایل JAR است که می تواند با انتخاب JVM اجرا شود.

java -jar yuicompressor-x.y.z.jar
Usage: java -jar yuicompressor-x.y.z.jar
 [options] [input file]
Global Options
    -h, --help                Displays this
 information
    --type <js|css>           Specifies the
 type of the input file

نتیجه

راه های زیادی برای بهینه سازی کد های CSS وجود دارد که شما باید برای افزایش سرعت بارگذاری وب سایت خود از آنها استفاده کنید. در این مقاله ما به ۱۰ مورد اشاره کردیم که هر کدام از آنها می تواند تاثیر بسزایی در کارایی وب سایت شما داشته باشد

منبع: لرن سورس

۰ ۹۸/۰۴/۲۹

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

طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی