CSS Minify
CSS minify, stil dosyalarımızın sıkıştırılmış yani küçültülmüş anlamına gelmektedir. Yorum satırların silinmesi, birden fazla özelliğe sahip sınıfların tek bir sınıfta toplanması, fazla boşlukların silinmesi işlemine CSS minify denilmektedir. Daha önceki “page speed analytics.js sorun çözümü” yazımda CSS minify başlığı geçmekteydi. Bu yazımda daha detaylı şekilde anlatıyor olacağım.
CSS Nedir?
CSS(“Cascading Style Sheets”) Türkçe karşılığı basamaklı stil şablonu anlamına gelmektedir. HTML kodlarının kullanıcıya gösterilen ve kullanışlı bir formata çeviren stil dosyasıdır. Bazı tarayıcılara göre altyapılarından kaynaklı farklı nitelikler eklenmektedir. Bunlardan bazıları;
- -webkit-
- -moz-
Yukarıda belirtilen özellikler chrome, safari, firefox tarayacıların alt yapısında barınan bir motordur. Bunlar sayesinde gölge, blur, oval gibi CSS özellikleri tüm tarayıcılarda uyumluluk sağlaması için kullanılır.
Neden CSS Minify?
Google kullanıcıyı düşünmeye 2018’de daha fazla arttırmış durumdadır. Sayfalarımızda birden fazla CSS dosyası, birden çok class(sınıf) bulunabilir. CSS dosyaların bazı bölümlerine yorum satırları eklenmektedir. Bunlar diğer yazılımcıların veya yazan kişinin daha sonra tekrar koda dönüp baktığında hatırlatma, not alma gibi bir kısım gibi düşünebilirsiniz. Örnek verecek olursak 1 yıl önce yazılımı tamamlanan internet sitesinin popup CSS’inde başlangıç ve bitiş kısmına ” /*Popup Start*/ , /*Popup End*/ ” gibi bir yorum satırı attığını varsayalım. 1 yıl sonra popup ile ilgili değişiklik yaptığında buraya ait kodların nereden başlayıp nerede bittiğini görebilmesini sağlar. Ama bu tarz durumlarda CSS dosyamızda yer kaplamaktadır. Bu durumda haliyle CSS dosyamızın boyutu büyütmektedir.
İkinci durum ise aynı özelliklerin birden fazla sınıflara verilmesi bir diğer örnek
.radius
{
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.radius10
{
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
Yukarıdaki durumda aynı özellik birden fazla sınıfa uygulanmıştır. CSS Minify yaptığımızda otomatik olarak bunlar tek sınıfta daha doğrusu “,” ile ayrılarak 3 satır koddan kurtulmuş oluruz.
Özet;
CSS Minify, sayfa yüklenme hızını düşürür,
Gereksiz yorum satırları silinir,
Gereksiz boşluklar silinir,
Birden fazla aynı özellikte olan sınıflar(classlar) tek bir sınıfta birleştirilir.
SEO Çalışmalarınız da çok sık karşılaşacağınız sorunlardan biri olduğunu unutmayınız.
