CSS Optimizasyonu

Web tasarım, Web Programlama ve script dilleri konuları buraya
Cevapla
Kullanıcı avatarı
velociraptor
Yottabyte3
Yottabyte3
Mesajlar: 28299
Kayıt: 14 Mar 2006, 02:33
cinsiyet: Erkek

CSS Optimizasyonu

Mesaj gönderen velociraptor » 12 Haz 2009, 19:14

CSS'in varlığı başlı başına bir optimizasyon ihtiyacından kaynaklanır. HTML kodları arasında onlarca defa aynı görsel tanımlamaları yapmama amacıyla CSS kullanırız. Böylece hem iş yükümüzü azaltmış oluruz hem de istemci tarafına gönderilen toplam veri azalır ve performans artar. Aynı durum CSS içerisinde de söz konusu. Yazdığımız CSS kodunun ne kadar doğru ve kısa olduğu performans açısından önemli, fakat diğer yandan bu optimizasyon bazen kodun okunabilirliliğini de azaltabiliyor.

İki arada bir derede kaldığımız bu noktada projeler yayına girmeden CSS kodlarını optimize eden ek yazılımlar kullanılıyor. Projeye ait CSS dosyası optimizasyon işleminden geçirildikten sonra internet ortamına aktarılıyor, oysa geliştiricilerin üzerinde çalıştıkları dosya ise eski optimize olmayan, kolay okunabilir dosya oluyor. Bu durumun tek kötü yanı üzerinde sıkça değişiklik yapılan projelerde her yükleme öncesi ek olarak optimizasyon işleminin yapılmasının gerekmesi.

Uzun lafın kısası, esasen benim bu yazıyı yazmamın nedeni sizi http://www.cleancss.com ile tanıştırmak. Siteye direk kes-yapıştır yöntemi ile CSS dosyanızı aktarabileceğiniz gibi internet ortamındaki CSS dosyanızın konumu belirterek de kullanabilirsiniz. Sistemin yaptığı işlem tüm CSS kodlarınızı kontrol ettikten sonra seçtiğiniz seçeneklere uygun olarak kodunuzu optimize etmek. Optimizasyon işlemi sonrası yeni CSS kodunuzu sitenin alt tarafında bulabileceğiniz gibi tüm yapılan değişikliklere ait açıklamalar da bir liste olarak sıralanıyor. Benim yaptığım denemelerde %30-%40 arası değerlerde optimizasyon yapılabildi. Başarılı fakat yeterli değil.

Aşağıdaki CSS kodumu optimizasyon motoruna aktardım

Kod: Tümünü seç

span {
border-width:2px;
border-color:black;
border-style:dashed;
}
Aldığım sonuç şu şekilde oldu;

Kod: Tümünü seç

span {
border-width:2px;
border-color:#00;
border-style:dashed;
}
Optimizasyon amacıyla bu CSS sınıfı içerisinde yapılan tek değişiklik renk değeri ile ilgili. Yüzlerce renk tanımladığımız bir CSS dosyası içerisinde bu ve bu gibi değişiklikler biriktiğinde ciddi bir fark oluşuyor. Diğer yandan http://www.cleancss.com adresindeki araç CSS dosyası içerisinde ikişer defa tanımlanmış CSS sınıflarını kontrol etmek gibi ek özelliklere de sahip. Fakat sadece CSS optimizasyon araçlarını kullanmak yeterli değil. Gelin bir de benim yaptığım optimizasyon sonrası yukarıdaki CSS sınıfının son haline bakalım

Kod: Tümünü seç

span {
border:2px black dashed;
}
İşte bu kadar. Yukarıdaki CSS sınıfımı ek olarak CSS optimizasyon motoruna aktardığımda oluşan son hali de aşağıdaki gibi

Kod: Tümünü seç

span {
border:2px #00 dashed;
}
Sonuç muhteşem. En yukarıdaki CSS sınıfımızdan buralara geldik. Benim tavsiyem CSS optimizasyon araçlarını kullanmanızdan yana. Çok kısa sürede ciddi optimizasyon sağlayabiliyorlar fakat maksimum optimizasyon için sizin de kodlarınıza bir göz atmanız şart

ALINTIDIR



Kullanıcı avatarı
mavigece
Megabyte1
Megabyte1
Mesajlar: 931
Kayıt: 16 Mar 2006, 08:55
cinsiyet: Erkek
İletişim:

Re: CSS Optimizasyonu

Mesaj gönderen mavigece » 12 Haz 2009, 22:06

Kod: Tümünü seç

span {
border:2px #00 dashed;
}
hatta biraz daha optimizasyon yapabiliriz. eğer kodlarımızı şu şekilde yazarsak. bıraktığımız boşluklarıda almış olucaz. yani css dosya boyutumuz küçülmüş olacaktır.

Kod: Tümünü seç

span {border:2px #00 dashed;}
tabiki yukarıdaki gibi yaptığımızda mutlaka yanına /* Açıklama */ yapmayı unutmayalım. çünkübir dahaki ayarlamaya geçtiğimzde neyin nerede işe yaradığını bilmekte zorlanabilirsiniz.

son bir şey daha. yukarıdaki optimize'yi kodlamanız bittikten sonra yapınız..

Aşağıdaki sitelerde online css optimizasyonu yapmaktadır..

Kod: Tümünü seç

http://www.cleancss.com/
http://www.cssoptimiser.com/
iyi çalışmalar..

Cevapla