• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
چند روش برای بهینه سازی CSS و کاهش حجم فایل استایل
#1
سلام
با اجازه ی اساتید بهینه سازی این مقاله رو میزارم
خودم که دو سه تا چیز جدید ازش یاد گرفتم Big Grin
امیدوارم به درد شما هم بخوره

1- از CSS Sprite استفاده کنید

"CSS Sprite ها روش هایی برای کاهش تعداد درخواستهای تصاویر می باشد. تصاویر پس زمینه ی سایتتون رو با هم ترکیب کنید و یک تصویر واحد ایجاد کنید و از background-image و background-position برای نمایش بخش مورد نظر از تصویر کمک بگیرید."Yahoo Developer Rule
این روش به صورت چشمگیری تعداد درخواست های HTTP رو کاهش میده و برای سایت هایی با ترافیک بالا خیلی موثره. وبسایت Digg از این متد استفاده می کنه

2- فایل های استایلتان را به یک فایل تبدیل کنید

"وقتی یه کاربر وبسایت شما رو باز میکنه برای هر آبجکتی (مثلا عکس ها یا اسکریپت ها) که در سایتتون قرار داره یه درخواست HTTP به سرور می فرسته، پس هر چقدر تعداد این آبجکت ها بیشتر باشه، تاخیر سایت شما هم بالاتر میره" Daylyblogtips
این روش خیلی شبیه روش بالاست، هدف هر دو روش کاهش تعداد درخواست های HTTP به سرور هستش. پس اگه برای مثال 3تا فایل استایل دارین، اونو به یه فایل تبدیل کنید تا به جای 3درخواست HTTP فقط یه درخواست به سرور بفرستید

قبل
کد:
<link rel="stylesheet" type="text/css" href="content.css" />
<link rel="stylesheet" type="text/css" href="about.css" />
<link rel="stylesheet" type="text/css" href="contact.css" />
بعد
کد:
<link rel="stylesheet" type="text/css" href="layout.css" />

3- فایل استایلتان را به صورت External ایجاد کنید

"استفاده از استایل های خارجی یا همون External باعث میشه تا صفحات سریعتر لود بشن، چون این فایل ها رو مرورگر Cache میکنه و دفعات بعدی دیگه دانلود نمیشن. اما وقتی به صورت inline استایل بدیم، هر دفعه که صفحه ی html لود میشه استایل هم دوباره دانلود میشه. وقتی استایل رو inline میدیم تعداد درخواست های HTTP کم میشه اما سایز فایل html زیاد میشه. به عبارت دیگه اگه از استایل های خارجی استفاده کنیم سایز صفحه کمتر میشه در حالی که تعداد درخواستهای HTTP به سرور نیز افزایش پیدا نمی کنه." Yahoo Developer
در نتیجه به جای اینکه کلی استایل و اسکریپت رو به صورت inline در فایل html بنویسیم، باید سعی کنیم تا جایی که ممکنه این کدها رو تو فایل های جداگونه قرار بدیم. این هم باعث میشه که کدها راحت تر خونده بشن و هم اینکه عملکرد سایت بهتر میشه.

4- همیشه فایل CSS رو توی هدر قرار بدید

"قرار دادن فایل استایل در Head باعث میشه که صفحات سریعتر به نظر برسن. چون اینکار باعث میشه تا صفحه به تدریج رندر بشه" Yahoo Developer
قرار دادن فایل اسایل در head باعث میشه تا سایت بدون استایل دیده نشه. دیدین بعضی سایت ها اول خیلی قاطی پاتین بعد که کامل لود میشن همه چی میره سر جاش. این به خاطر اینه که فایل استایل رو تو head نذاشتن و المنت های صفحه موقعی که لود می شن هنوز استایل نگرفتن.

5- به جای [email protected] از link استفاده کنید

یه تست که تو آدرس زیر انجام شده نشون میده که بهتره از [email protected] استفاده نکنیم (من که تا حالا از این استفاده نکردم، فک کنم سنم قد نمیده به این. شاید قدیما استفاده می کردن Big Grin)
- استفاده از [email protected] باعث میشه که زمان یک رفت و برگشت اضافی به زمان کل دانلود صفحه اضافه بشه
- استفاده از [email protected] تو IE باعث میشه که اولویت دانلودها تغییر کنه و دانلود شدن فایل استایل بیشتر طول بکشه.
برای توضیحات بیشتر میتونین به مقاله ی علیرضا مراجعه کنید

