Her Internet kullanıcının, web sayfasından ilk beklentisi, içeriğin hızlı olarak sunulmasıdır,Bu konuda sizlere Web sayfalarının optimizasyonu konusunda çeşitli bilgi taktik ve püf noktalardan bahsedeceğim, ilk dersimiz CSS
CSS’in varlığı, başlı başına optimizasyon ihtiyacımızı karşılamaktır..Küçük ayrıntılara dikkat ederek, web sayfasının hızlı yüklenmesi ve bandwidth kullanımından kar elde edebiliriz.Böylece daha mutlu kullanıcılar ve daha az band kullanımı sağlamış oluruz.Fakat her ne kadar, css/still dosyaları sitede kullanılan resimler kadar bandwidth kullanımına etki etmese de,onbinlerde kullanıcının request gönderdiği sayfalarda (facebook, yahoo vb) en ufak optimizasyon çalışması büyük getirileri olacaktır.50Kb css dosyası + 50Kb html dosyası = 100KBSayfaya yeni gelen user 100kb data çekecektir.anlık 10000 kullanıcı x 100kb = 1 GB bandwidth kullanımı eder ki bu ciddi bir rakamdır.Sınıflandırma
Buradaki yazımda kısaca bahsettiğim css optimizasyon konusunda, şimdi daha detaylandırarak, sınıflandırma nedir? getirileri nelerdir inceleyelim.interface coding’in ve css’in temel elementlerinden olan margin, padding, border, list-style gibi elementler, hemen hemen her xhtml etiketinde karşımıza çıkmaktadır.Birbiri ardına tekrar eden class’lar ayırmak ve id şemasını parçalara ayırmak, hem akıcı bir kod yazmayı hemde css dosyamızın gereksiz etiketlerle .kb olarak artmasını önüne geçmiş oluruz.Örnek
#box1 { margin-left:5px; margin-top:5px; padding:10px; background:url(background.gif) repeat; }#box1 { margin-left:5px; margin-top:5px; padding:10px; background:url(bg1.gif) repeat; }#box1 { margin-left:5px; margin-top:5px; padding:10px; background:url(arkaplan.gif) repeat; }#box1 { margin-left:5px; margin-top:5px; padding:10px; background:url(backgroundimg.gif) repeat; }
763 Byte yer kapladı.yerinine
.marL5 { margin-left:5px; }.marT5 { margin-top:5px; }.pad10 { padding:10px; }#box1 { background:url(background.gif) repeat; }#box2 { background:url(bg1.gif) repeat; }#box3 { background:url(arkaplan.gif) repeat; }#box4 { background:url(backgroundimg.gif) repeat; }
Ufak bir değişiklik bize 173Byte yer kazandırdı.Fakat
#box1, #box2, #box3, #box4 { margin-left:5px; margin-top:10px; padding:10px; }#box1 { background:url(background.gif) repeat; }#box2 { background:url(bg1.gif) repeat; }#box3 { background:url(arkaplan.gif) repeat; }#box4 { background:url(backgroundimg.gif) repeat; }
Şeklinde kullanılabilirken neden kullanmadık ?Çünkü; her element aynı sınıfları barındırmayacaktır.Box1’de margin-left:5 iken box3’de 2px olabilir.Bu konuda sık kullanılan elementleri sınıflandırmak en mantıklı yoldur.Diğer bir konu ise, CSS ‘de elementleri grupların içinde kısa olarak yazılmasıda çok önemlidir, aşağıda örnekleriyle genel elementlerin optimizasyon kurgusunca nasıl yazılacağını anlatacağım.FONT
element {font-style: normal italic oblique;font-variant:normal small-caps;font-weight: normal bold bolder lighter;font-size: (değer+birim) (xx-small - xx-large);line-height: normal order (değer+birim);font-family:name,"diğer";}element {font: italic small-caps bold 1em/1.2em "Arial","Helvetcia",sans-serif;}
Background
element {background-color: color #hex (rgb / % 0-255);background-image:url(URI);background-repeat: repeat repeat-x repeat-y no-repeat;background-position: X Y (top ve bottom değerleri) (left ve right değerleri);background-attachment: scroll order fixed;}element {background: #fff url(images/image.png) no-repeat 20px 100px fixed;}
Lists
element {list-style-type:square;list-style-position:inside;list-style-image:url(image.gif);}element {list-style:square inside url(image.gif);}
Margin/Padding
element {margin-top: 1px;margin-right: 2px;margin-bottom: 3px;margin-left: 4px;}element {margin: 1px 2px 3px 4px (top, right, bottom, left);}
Border
element {border-top: 4px solid #000;border-left: 1px solid #BBC;border-right: 2px solid #123;border-bottom: 3px solid #456;}element {border: 1px solid #000;border-width: 4px 2px 3px 1px;border-color: #000 #123 #456 #BBC;}
Örnek
element {.heading1 {font-size: 10px; color: #000000; font-family: verdana, helvetica, arial, sans-serif; font-weight: bold;}.heading2 {font-size: 12px; color: #000000; font-family: verdana, helvetica, arial, sans-serif; font-weight: bold;}.heading3 {font-size: 15px; color: #000000; font-family: verdana, helvetica, arial, sans-serif; font-weight: bold;}
ise ozaman;Örnek
element {.heading1, .heading2, .heading3 {font: bold 10px "Verdana","Helvetica",Arial,sans-serif;color: #000000;}.heading2 {font-size: 12px;}.heading3 {font-size: 15px;}
Artık css dosyamızda %50 oranında bir optimizasyon gerçekleştirdik, hadi hayırlı olsun
