راهنمایی برای کاهش حجم css برای سئو بهتر

[Business plan]

پیج اود و پیج سایز مناسبه ولی حجم css زیاده، ممنون میشم اگه تمام راه های کم کردن حجم css رو بگید چی هست، البته از gzip هم استفاده میکنم ولی باز هم در آنالیز سایت حجم css زیاده

 

[decoweb]

پیج اود و پیج سایز مناسبه ولی حجم css زیاده، ممنون میشم اگه تمام راه های کم کردن حجم css رو بگید چی هست، البته از gzip هم استفاده میکنم ولی باز هم در آنالیز سایت حجم css زیاده

با سلام و درود

:general105: از نظر بنده کلآ حجم و سرعت باز شدن سایت برای سئو مفید بوده و یکی از :general601: ویژگی های سئو و نکته های سئو در اصل بهینه سازی کردن کد های سایت میباشد .

برای کم کردن حجم کد های قالب راه های زیادی هست

1 - افزونه های مثل : autoptimize - WP Rocket - WP Super Cache - WP Fastest Cache - W3 Total Cache - Autoptimize -

2 - ولی برای سایت های که از صفحات HTML و یا وبلاگ استفاده میکنند

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- به جای import@ از link استفاده کنید

یه تست که تو آدرس زیر انجام شده نشون میده که بهتره از import@ استفاده نکنیم (من که تا حالا از این استفاده نکردم، فک کنم سنم قد نمیده به این. شاید قدیما استفاده می کردن

)
- استفاده از import@ باعث میشه که زمان یک رفت و برگشت اضافی به زمان کل دانلود صفحه اضافه بشه
- استفاده از import@ تو 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;}

در نظر داشته باشید که اینکارو کنید 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;}

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

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

ابن چیه آخه؟
کد:

/************************************/
/*          Content Page            */
/************************************/

به جاش اینطوری کنید
کد:

/* content page */

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

به جای اینکه کد کامل بعضی از رنگ ها رو بنویسین می تونین اونا رو کوتاه کنید
مثلا
کد:

#ffffff, #113344, #aabbcc, #ff0000

تبدیل میشن به

#fff, #134, #abc, #f00

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

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

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

h2 {padding:0px; margin:0px;}
margin
/* removed */

h2 {padding:0; :0}13- از ابزارهای فشرده ساز کننده ی CSS استفاده کنید

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

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