6- از مختصر نویسی توی CSS بهره بگیرید

یعنی مثال زیر رو ببینید

کد:
/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}

h1 {margin-top:1em;
       margin-right:0;
       margin-bottom:2em;
       margin-left:0.5em;
}

/* BORDER */
h1 {border:1px solid #000;}

h1 {border-width:1px;
    border-style:solid;
    border-color:#000;
}

/* BORDER WIDTH */
h1 {border-width:1px 2px 3px 4px;}

h1 {border-top-width:1px;
    border-right-width:2px;
    border-bottom-width:3px;
    border-left-width:4px;
}

/* BACKGROUND */
div    {background:#f00 url(background.gif) no-repeat fixed 0 0;}

div    {background-color:#f00;
     background-image:url(background.gif);
     background-repeat:no-repeat;
     background-attachment:fixed;
     background-position:0 0;
}

/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}

h1 {font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:1em;
    line-height:140%;
    font-family:"Lucida Grande",sans-serif;
}

/* LIST STYLE */
ul {list-style:square inside url(image.gif);}

ul {list-style-type:square;
    list-style-position:inside;
    list-style-image:url(image.gif);
}

/* OUTLINE */
h1 {outline:#f00 solid 2px;}

h1 {outline-color:#f00;
    outline-style:solid;
    outline-width:2px;
}

7- استایل های مشابه رو توی یه گروه قرار بدین

قبل
کد:
h1 {padding:5px 0; font-family:verdana; font-weight:700;}
#box1 .heading  {padding:5px 0; font-family:verdana; font-weight:700;}
#box2 .heading  {padding:5px 0; font-family:verdana; font-weight:700;}

بعد
کد:
h1, #box1 .heading, #box2 .heading  {padding:5px 0; font-family:verdana; font-weight:700;}

cyltech نوشته: در نظر داشته باشید که اینکارو کنید IE اصلا درست ساپورت نمیکنه و اگه بصورت گروهی بنویسی و یک بخشش ناآشنا باشه کل بلوک رو نادیده میگیره اونوقت...

از این به بعد بیشتر برای کاهش حجم فایل هستش

8- تعداد line break هارو کاهش بدید

قبل
کد:
h2 {
    font-family:verdana;
    padding:0;
    margin:5px 0;
    color:#333;
    text-decoration:underline;    
}

بعد
کد:
h2 {font-family:verdana;padding:0;margin:5px 0;color:#333;text-decoration:underline;}


9- semicolon آخری رو پاک کنید

قبل
کد:
h2 {font-family:verdana;color:#333;}

بعد
کد:
h2 {font-family:verdana;color:#333}

cyltech نوشته: البته توجه داشته باشن همگی که اینا واسه کاهش حجم هست نه یکطور نوشتن و استاندارد و خوب. چون برعکس این توی مقاله ای که گوگل منتشر کرده عرض کردن که سمیکالن آخرین پراپرتی هم بذارید. درست توی یکنواخت نوشتن در php که کامای آخرین مقدار ارایه رو بذاریم.

10- از کامنت های ساده استفاده کنید

ابن چیه آخه؟
کد:
/************************************/
/*          Content Page            */
/************************************/

به جاش اینطوری کنید
کد:
/* content page */

11- کد رنگ ها رو به صورت ساده بنویسین

به جای اینکه کد کامل بعضی از رنگ ها رو بنویسین می تونین اونا رو کوتاه کنید
مثلا
کد:
#ffffff, #113344, #aabbcc, #ff0000

تبدیل میشن به

#fff, #134, #abc, #f00

اما خب رنگایی مثل 1a2b3c# رو نمیشه خلاصه کرد

12- px رو حذف کنید

cyltech نوشته: فقط اگر مقدارت صفر هست میتونی px رو حذف کنی که بهتره هم اینکارو کنی

کد:
h2 {padding:0px; margin:0px;}

/* removed */

h2 {padding:0; margin:0}

13- از ابزارهای فشرده ساز کننده ی CSS استفاده کنید

اگه حوصله شو نداشتین دستی این کارو انجام بدین می تونین از ابزارای زیر استفاده کنین Tongue

CSS Optimizer
Flumpcakes CSS Optimizer
Clean CSS
CSS Drive CSS Compressor
Online YUI Compressor
Style Neat

منبع : Queness

البته یه چنتاش اضافی بود حذفیدم Dodgy (3 تا پست پایینتر اونا رو هم نوشتم Big Grin)
W H A T E V E R   Sleepy 
  پاسخ
#2
اگه آقای علیرضا بیان به مورد 11 ایراد میگیرن . آخه میگن نباید بزرگ نوشت . البته دلیلشو نگفتن .. فقط گفتن تو css بزرگ نوشتن معنی نداره ...Tongue
و در مورد 8 میشه بگید چرا ؟ آخه اولی خواناتره...
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط : cyletech
#3
نقل قول:یه تست که تو آدرس زیر انجام شده نشون میده که بهتره از [email protected] استفاده نکنیم
من هم مقاله ای رو معرفی کردم که بخونید قبلا در همین رابطه که چرا نباید از @import استفاده کنید.

نقل قول:7- استایل های مشابه رو توی یه گروه قرار بدین
در نظر داشته باشید که اینکارو کنید IE اصلا درست ساپورت نمیکنه و اگه بصورت گروهی بنویسی و یک بخشش ناآشنا باشه کل بلوک رو نادیده میگیره اونوقت...
کروم هم تست کردم خودم اینطوری بود ولی فایرفاکس نه.

نقل قول:از این به بعد بیشتر برای کاهش حجم فایل هستش
کلا بهش میگن minified . توی وبسایت جی‌کوئری هم بری نوشته. ابزار های زیادی برای کم حجم کردن هستن.

نقل قول: 9- semicolon آخری رو پاک کنید
البته توجه داشته باشن همگی که اینا واسه کاهش حجم هست نه یکطور نوشتن و استاندارد و خوب. چون برعکس این توی مقاله ای که گوگل منتشر کرده عرض کردن که سمیکالن آخرین پراپرتی هم بذارید. درست توی یکنواخت نوشتن در php که کامای آخرین مقدار ارایه رو بذاریم.

نقل قول:11- کد رنگ ها رو به صورت ساده بنویسین
کاری که خودت نمیکنی Big Grin

نقل قول: 12- px رو حذف کنید
نه بابا؟ Cool فقط اگر مقدارت صفر هست میتونی px رو حذف کنی که بهتره هم اینکارو کنی.

نقل قول: اگه آقای علیرضا بیان به مورد 11 ایراد میگیرن . آخه میگن نباید بزرگ نوشت . البته دلیلشو نگفتن .. فقط گفتن تو css بزرگ نوشتن معنی نداره ...
آره دقیقا. نباید بزرگ بنویسه چون استاندارد نیست. هیچ جای دنیا بزرگ نمی نویسن. کلا اینا قواعد نوشتن هستن. PHP هم قوانینی داره که بین برنامه نویسا رواج یافته.

نقل قول:البته یه چنتاش اضافی بود حذفیدم
Big Grin دیدی ما که بلد نیستیم یه چی رو باز کنیم آخر سر چهار تا پیچ باقی میمونه میگیم خب اینا اضافین Big Grin

نقل قول:و در مورد 8 میشه بگید چرا ؟ آخه اولی خواناتره...
اینها روش کم حجم ساختنه. دقیقا اولی خوانا تره. همیشه موقع توسعه دادن همه چی خواناست و در پایان میکنیم تو همدیگه که حجمش بیاد پایین Big Grin
غایب
  پاسخ
تشکر شده توسط : masoudmanson pary_daryayi azadmol
#4
(۱۳۹۱ مرداد ۰۲, ۰۷:۴۰ ب.ظ)cyletech نوشته:
نقل قول:البته یه چنتاش اضافی بود حذفیدم
Big Grin دیدی ما که بلد نیستیم یه چی رو باز کنیم آخر سر چهار تا پیچ باقی میمونه میگیم خب اینا اضافین :

نه داداشی
اینطوری نیست Undecided

موردای تکراری بودن، برا همون ننوشتم
بیا اینم اون دوتایی که حذفیدم Sad

14 - خلاصه نویسی کنید (Use Shorthands)


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

15 - کلاس هایی رو که استفاده نمی کنید پاک کنید

در طول توسعه ی سایت ممکنه کلاسهایی بنویسیم که بعدا ازشون استفاده نکنیم. بهتره بعد از تموم شدن کار سایت، فایل استایل رو بررسی کنیم و مواردی رو که اضافین پاک کنیم.
Dust-me Selector یه افزونه برا فایرفاکسه که سلکتور های بلااستفاده رو پیدا می کنه Big Grin


راستی خیلی ممنون بابت نکاتی که گفتی Big Grin
اشتباه هارو درس کردم Tongue Dodgy
W H A T E V E R   Sleepy 
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان